如何在ASP.Net mvc3 Razor中渲染部分页面

Question

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

部分页面的控制器代码

//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”）

但它再次在View页面中显示表数据。但是我想在单击“Details”链接后显示它。

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会更好，而不是查看类似的内容：

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

    return PartialView(data.ToList());
}

回答您的意见：

我建议使用

@Ajax.ActionLink 

代替

@Html.ActionLink

或者只使用锚标记。 替换

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

并用这样的get响应填充此容器：

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