在asp.net mvc 3项目中渲染部分视图onclick答案

【问题标题】：Render partial view onclick in asp.net mvc 3 project在asp.net mvc 3项目中渲染部分视图onclick
【发布时间】：2011-10-01 05:45:50
【问题描述】：

在我的 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>&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>

我想知道当我单击详细信息时，是否可以将详细信息视图呈现为表格下方的部分视图。我的意思是当我单击详细信息以显示详细信息视图时，我希望它在我的表格下的某个 div 或段落中。

请帮忙。

【问题讨论】：

标签： jquery asp.net asp.net-mvc-3 razor

【解决方案1】：

您可以使用 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>

然后定义一个显示模板（~/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>

现在剩下的就是在一个单独的 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);
}

【讨论】：

我不确定您是否理解我，我想在您指定的 div 详细信息中显示每个项目的详细信息，我在这里看不到您的详细信息视图，在我的表格中我显示了标题、正文和价格但在我的详细信息中有更多信息。
对不起，我没有按时看到细节控制器 :)
@GoranB，不，我不明白你的意思。我以为你想要一个主/细节场景。因此，当用户单击每一行的详细信息链接时，表格外部的某个 div 中会显示给定行的详细信息。这不是你要的吗？
就是这样，达林，当我一开始看到你的问题时，我认为你在写它并没有详细信息控制器 :) 我的 noteid 是用于编辑表格项目的弹出对话框 :) >
谢谢我缺少的部分是 $(function() { $('.detailsLink').click(function() { $('#details').load(this.href) ; 返回 false; }); });所以感谢额外的代码！

【解决方案2】：

可能不是您要找的答案...

您可以进行 ajax 调用 onClick 的 details 链接并将响应附加到某个 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 调用的响应

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

【讨论】：

【解决方案3】：

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

【讨论】：

你能发布一个例子吗？