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.

@Mark My Model is List<CustomObject>. I loop through the list and write table rows. But now i changed it to div structure. — manav inder
– manav inder, Commented Jul 19, 2012 at 11:25

VJAI · Accepted Answer · 2012-07-19 13:01:55Z

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.

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); 
  });   
});

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.

edited Jul 19, 2012 at 13:01

answered Jul 19, 2012 at 11:33

VJAI

32.9k23 gold badges108 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

manav inder Over a year ago

Let me tell you where i am right now. Upon click using Jquery Ajax i request my controller and getting the data in Json format (i preferred partial view more). But the data is in raw format. I need to apply all the html on my own. And also i need to set inner html for my div.

manav inder Over a year ago

similar to what Zach suggested in his approach

VJAI Over a year ago

Can't you change the action return partial view? if not then you have to try jquery templates to convert the JSON into html and update the divs.

manav inder Over a year ago

Yes i can easily changed the return type of my Action to partial view. So Is this method will return me the model for the partial and then i just have to render the partial view using that returned model?

VJAI Over a year ago

Can you post your action code? I'm not quite understand what you are trying

|

Zach dev · Accepted Answer · 2012-07-14 20:38:13Z

0

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
});

}

answered Jul 14, 2012 at 20:38

Zach dev

1,6208 silver badges15 bronze badges

2 Comments

manav inder Over a year ago

Dont you think writing the whole html from an object to generate the html is too much. There must be some way to pass this object to partial object as model and it'll do everything on its own.

Zach dev Over a year ago

that's right, for that case is the first example, you get the html ready just to $('#someConteirner').html(result);

Collectives™ on Stack Overflow

Render Partial Views using JQuery in MVC3

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related