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> | <span>@Html.ActionLink("Delete", "Delete", new { id = @item.Id})</span>
| @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.
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>
|
<span>
@Html.ActionLink("Delete", "Delete", new { id = Model.Id })
</span>
|
@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);
}
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>
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.
