2015-07-11 90 views
0

我正在使用javascript在MVC4應用程序中創建一個jQuery模式對話框。但是在模態對話框中提交ajax表單時無法關閉對話框。關閉MVC4應用程序中的jQuery模式對話框

鏈接到創建的對話框:

@Html.RouteLink("Add item", 
         new 
         { 
          Action = "AddItem", 
          Controller = "User" 
         }, 
         new 
         { 
          @class = "openDialog", 
          data_dialog_id = "addItemDialog", 
          data_dialog_title = "Add item", 
          title = "Add item" 
         }) 

AddItem方法返回AJAX形式(下面的代碼)作爲partialview,這是模態對話框內呈現。 Ajax的使用,使得只有一個頁面的一部分是在提交更新:

@model WebApp.AppModels.UserAddItemModel 

@using (Ajax.BeginForm("AddItem", "User", null, new AjaxOptions() 
                 { 
                  HttpMethod = "POST", 
                  Url = Url.Action("AddItem", "User"), 
                  InsertionMode = InsertionMode.Replace, 
                  UpdateTargetId = "Item" 
                 }, new { id = "AddItemForm" })) 
{ 
     @Html.AntiForgeryToken() 
     @Html.ValidationSummary(true) 

     <fieldset> 
      <legend>Add Item</legend> 
      <ol> 
       <li> 
        @Html.LabelFor(m => m.ItemName) 
        @Html.TextBoxFor(m => m.ItemName) 
        @Html.ValidationMessageFor(m => m.ItemName) 
       </li> 
      </ol> 
       <input type="submit" class="left" value="Submit" name="action:submit-additem" /> 
       <input type="submit" class="right" value="Cancel" name="action:cancel-additem" /> 
     </fieldset> 
} 

提交表單調用的addItem操作方法,並如預期替換DIV內容。但我也希望表單在提交時關閉。任何建議都會很棒。

回答

2

添加這個參數在阿賈克斯開始形式

@model WebApp.AppModels.UserAddItemModel 

@using (Ajax.BeginForm("AddItem", "User", null, new AjaxOptions() 
                  { 
                   HttpMethod = "POST", 
                   Url = Url.Action("AddItem", "User"), 
                   InsertionMode = InsertionMode.Replace, 
           OnSuccess = "updateSuccess", 
                   UpdateTargetId = "Item" 
                  }, new { id = "AddItemForm" })) 
    { 
      @Html.AntiForgeryToken() 
      @Html.ValidationSummary(true) 

      <fieldset> 
       <legend>Add Item</legend> 
       <ol> 
        <li> 
         @Html.LabelFor(m => m.ItemName) 
         @Html.TextBoxFor(m => m.ItemName) 
         @Html.ValidationMessageFor(m => m.ItemName) 
        </li> 
       </ol> 
        <input type="submit" class="left" value="Submit" name="action:submit-additem" /> 
        <input type="submit" class="right" value="Cancel" name="action:cancel-additem" /> 
      </fieldset> 
    } 

    function updateSuccess() 
    { 
    // closing code goes here 
    } 
+0

真棒。那是缺失的環節。這篇文章幫助完成了updateSuccess方法:http://stackoverflow.com/a/4667858,即$(「#modalDialog」)。dialog(「close」); – Manish