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调用模态对话框

回答

相关问题