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

我对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>

控制器：

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);
}

模型接受一个“intvmid”，并使用它从数据库中检索术语列表，然后foreach运行每个术语并将它们分配给网格。这很好，所以我不觉得有必要在这里发布它。它有点长，因为有一些特殊的专栏需要额外的工作来设置。 我们有一个路由配置文件，该文件将URL映射到控制器中相应的操作，在本例中：

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

我不熟悉Ajax，所以我可能完全错误地使用它。 这种方法基于我读过的一些地方，将网格放在局部视图中，这就是我在这里所做的。 在我选择了一个新选项之后，我可以看到Chrome的element inspector中返回了一个全新的网格，但该网格并没有应用到现有网格之上。

---

同样，我一直在搜索、尝试、阅读和实验，但我不明白为什么我的不起作用。

我将下拉列表移动到网格所在的局部视图，将所有内容包装在Ajax表单中，删除了RepopGrid JavaScript和控制器动作，并为VMID的索引动作添加了一个参数。如果首次加载或刷新页面时VMID为null或空，则它将使用默认VMID生成模型。如果收到有效的VMID，则它将使用该编号生成模型。 以下是新代码，适用于那些可能正在寻找类似于上次的解决方案的人，仅适用于相关部分： Index.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>

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

   <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);
        }
    }