Webgrid需要使用MVC中的新內容進行更新

對於MVC，JavaScript和jQuery，我仍然很陌生，請耐心等待。
我有一個webgrid包含不同的術語和他們的翻譯。術語列表取決於從網格上方的下拉列表中選擇的'VMID'。（或者至少應該是，如果它工作正常）。
最左邊的列有一個編輯鏈接，用於導出Boostrap模態的每個術語，其中填充了分配給所選ID中的所有值下拉列表。我需要網格中的術語也取決於從該列表中選擇的值。

目前我想的方法是這樣的（僅粘貼相關的問題位） -Webgrid需要使用MVC中的新內容進行更新

主視圖（模型參考，不包含強類型）：

<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遍歷每個術語並將它們分配給網格。這工作正常，所以我不需要在這裏發佈它（這有點長，因爲有一些特殊的列需要額外的工作才能設置）。
我們有將URL映射到控制器及其相應的行動，在這種情況下，路由配置文件：

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

我不熟悉使用Ajax，所以我可能用它完全錯誤的。
這種方法基於一些地方，我已閱讀將網格放在部分視圖中，所以這就是我在這裏所做的。
當我選擇一個新選項後，我可以看到Chrome的元素檢查器正在返回一個全新的網格，但該網格並未在現有網格上應用。同樣，我一直在尋找和嘗試，閱讀和試驗，我只是不知道爲什麼我的工作不起作用。

來源

2014-10-31 AbaddonVH

我將下拉列表移動到網格的局部視圖，將所有內容都包裝在Ajax表單中，刪除了「RepopGrid」JavaScript和控制器操作，併爲VMID的Index操作添加了一個參數。如果VMID爲空或空（當頁面首次加載或刷新時），它將使用默認的VMID生成模型。如果接收到有效的VMID，則使用該數字生成模型。

下面是這些新的代碼誰可能會尋找一個類似的解決方案（上次一樣，只有相關的部分）：

指數。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); 
     } 
    }

該模型的代碼並沒有改變，因爲這個問題最初是問。

來源

2014-11-12 16:52:53 AbaddonVH

Webgrid需要使用MVC中的新內容進行更新

回答

相關問題