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表单中，删除了＆＃34; RepopGrid＆＃34; JavaScript和控制器操作，并为VMID的Index操作添加了参数。如果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>

部分视图 -

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

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

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

1 个答案: