通過在MVC中的Ajax更新WebGrid和DropDown 4

Question

我對MVC很新，剛剛遇到了一個需要一些幫助的場景。我在ASP.NET中創建一個網站，使用MVC 4創建C＃.NET。根據我的要求，我在我的cshtml頁面有兩個DropDowns，它們是<select>標記。

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內容將根據上述任何一個下拉列表的選擇而改變。

我的代碼更改： VIEW 的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

更新： - 我已經部分回答了我關於如何通過Ajax在MVC 4更新的WebGrid上下拉選擇變化問題

Answer 1

Finlay我已通過使用部分視圖解決了此問題。現在我填寫它非常簡單。我怎麼實現的步驟如下提到：

1. 我已經創建了兩個視圖（MainView和_ MainView）
2. _ MainView是我把完整的WebGrid的局部視圖和WebGrid我與Model綁定。
3. 現在，在MainView我置於partialview（_ MainView）插入div標籤和如上和關於在我的問題描述調用Model（@Html.Partial("_MainView", Model)）的局部視圖
4. 在Ajax調用我提出的呼叫到ActionResult成功我使用返回的部分視圖更新了div標記
5. 從ActionResult而不是返回完整視圖我返回了部分視圖以僅更新WebGrid（return PartialView("_MainView", responceObject);）。

我有一個正在運行的示例應用程序。如果有人發現任何困難得到這個答案，然後可以問我。我可以在這裏分享完整的工作代碼。感謝所有特別是Karthik迴應我的問題和所有我的意見:)