在ASP.NET MVC中使用Bootstrap创建模态框

Question

我正在使用.NET Framework 4.5和Bootstrap v3.3.6开发ASP.NET MVC项目。

我的需求是创建一个模态表单。

我尝试了以下方法：

1. Created a modal container in the main layout

   <div id="modal-container" class="modal fade" tabindex="-1" role="dialog" style="border: 5px solid #3A87AD;">
       <a href="#close" title="Close" class="modal-close-btn">x</a>
       <div class="modal-content" style="width:500px !important; margin: 10px auto !important;">
           <div class="modal-body"></div>
       </div>
   </div>
   

2. Added js to make internal Ajax call to inject content in a partial view

   $(function () {
       $('body').on('click', 'modal-link', function (e) {
           e.preventDefault();
           $(this).attr('data-target', '#modal-container');
           $(this).attr('data-toggle', 'modal');
       });
   
       $('body').on('click', 'modal-close-btn', function() {
           $('modal-container').modal('hide');
       });
   
       $('#modal-container').on('hidden.bs.modal', function(){
           $(this).removeData('bs.modal');
       });
   });
   

3. Created a partial view that to load in a modal dialog

   <div class=" ">
       <div class="modal-title" style="color: #3A87AD;">
           <h3> Add Content</h3>
       </div>
       <br />
       @using (Html.BeginForm("Create", "Place", FormMethod.Post))
       {
           <div class="row-fluid">
               Enter Content
           </div>
           <div class="row-fluid">
               @Html.textAreaFor(m => m.Text, new { style="width:400px; height:200px;"})
           </div>
           <div class="row-fluid">
               <div class="col-md-4 col-md-offset-4">
                   <button type="submit" id="btnSave" class="btn btn-sm">Save</button>
                   <button type="button" class="btn btn-sm" data-dismiss="modal">Cancel</button>
               </div>
           </div>
       }
   </div>
   <script type="text/javascript">
       $(function () {
           $('#btnSave').click(function () {
               $('#modal-container').modal('hide');
           });
       });
   </script>
   

4. Created action to return the partial view and to process the results of the post

   public ActionResult CreateModal()
   {
       return PartialView("_CreateModal");
   }
   
   [HttpPost]
   public ActionResult CreateModal(Place model)
   {
       return RedirectToAction("Index");
   }
   

5. Created an action link to show the modal when clicked

   @Html.ActionLink("Click me", "CreateModal", "Place", null, new { @class = "img-btn-addcontent modal-link", title = "Add Content" })`
   

我的问题是我的模态框看起来不像一个模态框。

- Gerald Hughes

---

你能否再确认一下它是否按照Bootstrap的示例（http://getbootstrap.com/javascript/#modals）引入了相关的CSS？ - Phil Cooper

你能发布一下关于在PartialView中使用Ajax调用的代码吗？ - Karthik M R

Answer 1

只需将bootstrap.min.js和bootstrap.css添加到您的绑定中，即可显示/隐藏模态框。 您的模态框主体应如下所示：

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Modal Header</h4>
  </div>
  <div class="modal-body">
    @Html.Partial("My partial View")
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  </div>
</div>

然后你可以通过以下方式调用你的模态框：

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

还要记得将您的部分视图插入您的模态框主体中。

- joint_ops

Answer 2

我的解决方案。您可以在cshtml中编写此代码。 步骤1：

 <script type="text/javascript">
    function ShowModal() {

        $("#exampleModal").modal('show');
    }
</script>

步骤2：

 <button type="button" class="btn btn-sm btn-default" onclick="ShowModal()">Show modal</button>

Step3：

第三步：

    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

- Ramazan Timur