Monday, 30 May 2011

Asp.net mvc razor render partial view using ajax helper

This is the extension to my blog in which I demonstrated rendering of the partial view using jquery Ajax . I want to demonstrate here yet another way by which partial view can be rendered without page refresh. Here is the implementation.

Step 1:

I will again be using DisplayData class in my demo. Here is it.

  
    public class DisplayData
    {
       public int ID { get; set; }
       public DisplayData(int ID)
       {
              this.ID = ID;
       }
    }

Step 2:

Create a PartialDemo page

@model IEnumerable<MvcApplication5.Models.DisplayData>
@{
    ViewBag.Title = "PartialDemo";
}


@Ajax.ActionLink("Click 1", "PartialDemo", "PartialDemo", new {Data= "1" }, new AjaxOptions { UpdateTargetId = "rsvpmsg" })
@Ajax.ActionLink("Click 2", "PartialDemo", "PartialDemo", new {Data= "2" }, new  AjaxOptions { UpdateTargetId = "rsvpmsg" })

<div id="rsvpmsg">
@{ Html.RenderPartial("PartialDemoUC", this.Model);}
</div>


Step 3:

Create a User Control PartialDemoUC.cshtml

@model IEnumerable<dynamic>

@foreach(var items in Model)
{
   @items.ID    
}


Step 4:

In a PartialDemo controller create an Action method for rendering the partial view on the first call to the method and then on an ajax call(on the click of the link)

  
    public ActionResult PartialDemo(string Data)
    {
       List<DisplayData> Display = new List<DisplayData>();

       if (Request.IsAjaxRequest())
       {
          if (Data == "1")
          {
             Display.Add(new DisplayData(3));
             Display.Add(new DisplayData(4));
          }
          else
          {
            Display.Add(new DisplayData(5));
            Display.Add(new DisplayData(6));
          }
          return PartialView("PartialDemoUC",Display);
       }
       else
       {
           Display.Add(new DisplayData(1));
           Display.Add(new DisplayData(2));
           return View("PartialDemo", Display);
       }
    }

10 comments:

  1. Many examples like this on the internet are too complicated to follow without their whole project.
    This was simple and easy to follow from scratch.
    Great work, thanks.

    ReplyDelete
  2. This is the best simple example I've found anywhere. Thanks -RaoulRubin

    ReplyDelete
  3. This is what I was looking for about 2 hours,

    kudos

    ReplyDelete
  4. Thanks!! It was so useful :)

    ReplyDelete
  5. I tried to implement this on MVC 4 using VS 2010 with no luck... Is the code available to download?

    ReplyDelete
  6. Hi!

    This is a nice article. Thank for sharing your knowledge. There are some other links related to "Calling partial view using Ajax in ASP.NET MVC 4". I hope this is a

    very useful for developers.

    http://www.mindstick.com/Articles/8e131adf-2621-4cd7-8557-770c1ede799c/?Calling%20partial%20view%20using%20Ajax%20in%20ASP.NET%20MVC%204

    http://ciintelligence.blogspot.in/2012/06/aspnet-mvc-ajax-load-with-partial-view.html

    ReplyDelete