Render Partial Views using JQuery in MVC3

Question

I have some records. Upon clicking on every record there information needs to display in an accordion.

That information is supposed to fetch from database dynamically.

What i've done so far is

Create a partial view. That is suppose to display the detailed information.

Upon click on record, i call jquery method and execute my method on controller. Controller returns object in the form of Json(or any other thing, open for any suggestions).

Now JQuery method has that (Model)object, but how could i use it to render my partial view from it.

Answer 1

this is a basic approach when you need submit some form and render the partial view as result

function GetView(){
if ($('#MyHtmlForm').valid()){
    $.ajax(
    {
      type: "POST",
      url: $('#MyHtmlForm').attr("action"), 
      data: $('#MyHtmlForm').serialize(),
      success: function(result) {
        //Render the partial view
        }
      },
      error: function(req, status, err) {
        //handle the error
      }
    });
}

}

and this for get basic details of row via json format, so use javascritp to generate the html

function GetSomeData() {
var cod = $('.row').val();
$.getJSON('@Url.action("ActionName","Controller")', { cod: cod }, function (result) {
    //Render data
});

}

Answer 2

I have some records. Upon clicking on every record there information needs to display in an accordion.

There are two ways you can achieve what you desire. I guess you have to return a partial view from the action that gives a detailed information about the record.

1. Listening to the click event of the anchor links and inside the event you have to frame the url and then $("#accordion-container-1").load(url).

Ex.

From your comment I see you have to pass the orderNo the action as parameter. So you have to set the orderNo as id or append that to some string (to avoid duplicate ids in elements) and set to the id for the anchor link.

Then,

$(function(){

  $("a.somecssclass").click(function(){

     var orderNo = this.id;

     var url = "/ControllerName/Tracking?orderNo=" + orderNo;

     // this will call the action through ajax and update the container with the
     // partial view's html.
     $("#divToLoadTheHtml").load(url); 
  });   
});

1. Using ajax action links supported by MVC. You can create an action link using Ajax.ActionLink that call some controller action through ajax and update the html result to a container.

Ex.

In this case when you are generating the records through looping the collection you have to create the links (on click has to load the content through ajax) through Ajax.ActionLink method and also you have to include the jquery'unobtrusive.ajax.js library.

@foreach(var m in Collection)
{
    .. other stuff

    @Ajax.ActionLink(link name, "Action", new { orderNo = m.something? }, 
    new AjaxOptions
    { 
        UpdateTargetId = "somediv" // set the div name where you want to load the partial view
    });
}

Update based on OP's comment

Your action method should be something like this,

public PartialViewResult Tracking(int orderNo) 
{ 
     var manager = new OrderManager(); 
     return PartialView(manager.Tracking(orderNo));
}

You should have a partial view either with the name Tracking.cshtml and inside the partial view you have to create the html the represents the detailed information of the record that you were talking about.

Tracking.cshtml

@model TrackingModel

<div>
  @Html.DisplayFor(...)
  ...
</div>

When you call the action Tracking from jquery or through ajax action (as i described previously) you will get partial view html that you can load into a particular container like div.