c# - 在 MVC 4 中通过 Ajax 更新 WebGrid 和 DropDown

Question

我是 MVC 的新手，刚刚遇到一个需要帮助的场景。我正在使用 MVC 4 在 ASP.NET、C#.NET 中创建一个网站。所以根据我的要求，我有两个下拉菜单是<select>在我的标签 cshtml页。

1) selectUniversity
2) selectCollege

我有一个名为 College_table 的数据库表，其字段是:

1) Univ_ID
2) Univ_Name
3) College_ID
4) College_Name
5) College_Address
6) College_Contact

现在在我的 selectUniversity 上我列出了所有大学名称并在 selectCollege 中所有学院名称都属于在selectUniversity中选择的大学落下。并且 WebGrid 内容将根据上述任何下拉列表的选择而改变。

我的代码更改:查看Javascript:

<script type="text/javascript">
      function ajaxCallGetColleges() {
             var e = document.getElementById("selectUniversity");
             var strUniv = e.options[e.selectedIndex].value;
             $.ajax({
                  url: '@Url.Action("GetCollegesActionResult", "CollegeController")',
                  type: 'POST',
                  data: { 'data': strUniv },
                  success: function (ResponceObject) {
                       alert(ResponceObject);//Need to update this data into WebGrid and selectCollege dropdown.
                  }
             });
      }
      function ajaxCallGetCollegeDetail() {
             var e = document.getElementById("selectCollege");
             var strCollege = e.options[e.selectedIndex].value;
             $.ajax({
                  url: '@Url.Action("GetCollegeDetailActionResult", "CollegeController")',
                  type: 'POST',
                  data: { 'data': strCollege },
                  success: function (ResponceObject) {
                       alert(ResponceObject);//Need to update this data into WebGrid.
                  }
             });
      }
</script>

CSHTML 代码:

<table>

        <tr>
            <td>
                <select id="selectUniversity" name="selectUniversity" onchange="ajaxCallGetColleges()">
                    @{
                        //Logic for adding University names as options to the dropdown dynamically
                     }
                </select>
            </td>

            <td>
                <select id="searchBy" name="searchBy" onchange="ajaxCall()">
                   <select id="selectUniversity" name="selectUniversity" onchange="ajaxCallGetCollegeDetail()">
                    @{
                        //Logic for adding college names as options to the dropdown dynamically
                     }
                </select>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <div id="MyGrid">
                    @{
                        WebGrid grid = new WebGrid(source: Model,
                                       defaultSort: "Name",
                                       rowsPerPage: 15);
                        grid.SortDirection = SortDirection.Ascending;
                    }

                    @grid.GetHtml(
    fillEmptyRows: false,
    mode: WebGridPagerModes.All,
    firstText: "<< First",
    previousText: "< Prev",
    nextText: "Next >",
    lastText: "Last >>",
     columns: new[] {
        grid.Column("Univ_ID",header: "Univ ID", canSort: false),
        grid.Column("Univ_Name",header: "Univ Name"),
        grid.Column("College_ID",header: "College ID", canSort: true),
        grid.Column("College_Name",header: "College Name"),
        grid.Column("College_Address", header: "College Address", canSort: true),
        grid.Column("College_Contact",header: "Contact"),
        grid.Column("", header:"Edit", format: (item) => Html.ActionLink("Edit", "Edit", new { univ_ID=item.Univ_ID })),
        grid.Column("", header:"Delete", format: (item) => Html.ActionLink("Delete", "Delete", new { univ_ID=item.Univ_ID}, new { onclick="return confirm('Are you sure?');"}))
    })
                </div>
            </td>
        </tr>
    </table>

控制者C#.NET 代码:

public ActionResult SearchByBranchStatus(string data)
        {

            List<CollegesDetail> colleges= _collegeService.GetCollegesDetail();

            var RespObject = colleges.Where(c => c.Name == data);
            return View(RespObject);
        }
 public ActionResult GetCollegeDetailActionResult(string data)
        {
            List<CollegeDetail> colleges= _collegeService.GetCollegeDetail();

            var RespObject = colleges.Where(c => c.Name == data);
            return View(RespObject);
        }

我也浏览了许多 SO 和 MSDN 站点，但没有找到任何帮助。请给我提供任何引用或想法来解决这个问题。我知道与我的问题相关的是，许多论坛上都提出了很多问题，但我没有得到。可能是它最简单的一个，但是当我最近开始研究 MVC 4 时，我对 MVC 4 没有很好的了解。我急切地等待答案。任何帮助将不胜感激。提前致谢..

注意:- 目前我指的是 MSDN Magazine

更新:-我已经部分回答了我的问题，即如何在 MVC 4 中通过 Ajax 在 DropDown 选择更改时更新 WebGrid

Answer 1

Finlay 我已经通过使用局部 View 解决了这个问题。现在我填写它很简单。下面提到了我如何实现的步骤:

1. 我创建了两个 View (MainView 和 _MainView)
2. _MainView 是一个部分 View ，我将完整的 WebGrid 和我已与 Model 绑定(bind)的 WebGrid 放在其中>.
3. 现在在 MainView 中，我将部分 View (_MainView) 放入一个 div 标记中，并使用 Model(@Html.Partial("_MainView", Model))
4. 在 Ajax 调用中，我按照上面问题中的描述调用了 ActionResult，成功后我用返回的局部 View 更新了 div 标签
5. 从 ActionResult 而不是返回完整 View 我返回部分 View 来更新 WebGrid only(return PartialView("_MainView", responceObject); ).

我有一个正在运行的示例应用程序。如果有人发现获得此答案有任何困难，可以问我。我可以在这里分享完整的工作代码。感谢所有人，尤其是 Karthik 回答我的问题和我的所有评论:)