Question

我使用mvc 4并尝试让我的Web应用程序更具动态性。目前我尝试在部分视图中拆分一些视图，以便代码获得更好的可读性，并且我可以更好地重用应用程序的某些部分。所以现在这引出了一个问题。我有一个类似于这个的观点：

<h1>Manage department</h1>
<div id="EmployeesManagement">@Html.Action("OpenEmployeesManagement")</div>
<div id="DepartmentManagement">@Html.Action("OpenDepartmentManagement")</div>
<div id="DepartmentTumorModels">@Html.Action("OpenDepartmentModels")</div>

其中每一个都是从控制器调用的部分视图，如：

public PartialViewResult OpenDepartmentModels()
{
    ViewBag.ChangeVisibility = -1;
    HoDManagementModel hoDManagementModel = new HoDManagementModel { UserWithRoleModelList = azaraUserManagement.GetAllEmployesOfHoD(user.getUserId()), OrganisationUnits = azaraUserManagement.GetAllOrganisationUnitsFromHoD(user.getUserId()) };
    List<ModelWithOrganisationUnit> Models = ModelManagement.SearchModelsOfDepartment(hoDManagementModel.OrganisationUnits);
    return PartialView("DepartmentModels", Models);
}

现在我的问题。我有一个像这样的部分观点：

@model List<Modelle.Models.BusinessTierObjects.Models.ModelWithOrganisationUnit>
<fieldset>
    <legend>Manage the models of your department</legend>
        <table class="tablesorter">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name </th>
                    <th>Department </th>
                    <th>Visibility</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in @Model)
                {
                    <tr>
                        <td>@item.ModelId</td>
                        <td>@Html.ActionLink((String)item.ModelName, "Details", "Details", new { id = item.ModelId }, null)</td>
                        <td>@item.OrganisationUnitName</td>
                        @if (ViewBag.ChangeVisibility == item.ModelId)
                        {
                        <td><select name="ChangeVisibility" id="ChangeVisibility">
                        <option value="Department" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new {tumorModelId = item.ModelId, Visibility = 0})'">Department</option>
                       option value="Coop" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new { ModelId = item.ModelId, Visibility = 2 })'">Coop</option>
                        <option value="WWW" onclick="location.href='@Url.Action("ChangeVisibility", "ManageDepartment", new { ModelId = item.ModelId, Visibility = 3 })'">WWW</option>
</select></td>
                        }
                        else{
                            switch ((byte)item.Visibility)
                            {
                                case 0: <td>Department</td>; break;
                                case 2: <td>Coop</td>; break;
                                case 3: <td>WWW</td>; break;
                            }
                        }
                        <td><button name="button" class="button" onclick="location.href='@Url.Action("RequestChangeVisibility", "ManageDepartment", new { change = @item.ModelId })'">Change Visibility</button>
</td>
                    </tr>}
</fieldset>

如果我点击最后一个按钮，则应重新加载局部视图。但相反，应用程序只显示浏览器中没有任何布局的局部视图。我做错了什么或者不可能解决我的问题？按钮的控制器操作是：

public PartialViewResult RequestChangeVisibility(int change)
        {
            ViewBag.ChangeVisibility = change;
            HoDManagementModel hoDManagementModel = new HoDManagementModel { UserWithRoleModelList = azaraUserManagement.GetAllEmployesOfHoD(user.getUserId()), OrganisationUnits = azaraUserManagement.GetAllOrganisationUnitsFromHoD(user.getUserId()) };
            List<ModelWithOrganisationUnit>  Models = ModelManagement.SearchModelsOfDepartment(hoDManagementModel.OrganisationUnits);
            return PartialView("DepartmentModels", Models);
        }

Answer 1

发生这种情况的原因是因为您正在使用：

onclick="location.href='@Url.Action("RequestChangeVisibility", "ManageDepartment", new { change = @item.ModelId })'"

这会将整个页面刷新为部分视图结果，因此您只能看到该部分视图。

您需要做的是对该控制器进行ajax调用，因此您应该使用：

<td><button name="button" class="button" onclick="RequestChangeVisibilityAjaxCall(@item.ModelId)">Change Visibility</button>

然后将以下javascript添加到页面中：

 <script>
    function RequestChangeVisibilityAjaxCall(change) {
        $.ajax({
            url: "../ManageDepartment/RequestChangeVisibility?Change=" + change,
            type: 'GET',
            success: function (data) {
                $('#DepartmentManagement').html(data);
            }
        });
    }
</script>

该行：

$('#DepartmentManagement').html(data);

将使用ajax调用（数据）的结果用ID DepartmentManagement填充div - 我不确定你想要部分视图去哪里，所以只需将ID更改为你需要的ID。

另外，该行：

url: "../ManageDepartment/RequestChangeVisibility?Change=" + change,

是控制器的网址，我想我猜错了，但你应该把它改成正确的地址。

我希望这会有所帮助。

马丁

[编辑]一个好的教程here: 此外，做一些谷歌搜索“mvc jquery ajax”，也应该帮助你理解它。比我能解释得好多了！ :)

在局部视图中使用按钮重新加载局部视图

1 个答案: