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.

Darin Dimitrov · Accepted Answer · 2011-07-08 12:29:23Z

23

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

edited Jul 8, 2011 at 12:29

answered Jul 8, 2011 at 12:24

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

5 Comments

Goran Bralo Over a year ago

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 Over a year ago

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

Darin Dimitrov Over a year ago

@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 Over a year ago

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 Over a year ago

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

Rafay · Accepted Answer · 2011-07-08 12:25:32Z

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>

ysrb · Accepted Answer · 2011-07-08 12:15:25Z

1

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.

answered Jul 8, 2011 at 12:15

ysrb

6,7202 gold badges32 silver badges30 bronze badges

1 Comment

Goran Bralo Over a year ago

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

Collectives™ on Stack Overflow

Render partial view onclick in asp.net mvc 3 project

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related