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

本文关键字:更新 WebGrid DropDown Ajax MVC | 更新日期: 2023-09-27 18:06:53

我是MVC的新手,刚刚遇到一个场景,我需要一些帮助。我正在创建一个网站在ASP。净,c#。. NET使用MVC所以根据我的要求,我有两个下拉框,这是<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的内容将根据选择上述任何一个下拉菜单而改变。

我的代码改变了:<<strong>视图/strong>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杂志

更新:- 我已经部分回答了我的问题,如何更新WebGrid上的下拉选择更改通过Ajax在MVC 4

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

最后我通过使用局部视图解决了这个问题。现在我填满它很简单。我实现的步骤如下:

    我已经创建了两个视图(MainView和_ MainView)
  1. _ MainView是一个局部视图,我把完整的WebGridWebGridModel绑定在一起。
  2. 现在在MainView中,我将部分视图(_ MainView)放入div标签中,并使用Model (@Html.Partial("_MainView", Model))
  3. 称为部分视图。
  4. 在Ajax调用中,我按照上面的问题对ActionResult进行了调用,并且在成功时,我使用返回的部分视图更新了div标记
  5. ActionResult,而不是返回完整的视图,我返回部分视图更新WebGrid (return PartialView("_MainView", responceObject);)。

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