Webgrid 需要使用 MVC 中的新内容进行更新

Question

我对 MVC、JavaScript 和 jQuery 还很陌生，所以请多多包涵。
我有一个包含不同术语及其翻译的 webgrid。术语列表取决于从网格上方的下拉列表中选择的“VMID”。 （或者至少会是，如果它工作正常的话。）
最左边的列有一个编辑链接，每个术语都指向一个 Boostrap 模式，其中填充了分配给该下拉列表中选择的 ID 的所有值。我需要网格中的术语也取决于从该列表中选择的值。

我目前正在尝试的方法是这样的（仅粘贴与问题相关的位）-

主视图（带有模型参考的强类型，不包括在内）：

<div class="container-fluid">
    <div style=" margin-bottom: 1.4%;">
        <table>
            <tr>
                <td style="font-size: medium; margin-bottom: 5px">
                    @Model.lblVMID: &nbsp; &nbsp;
                </td>
                <td>
                        @Html.DropDownListFor(model => model.VMID, new System.Web.Mvc.SelectList(Model.locations, "Key", "Value"), new { @class = "form-control", id = "ddlVMID", onchange = "RepopGrid()" })
                </td>
            </tr>
        </table>
    </div>
    <div class="table-scrollable well" id="termGrid">
        @{Html.RenderPartial("_TermGrid", Model);}
    </div>
</div>

<script type="text/javascript">
    function RepopGrid() {
        VMID = $("#ddlVMID").val();
        ShowLoadingDialog();
        $.ajax({
            url: URLPrefix() + "/Terminology/RepopGrid/" + VMID,
            type: "POST",
            success: function () {
                HideLoadingDialog();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                HideLoadingDialog();
                ShowAlert(false, 'Failed to change location\r\n' + errorThrown);
            }
        })
    }
</script>

部分视图（使用模型参考进行强类型化，不包括在内。与主视图使用的模型相同）：

@Model.grid.GetHtml(columns: Model.columns, alternatingRowStyle: "info", nextText: "Next",
                           previousText: "Previous", tableStyle: "table")

控制器：

public ActionResult Index()
{
    TerminologyModel model = new TerminologyModel(clsUtils.PreferredVMID());
    return View(model);
}

[HttpPost]
public ActionResult RepopGrid(int VMID)
{
     TerminologyModel model = new TerminologyModel(VMID);
     return PartialView("_TermGrid", model);
}

模型接受一个“int VMID”并使用它从数据库中检索术语列表，然后一个 foreach 遍历每个术语并将它们分配给网格。这很好用，所以我觉得没有必要在这里发布（有点长，因为有一些特殊的列需要额外的工作才能设置）。
我们有一个路由配置文件，它将 URLS 映射到它们在控制器中的相应操作，在这种情况下：

routes.MapRoute(
     name: "TerminologyRepopGrid",
     url: "Terminology/{action}/{VMID}",
     defaults: new { controller = "Terminology", action = "RepopGrid", VMID = UrlParameter.Optional }
);

我不熟悉 Ajax，所以我可能完全错误地使用它。
这种方法基于我读过的一些地方，将网格放在局部视图中，所以这就是我在这里所做的。
在我选择一个新选项后，我可以看到 Chrome 的元素检查器中返回了一个全新的网格，但该网格并未应用到现有网格之上。 同样，我一直在搜索、尝试、阅读和试验，但我就是不知道为什么我的不起作用。

Answer 1

我将下拉列表移动到网格所在的局部视图，将所有内容包装在 Ajax 表单中，删除“RepopGrid”JavaScript 和控制器操作，并为 VMID 的索引操作添加一个参数。如果 VMID 为 null 或空（首次加载或刷新页面时），则使用默认 VMID 生成模型。如果接收到有效的 VMID，则它使用该编号来生成模型。

以下是那些可能正在寻找类似解决方案的人的新代码（就像上次一样，只有相关部分）：

索引.cshtml -

   <div class="table-scrollable well" id="termGrid">
        @Html.Partial("_TermGrid", Model)
    </div>

<div class="modal fade" id="editTerm" tabindex="-1" role="dialog" aria-labelledby="editTerm-label" aria-hidden="true">
    <div class="modal-dialog" style="width: 290px">
        <div class="modal-content" style="width: 290px">
            <div class="modal-header" style="border-bottom: none; padding-bottom: 0px;">
                <h4 id="lblParamName" align="center"></h4>
            </div>
            <div class="modal-body" id="editTermBody" style="padding: 8px">
            </div>
        </div>
    </div>
</div>

局部视图 -

@{
    var ajaxOptions = new AjaxOptions()
    {
        OnSuccess = "OnSuccess",
        OnFailure = "OnFailure",
        OnBegin = "OnBegin",
        HttpMethod = "Post"
    };

    using (Ajax.BeginForm("Index", "Terminology", ajaxOptions))
    {

        <div class="container-fluid" id="termGrid">
            <div style=" margin-bottom: 1.4%;">
                <table>
                    <tr>
                        <td style="font-size: medium; margin-bottom: 5px">
                            @Model.lblVMID<label>: &nbsp; &nbsp;</label>
                        </td>
                        <td>
                            @Html.DropDownListFor(model => model.VMID, new System.Web.Mvc.SelectList(Model.locations, "Key", "Value"), new { @class = "form-control", id = "ddlVMID", onchange = "this.form.submit()" })
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    }
}

            @Model.grid.GetHtml(columns: Model.columns, alternatingRowStyle: "info", nextText: "Next",
                           previousText: "Previous", tableStyle: "table")

<script type="text/javascript">

    function OnSuccess(data, textStatus, jqXHR) {
        HideLoadingDialog();
    }

    function OnFailure(data, textStatus, jqXHR) {
        HideLoadingDialog();
        ShowAlert(false, "Oops! Something went wrong. :(");
    }

    function OnBegin() {
        ShowLoadingDialog();
        VMID = $("#ddlVMID").val()
        ShowLoadingDialog();
        $.ajax({
            url: URLPrefix() + "/Terminology/Index/" + VMID,
            type: "POST",
            success: function () {
                HideLoadingDialog();
            },
            error: function (jqXHR, textStatus, errorThrown) {
                HideLoadingDialog();
                ShowAlert(false, 'Failed to change location\r\n' + errorThrown);
            }
        })
    }

</script>

控制器 -

    public ActionResult Index(string VMID)
    {
        if (string.IsNullOrEmpty(VMID))
        {
            TerminologyModel model = new TerminologyModel(clsUtils.PreferredVMID());
            return View(model);
        }
        else
        {
            TerminologyModel model = new TerminologyModel(int.Parse(VMID));
            return View(model);
        }
    }

自最初提出问题以来，模型的代码没有更改。