在asp.net mvc 3项目中渲染局部视图onclick

在我的mvc项目中，我有一个简单的项目列表，其中包含如下所示的crud操作：

 @{ foreach (var item in Model) {  @item.Title @item.Body @item.Price Edit | @Html.ActionLink("Delete", "Delete", new { id = @item.Id})  |  @Html.ActionLink("Detalji", "Details", new { id = @item.Id})   } }  

我想知道当我点击详细信息时，可以将详细信息视图呈现为表格下的部分视图。 我的意思是当我clik细节向我展示细节视图时，我希望它在我的桌子下面的某个div或段落中。

请帮忙。

Answer 1

你可以使用AJAX。 但首先让我们通过摆脱这些循环并用显示模板替换它们来改进代码：

 @model IEnumerable  @Html.DisplayForModel() 
 
 
 
Title
 
Body
 
Price
 
actions ...
 
 
 
 
 
 

然后定义一个显示模板（ ~/Views/Shared/DisplayTemplates/SomeViewModel.cshtml ）：

 @model SomeViewModel  @Html.DisplayFor(x => x.Title) @Html.DisplayFor(x => x.Body) @Html.DisplayFor(x => x.Price)    Edit   |   @Html.ActionLink("Delete", "Delete", new { id = Model.Id })   |  @Html.ActionLink( "Detalji", // linkText "Details", // actionName null, // controllerName new { id = Model.Id }, // routeValues new { @class = "detailsLink" } // htmlAttributes )   

现在剩下的就是在单独的javascript文件中AJAXify这个详细信息链接：

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

当然，您假设您有以下行动：

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

Answer 2

可能不是你要找的答案……

你可以在点击details链接上执行ajax调用并将响应附加到某个div，

例如

 $(".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'); } }); }); 

控制器方面

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

在你的标记中定义一个div ，它将保存ajax调用的响应

Answer 3

是。 这是可能的。 最好，您应该在ajax中呈现细节。 因为您不需要渲染每一行的所有细节。 用户需要点击详细信息。