Question

我遇到了MVC4应用程序的问题我有一个视图，它有两个局部视图。我的主要观点是在弹出窗口内打开。我的屏幕在弹出窗口中成功打开了2个局部视图。

我视图的上半部分包含数据输入/编辑（部分视图），底部显示（部分视图）。

显示部分局部视图包含网格和eac超链接（编辑和删除）。当用户点击编辑时，应用程序应该在同一页面内加载输入/编辑视图。

我的应用程序应在同一窗口加载输入/编辑部分视图。

请建议如何实现这一目标。请参阅我在显示视图上使用的以下代码。

----------------------------------------------- -----------第一部分观点---

@model IEnumerable<Peabody.LMS.WebApp.ViewModels.AUTenement.TenementTypeLookupViewModel>
<div id="gridContent">
@{
    var grid = new WebGrid(Model, defaultSort: "TypeCode", rowsPerPage: 10, ajaxUpdateContainerId: "gridContent");
}

@grid.GetHtml(tableStyle: "table",mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Previous", 
    nextText: "Next >",
    lastText: "Last >>",
    footerStyle: "foot-grid",
    columns:
    grid.Columns(
        grid.Column("TypeCode",header:"TenementType Code"),
        grid.Column("TypeDescription", header: "Tenement Description"),
        grid.Column("Country", header: "Country"),
        grid.Column("State", header: "State"),
        grid.Column("LastModifiedBy", header: "Last Modified By"),
        grid.Column("LastModifiedOn", header: "Modified On"),


        grid.Column("Actions", "",@<a href='/TenementTypeLookup/LoadHeaderEdit/@item.TypeCode' ><img src="~/Images/edit-icon.png" alt='Edit' /></a>, style: "width:auto"),
        grid.Column("", "",@<a href='/TenementTypeLookup/Delete/@item.TypeCode' ><img src="~/Images/Delete-icon.png" alt='Edit' /></a>, style: "width:auto")


   ))
    </div>

------------------------------

Answer 1

我发现的最好方法是使用ajax调用加载partial。

$(document).on('click', '.btnDisplay', function(){
    $.ajax({
        type: "POST",
        url: '@Url.Action("Action", "Controller")',
        data: {
            Field1: 'field1',
            Field2: 'field2'
        }
        success: function (result) {
            $('.targetDiv').html(result);
        }
});

然后在您的控制器上

[HttpPost]
public PartialViewResult Action(string Field1, string Field2){
    var model = //populate model from database
    return PartialView("_PartialName", model);
}

所以ajax调用将调用控制器并传递你想要的任何参数。然后，您可以构建模型并返回局部视图。在ajax调用的成功中，它将获取返回的局部视图并将它们放入任何你的目标（在这种情况下为类的.targetDiv的div）

Asp.net MVC4局部视图加载弹出内部

1 个答案: