如何在从单独的局部视图模式提交时刷新主索引页面上的局部视图

Question

我有一个主索引页面，它加载包含下拉列表的部分视图。从 ddl 中选择项目会在单独的局部视图中填充控件以进行显示。单击 Edit 会弹出一个模型，其中 EditorFor 控件的 Form 绑定到所选项目的模型属性。单击模式的提交按钮时。它发回用于更新到数据库的表单...此时我想基本上刷新包含下拉列表的部分视图，以便它反映更改是适当的。

除了刷新包含控件下拉列表的局部视图之外，我执行的所有基本机制都没有问题。我可以为索引页面执行重定向操作并刷新整个页面，但我更愿意只刷新部分视图。我不知道如何做到这一点，想知道是否有人有建议。

索引页的代码div代码为：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<br />
<div class="partialContent" data-url="/Database/GetDatabases">
       @Html.Partial("_GetDatabases")
    </div>
<br />


<div class="modal fade" id="modalEditDBInfo" role="application" aria-labelledby="modalEditDBInfoLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modalEditDBInfoContent" style="background-color:white; border-radius:10px; box-shadow:10px;">
            @Html.Partial("_EditDatabaseInfo")
        </div>
    </div>
</div>

EditDatabase 局部视图的代码

@model Hybridinator.WebUI.Models.DatabaseModel
<br />
<br />

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="editModelTitle">Edit Database Info</h4>
</div>
@if(Model != null)
{ 
    using (Html.BeginForm("EditDatabaseInfo", "Database", FormMethod.Post, new { @class = "modal-form" }))
    {
        <div class="modal-body">
            @Html.HiddenFor(m => m.database_pk, new { htmlAttributes = new { @class = "form-control" } })
            <div class="form-group">
                <div id="databaselabel">@Html.LabelFor(m => m.database_name, "Database")</div>
                <div id="databaseedit">@Html.EditorFor(m => m.database_name, new { htmlAttributes = new { @class = "form-control" } })</div>
            </div>
            <div class="form-group">
                <div id="databaseserverlabel">@Html.LabelFor(m => m.database_server, "Database Server")</div>
                <div id="databaseserveredit">@Html.EditorFor(m => m.database_server, new { htmlAttributes = new { @class = "form-control" } })</div>
            </div>

            </div>

            <div class="form-group">
                <div id="editsqltypelabel">@Html.LabelFor(m => m.sql_type_pk, "Sql Type")</div>
                <div id="editsqltypeddl">@Html.DropDownListFor(m => m.sql_type_pk, Model.sqlTypes)</div>
            </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button class="btn btn-inverse btn-primary" type="submit">Save</button>
            </div>
    }       
}

GetDatabases 部分视图的代码

@model Hybridinator.WebUI.Models.DatabaseListModel
@if(Model != null)
{    
    <div id="databasedropdown" class="container-fluid">
        @Html.Label("Databases: ")@Html.DropDownListFor(m => m.database_pk, Model.databases, "Select one...", new { @id = "database_pk", onchange = "changeDatabase()" })  
    </div>
}

GetDatabases 的控制器代码

public ActionResult GetDatabases()
        {
            DatabaseListModel databaseListModel = new DatabaseListModel
            {
                databases = databaseService.GetUndeletedDatabaseList().
                    Select(d => new SelectListItem
                    {
                        Value = d.database_pk.ToString(),
                        Text = d.database_name
                    }).ToList()
            };
            return PartialView("_GetDatabases",databaseListModel);
        }

最后是 EditDatabase 模式的 Get 和 Post 代码

[HttpGet]
public ActionResult EditDatabaseInfo(int database_pk)
{
    DatabaseModel databaseModel = FillDatabaseModelByDatabasePK(database_pk);
    return PartialView("_EditDatabaseInfo", databaseModel);
}
[HttpPost]
public ActionResult EditDatabaseInfo(DatabaseModel databaseModel)
{
    string[] result = databaseService.Update(new Database
    {
        database_pk = databaseModel.database_pk,
        database_name = databaseModel.database_name,
        database_password = databaseModel.database_password,
        database_username = databaseModel.database_username,
        database_server = databaseModel.database_server,
        hist_database_name = databaseModel.hist_database_name,
        hist_database_server = databaseModel.hist_database_server,
        hist_database_password = databaseModel.hist_database_password,
        hist_database_username = databaseModel.hist_database_username,
        sqlType = new SQLType { sql_type_pk = databaseModel.sql_type_pk }
    });
    return RedirectToAction("GetDatabases");
}

正如我所说，在 Post EditDatabase 控制器方法中返回的 RedirectToAction("Index) 在紧要关头工作..但我真的不想刷新整个页面。我认为在返回时我可以做一些不同的事情在该方法上仅重新加载 GetDatabases 部分，但我无法弄清楚。任何帮助将不胜感激。

Answer 1

上面提到的卡尔提供了解决方案。但是因为他刚刚评论了我会在这里发布代码修改，所以如果有人正在寻找类似的问题，他们可以看到代码。

根据 Carl 的建议，我使用 Ajax.BeginForm 而不是 HTML.BeginForm，并且 IM 通过 onsuccess 处理程序更新部分视图控制器。

我在 EditDatabase 部分替换了这一行

     using (Html.BeginForm("EditDatabaseInfo", "Database", FormMethod.Post, new { @class = "modal-form" }))

有了这个

using (Ajax.BeginForm("EditDatabaseInfo", "Database", new AjaxOptions{
            InsertionMode = InsertionMode.Replace,
            HttpMethod = "POST",
            OnSuccess = "editDatabaseSuccess"        
        }, new { @id = "editDatabaseForm" }))

然后在我的脚本中，我为 editDatabaseSucess 创建了一个函数

<script type="text/javascript">
    function editDatabaseSuccess(data)
    {
        //alert(data);
        $('#modalEditDBInfo').modal('hide');
        loadDatabases();
    }
</script>

alert(data; 注释掉的行只是为了测试以确保函数被调用。 加载数据库（）；行调用我在页面加载时使用的函数来加载部分视图。

<script type="text/javascript">
    function loadDatabases()
    {
        $(".partialContent").each(function (index, item) {
            var url = $(item).data("url");
            if (url && url.length > 0) {
                $(item).load(url)
            }
        });
    }
</script>

现在完美运行。非常感谢 Carl 的回答。