8/9/2017 maztt: Asp.

net mvc razor render partial view using jquery Ajax

More Next Blog [email protected] Dashboard Sign Out

maztt
THURSDAY, 14 APRIL 2011 There was an error in this gadget

Asp.net mvc razor render partial view using jquery ABOUT ME

Ajax maz3tt

I will going to demonstrate how we can render PartialViews using Jquery Ajax. I will I am working mainly on .net technologies and is very
be clicking an a href link ,then I will be calling the controller through jquery Ajax passionate about learning and implementing new things.
which will fill the partialview for a really nice user experience.
View my complete profile
Step 1:
LABELS
First of all we will be creating an DisplayData class for the use for this example in
the model. Asp.net mvc (12)
? Asp.net mvc Jquery (1)
1 public class DisplayData automapper (1)
2{ c# (2)
3 public int ID { get; set; } datannotations (2)
4 public DisplayData(int ID) Dotnetnuke (1)
5 {
entity framework (2)
6 this.ID = ID;
Json (2)
7 }
8} Linq (3)
voice actions android (1)

Step 2: BLOG ARCHIVE

We will create a Clicks page and write the following code on it. Specially note 2012 (12)
empty here which will going to empty and then fill partialview with new records. 2011 (12)
? December (1)
1 $(document).ready(function () {
November (1)
2 $('.msg').click(function () {
3 var id = this.id; June (1)
4 $.ajax({ May (1)
5 url: "/Category/Display", April (2)
6 data: { data: id },
Asp.net mvc razor render partial view using
7 success: function (mydata) { jquery...
8 $("#link").empty().append(mydata);
Google voice actions for android
9 },
10 type: "POST" March (2)
11 });
February (4)
12 return false;
13 });
14 });
15
16
17 <a class="msg" href="#" id="1">Click Me</a>
18 <a class="msg" href="#" id="2">AND Click Me</a>
19 <div id="link">
20 </div>

Step 3:

Create a User Control ClicksUC for partial rendering

?
1 foreach(var items in Model)
2{
3 @items.ID
4}

Step 4:

And Finally Create an action methods inside the Category controller for calling the
view and then rendering the partialview.

?
1 public ActionResult Clicks()
2 {
3 return View();
4 }

http://mazharkaunain.blogspot.in/2011/04/aspnet-mvc-render-partial-view-using.html 1/3
8/9/2017 maztt: Asp.net mvc razor render partial view using jquery Ajax
5
6 public ActionResult Display(int data)
7 {
8 List<DisplayData> Display = new List<DisplayData>();
9 if (data == 1)
10 {
11 Display.Add(new DisplayData(3));
12 Display.Add(new DisplayData(4));
13 }
14 else
15 {
16 Display.Add(new DisplayData(1));
17 Display.Add(new DisplayData(2));
18 }
19
20 return PartialView("ClicksUC", Display);
21 }

Posted by maz3tt at 14:01

Labels: Asp.net mvc Jquery

13 comments:

Anonymous 16 July 2011 at 09:34

I have tried this and works great on my development environment under localhost.
Once I move it to a server with a domain name, the ajax calls fail.

Any ideas why?

Reply

mazhar Kaunain 19 July 2011 at 22:15

There is absolutely no reason for it not to work in the domain environment. OK if it
is the problem with the Ajax call then check it with fiddler or firebug.These are great
tools and I am sure using these you would get to the solution to the problem.
Reply

Anonymous 13 December 2011 at 04:56

works........ gr8

Reply

Anonymous 20 February 2012 at 08:44

I have the same problem that works great on my development environment under
localhost. Once I move it to a web server with a domain name, nothing will happen.
How do you solve the problem. thanks
Reply

mazhar Kaunain 23 February 2012 at 02:15

try fiddler or firebug to get to the root of the problem. I think specifying
/Category/Display in global.asax will solve this problem.
Reply

Stuart Dobson 21 March 2012 at 02:35

This is actually really clever, one of the few guides I've managed to find about this.
It works fine for me although I'm in the middle of trying to pass a populated model,
I'll let you know if I can figure it out...
Reply

Aziz ur Rahman 9 April 2012 at 07:54

nice. i was looking for such a simple solution instead of using jquery tempate or
knockout.js etc.
Reply

Anonymous 14 August 2012 at 11:54

Good one, this help me a lot.
Reply

Matthew Brown 24 August 2012 at 11:25

http://mazharkaunain.blogspot.in/2011/04/aspnet-mvc-render-partial-view-using.html 2/3
8/9/2017 maztt: Asp.net mvc razor render partial view using jquery Ajax
This... saved... my... bacon!

Thank you!
Reply

Nirman Doshi 17 September 2012 at 02:24

The one who are facing an issue of not working this code on environments other
than dev environment. Its because here the url is hard-coded in url: attribute,
whereas you should try with @Url.Action.. A nice article overall. Thanks for sharing
Reply

Anonymous 21 December 2012 at 02:57

hellow everyone this is sohaib ameen here and I am using Jquery with ajax in
mvc3 application. I am having a button control on "FindStudents.cshmtl" with name
"AddStudents". On button click my application is supposed to get student form with
the help of a partial view which must replace "findstudents.cshtml" page contents.

I have displayed the contents through ajax call in jquery but it is also showing
view's own content either. how to replace them ..
here is my Jquery code as well..

$("#render").click(function () {

alert("button Clikced");
$.ajax({
url: "AddStudentsPartial",
type: 'GET',
cache: false,
success: function (result) {
alert(result);
$('#partial').html(result);
}
});
});
Reply

Anonymous 28 August 2013 at 07:58

helpful. thanks!

Reply

Anonymous 29 August 2013 at 09:19

Can you please provide little more details like where to add what.. I am beginner in
MVC/ASP.Net
Reply

Enter your comment...

Comment as: Raghu Gowda (Google) Sign out

Publish Preview Notify me

Newer Post Home Older Post

Subscribe to: Post Comments (Atom)

Powered by Blogger.

http://mazharkaunain.blogspot.in/2011/04/aspnet-mvc-render-partial-view-using.html 3/3