如何在 ASP.Net mvc3 Razor 中呈现部分页面

Question

在我的 ASP.net MVC3 Razor 项目中。我必须在普通视图页面中实现部分页面，但仅在操作调用后启用。但两个文件都引用单个视图模型。 如何在视图页面中使用部分页面。

部分页面的控制器代码

//View Customer Data Detailed
public ActionResult DetailedData(int CusId)
{
    var data = from c in cus.CusModelData
                where c.CusId == CusId
                select c;
    return View(data.ToList());

}

查看代码

<td>
    @* @Html.ActionLink("Edi", "Edit", new { id = item.CusId }) |*@
    @Html.ActionLink("Details", "DetailedData", new { CusId = item.CusId }) |
    @Html.ActionLink("Delete", "DeleteCustomer", new { CusId = item.CusId })
</td>

查看页面的控制器代码

[HttpPost]
public ActionResult ViewCutomerData(string Name)
{
    var data = from c in cus.CusModelData
                where c.Name.Contains(Name)
                select c;

    return View(data.ToList());
}

现在我正在使用这样的内部视图页面

查看客户数据详情

@(Html.Partial("DetailedData")

但它再次在视图页面中显示表格数据。但我只想在单击“详细信息”链接后显示它。

Answer 1

点击链接后我会使用 ajax 调用：

1. 用户点击链接

2. ajax调用被执行：

   .get("/Details/DetailedData",{"CusId" : requestedId}, function (data) {
       $("#your-detail-container").html(data);
   });
   

这一行：

$("#your-detail-container").html(data);

将使用视图 (html) 填充您的详细信息容器。

如果DetailedData 操作返回PartialView 会更好，而不是View 类似：

public ActionResult DetailedData(int CusId)
{
    var data = from c in cus.CusModelData
            where c.CusId == CusId
            select c;

    return PartialView(data.ToList());
}

回答您的 cmets：

我建议使用

@Ajax.ActionLink 

改为

@Html.ActionLink

或者只使用锚标签。 替换

@(Html.Partial("DetailedData")) with <div id="detailed-data-container"></div>

然后用 get response 填充这个容器：

$(document).on("click",".detailsLink", function () {
        .get("/Details/DetailedData",{"CusId" : requestedId}, function (data) {
            $("#detailed-data-container").html(data);
        });
 });