Asp.net MVC 5 Ajax調用模態對話框

我是新來的asp.net MVC 5，我不知道如何使用Ajax調用具有局部視圖的模態？我曾嘗試過一些代碼，但模態並沒有顯示出來。任何身體幫助？這裏是我的代碼：Asp.net MVC 5 Ajax調用模態對話框

查看

<script> 
     @Scripts.Render("~/bundles/jqueryval") 

       // Create 
       $(".modalCreate").click(function (e) { 
      e.preventDefault(); 
      $.ajax({ 
       cache: false, 
       type: "GET", 
       url: '@Url.Action("Create","Category")', 
       success: function() { 
         $(this).attr('data-target', '#createCat'); 
         $(this).attr('data-toggle', 'modal'); 
        // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears 
        $('body').on('click', '.modal-close-btn', function() { 
         $('#createCat').modal('hide'); 
        }); 
        //clear modal cache, so that new content can be loaded 
        $('#createCat').on('hidden.bs.modal', function() { 
         $(this).removeData('bs.modal'); 
        }); 
        $('#CancelModal').on('click', function() { 
         return false; 
        }); 

        // Init JQuery Validation for view 
        $("form").removeData("validator"); 
        $("form").removeData("unobtrusiveValidation"); 
        $.validator.unobtrusive.parse("form"); 
       }, 
       error: function (xhr, ajaxOptions, thrownError) { 
        displayAjaxError(thrownError); 
       } 
      }); 
     }); 
     </script> 


<p> 

    @Html.ActionLink("Create Category ", "Create", "Category", 
     null, new { @class = "modalCreate btn btn-success" }) 
</p> 

<div id="createCat" class="modal fade" 
    tabindex="-1" role="dialog"> 
    <div class="modal-content"> 
    </div> 
</div>

這是我的控制器：

public ActionResult Create() 
    { 
     return PartialView("_Create"); 
    } 

    // POST: /Category/Create 
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598. 
    [HttpPost] 
    [ValidateAntiForgeryToken] 
    public ActionResult Create(CategoryCreateVM productcategory) 
    { 
     if (ModelState.IsValid) 
     { 
      ProductCategory cat = Mapper.Map<CategoryCreateVM, ProductCategory>(productcategory); 

      db.ProductCategories.Add(cat); 
      db.SaveChanges(); 
      TempData["Message"] = "New Category added sucessfully."; 
      ViewBag.Message = "New Category added sucessfully."; 
      return RedirectToAction("Index"); 
     } 

     return PartialView(productcategory); 
    }

和局部視圖：

<div class="modal-dialog"> 
    <div class="modal-body"> 
     <div class="modal-content"> 
      @using (Html.BeginForm("Create", "Category", FormMethod.Post)) 
      { 
} 

     </div> 
    </div> 
</div>

我使用自舉默認主題做。我嘗試在瀏覽器檢查中調試它不顯示任何錯誤。但我可以肯定它能夠找到我的部分觀點，但模態從未出現。我希望任何人都可以幫我檢查我的代碼。

來源

2016-01-21 Firion Redfield

如果我沒有理解好這個是這樣的： 1-添加莫代爾模板的Views->Shared->_Layout"<script>"部分蒙山特定ID爲模式的每一個部分，你要使用它的每一個，例如：

<!-- Modal start--> 
    <div class="modal fade" id="Modalid" role="dialog"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close"></button> 
        <h4 class="modal-title" id="ModalLabelid">Modal title</h4> 
       </div> 
       <div class="modal-body" id="ModalBodyid"></div> 
      </div> 
     </div> 
    </div> 
    <!--Modal End-->

2 - 然後在任何視圖中添加以下代碼，您要使用的模式：如果你想模式的負載體

<script> 
function functionname() { 
     $("#Modalid").modal(); 
     $("#ModalLabelid").html("YourTitle"); 
     $("#ModalBodyid").load("url of partial view or anything that you want show in modal body"); 
    } 
</script>

現在一些partialview，寫在.load的網址（）方法：

$("#ModalBodyid").load("/Controller/Action/");

，如果你的行動應該得到的參數，添加參數的名稱完全一樣在整個行動：

$("#ModalBodyid").load("/Controller/Action/" + NameOfParameterinAction);

終於用你的腳本，你應該叫functionname()每一個地方，你從任何瀏覽:)需要

來源

2016-08-26 17:21:04 Diba

Asp.net MVC 5 Ajax調用模態對話框

回答

相關問題