jQuery 在 asp.net mvc 3 项目中渲染局部视图 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6624224/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Render partial view onclick in asp.net mvc 3 project
提问by GoranB
In my mvc project i have a simple list of items with crud operations like this:
在我的 mvc 项目中，我有一个简单的项目列表，其中包含以下 crud 操作：
<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.
我想知道当我单击详细信息时，是否可以将详细信息视图呈现为表格下方的部分视图。我的意思是当我点击详细信息向我显示详细信息视图时，我希望它位于我的表格下方的某个 div 或段落中。
Please help.
请帮忙。
回答by Darin Dimitrov
You could use AJAX. But first let's improve your code by getting rid of those loops and replacing them with display templates:
你可以使用 AJAX。但首先让我们通过摆脱这些循环并用显示模板替换它们来改进您的代码：
@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):
然后定义一个显示模板 ( ~/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:
现在剩下的就是在一个单独的 javascript 文件中 AJAXify 这个细节链接：
$(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);
}
回答by Rafay
may not be the answer you are looking for...
可能不是您要找的答案...
you can do an ajax call onClickof detailslink and append the response to some div,
您可以onClick对details链接进行ajax调用并将响应附加到某些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 divthat will hold the response of ajax call
在您的标记中定义一个div将保存 ajax 调用的响应
<div id="ajaxResponse"></div>
回答by ysrb
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.
是的。这是可能的。最好，您应该在 ajax 中呈现细节。因为您不需要渲染每一行的所有细节。用户将需要单击详细信息。
