ASP .NET MVC 5 +フォームPOSTによるブートストラップモーダル

Question

ASP .NET MVC 5 Webアプリケーションでポストブートストラップモーダルに問題があります。 私はモーダルのための部分的なビューを使用しています：

@model Presentation.APP.MyAPP.Portal.Models.DocumentAndFilesManager.AddDocumentTypeModel 

<script> 
    $(document).ready(function() { 
     $("#addDocumentTypeModal").on("submit", "#form-adddocumenttype-appt", function (e) { 
      e.preventDefault(); // prevent standard form submission 

      var form = $(this); 
      $.ajax({ 
       url: form.attr("action"), 
       method: form.attr("method"), // post 
       data: form.serialize(), 
       success: function (partialResult) { 
        $('#addDocumentTypeModal').modal('toggle'); 
        $("#form-container").html(partialResult); 
       } 
      }); 
     }); 
    }); 
</script> 

<div class="modal fade" id="addDocumentTypeModal" role="dialog"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
       <h3 class="modal-title" id="addDocumentTypeModalLabel">Add document type</h3> 
      </div> 

      @using (Html.BeginForm("AddDocumentType", "WebManager", FormMethod.Post, new { id = "form-adddocumenttype-appt" })) 
      { 
       <div class="modal-body" id="form-container"> 
        <div class="row"> 
         <div class="col-sm-12"> 
          Input unique NAME and unique REFERENCE NUMBER of new Document. 
         </div> 
        </div> 

        <div class="row"> 

         <br /> 

         @Html.ValidationSummary(true, "", new { @class = "text-danger" }) 

         <div class="form-group"> 
          @Html.LabelFor(m => m.DocumentTypeTitle, new { @class = "col-sm-12 control-label" }) 
          <div class="col-sm-8"> 
           @Html.TextBoxFor(m => m.DocumentTypeTitle, new { @class = "form-control" }) 
           @Html.ValidationMessageFor(m => m.DocumentTypeTitle, "", new { @class = "text-danger" }) 
          </div> 
         </div> 

         <div class="form-group"> 
          @Html.LabelFor(m => m.DocumentTypeReferenceNumber, new { @class = "col-sm-12 control-label" }) 
          <div class="col-sm-8"> 
           @Html.TextBoxFor(m => m.DocumentTypeReferenceNumber, new { @class = "form-control" }) 
           @Html.ValidationMessageFor(m => m.DocumentTypeReferenceNumber, "", new { @class = "text-danger" }) 
          </div> 
         </div> 

         <div class="modal-footer"> 
          <button type="submit" class="btn btn-success">Add</button> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
         </div> 
        </div> 
       </div> 
      } 
     </div> 
    </div> 
</div> 

その後、私は部分的なビューがレンダリングされる親ビューがあります。

<div id="form-container"> 
@Html.Partial("_AddDocumentTypeModal") 
</div> 

そして最後に、私のcontrolerアクションメソッド：

[HttpPost] 
    public ActionResult AddDocumentType(AddDocumentTypeModel model) { 
     if (ModelState.IsValid) { 
      if (!documentManagementFacade.AddDocumentType(model.DocumentTypeReferenceNumber, model.DocumentTypeTitle)) { 
       ModelState.AddModelError("", "Document type with this title and/or reference number already exists!"); 
      } 
      else 
      { 
       return Json(new { success = true }); 
      } 
     } 

     return PartialView("_AddDocumentTypeModal", model); 
    } 

検証をフォームはうまく動作しますが、ポスト後にモーダルに問題があります。POSTが成功した後でも、エラーのあるポストの後でもモーダルが存在します。 掲示板の投稿後に投稿を投稿した後に、エラー/非表示のモーダルを表示するにはどうすればよいですか？

多くのありがとうございます。

Answer 1

$.ajax({ 
url: form.attr("action"), 
method: form.attr("method"), // post 
data: form.serialize(), 
success: function (partialResult) { 
     $('#addDocumentTypeModal').modal('hide'); 
     $('#addDocumentTypeModal').find("#errorMsg").hide(); 
     $("#form-container").html(partialResult); 

    } 
error:function (error) { 
     $('#addDocumentTypeModal').find("#errorMsg").html(error).show(); 
    } 

}）;モーダル閉じている - モーダル身体の内側

は、エラーのdiv今成功したコールの後にその作業が

<div class="modal-body" id="form-container"> 
    <div class="alert alert-danger" id="errorMsg" style="display:none" >Oops! Some error.....</div> 
    .... 
    .... 
</div>