Render partial view onclick in asp.net mvc 3 project

Question

In my mvc project i have a simple list of items with crud operations like this:

<tbody>
 @{
    foreach (var item in Model)
    {            
         <tr>

            <td>@item.Title</td>
            <td>@item.Body</td>
            <td>@item.Price</td>
            <td><span class="EditLink ButtonLink" noteid="@item.Id">Edit</span>&nbsp;|&nbsp;<span>@Html.ActionLink("Delete", "Delete", new { id = @item.Id})</span>
                            &nbsp;|&nbsp; @Html.ActionLink("Detalji", "Details", new { id = @item.Id})
             </td>
        </tr>
     }
  }

</tbody>

I am wondering is it possible to render details view as partial under the table when i click on details. I mean when i clik details to show me details view, i want it under my table in some div or paragraph.

Please help.

Solution 1

You could use AJAX. But first let's improve your code by getting rid of those loops and replacing them with display templates:

@model IEnumerable<SomeViewModel>
<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Body</th>
            <th>Price</th>
            <th>actions ...</th>
        </tr>
    </thead>
    <tbody>
        @Html.DisplayForModel()
    </tbody>
</table>

<div id="details"></div>

and then define a display template (~/Views/Shared/DisplayTemplates/SomeViewModel.cshtml):

@model SomeViewModel
<tr>
    <td>@Html.DisplayFor(x => x.Title)</td>
    <td>@Html.DisplayFor(x => x.Body)</td>
    <td>@Html.DisplayFor(x => x.Price)</td>
    <td>
        <!-- no idea what the purpose of this *noteid* attribute on the span is
             but this is invalid HTML. I would recommend you using the
             HTML5 data-* attributes if you wanted to associate some
             metadata with your DOM elements
        -->
        <span class="EditLink ButtonLink" noteid="@Model.Id">
            Edit
        </span>
        &nbsp;|&nbsp;
        <span>
            @Html.ActionLink("Delete", "Delete", new { id = Model.Id })
        </span>
        &nbsp;|&nbsp; 
        @Html.ActionLink(
            "Detalji",                      // linkText
            "Details",                      // actionName
            null,                           // controllerName
            new { id = Model.Id },          // routeValues
            new { @class = "detailsLink" }  // htmlAttributes
        )
    </td>
</tr>

Now all that's left is to AJAXify this details link in a separate javascript file:

$(function() {
    $('.detailsLink').click(function() {
        $('#details').load(this.href);
        return false;
    });
});

Which assumes of course that you have the following action:

public ActionResult Details(int id)
{
    SomeDetailViewModel model = ... fetch the details using the id
    return PartialView(model);
}

Solution 2

may not be the answer you are looking for...

you can do an ajax call onClick of details link and append the response to some div,

for example

$(".details").click(function(){
var id = $(this).attr("id");

 $.ajax(
     {
         type: 'POST',         
         data: "{'id':" + "'" + id + "'}",
         dataType: 'html',
         url: 'url/to/controller/',
         success: function (result) {
         alert('Success');
         $("#ajaxResponse").html(result);
         },

         error: function (error) {
            alert('Fail');
         }
      });
});

controller side

[HttpPost]
public ActionResult Details(string id)
{
    // do some processing
   return PartialView("YourPartialView");
}

in your markup define a div that will hold the response of ajax call

<div id="ajaxResponse"></div>

Solution 3

Yes. It's possible. Preferably, you should render the details in ajax. Because you will not need to render all the details for each row. And user will need to click on the details.

Comments

[Goran Bralo]

Can you post an example i am litle week on ajax.

[Goran Bralo]

I am not sure you understand me well, i want to display a details for each item in div details you specified, i dont see here your details view, in my table i showed title, body and price but in my details there is lot more info.

[Goran Bralo]

Sorry i didn't see details controller on time :)

[Darin Dimitrov]

@GoranB, no I don't understand you. I thought you wanted a master/detail scenario. So that when the user clicked on the Details link for each row there was the details of the given row shown in some div outside of the table. Wasn't that what you are asking for?

[Goran Bralo]

that's it Darin, when i saw your question at first there wasn't details controller i think you was writing it :) and my noteid is for popup dialog for editing table item s :)

[Goran Bralo]

Thank you the part i was missing is $(function() { $('.detailsLink').click(function() { $('#details').load(this.href); return false; }); }); so thanks for extra code!