在 ASP.NET MVC 中使用引导程序创建模态

Question

I'm using .NET Framework 4.5, Bootstrap v3.3.6 on a ASP.NET MVC project.

What I want to do is create a modal form

I tried the following:

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" })`

My problem is that my modal doesnt look like a modal

Answer 1

Simply add bootstrap.min.js and bootstrap.css to Your bundles for showing/hiding modal. Your modal body should look like this:

<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>

`

and then you call Your modal by:

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

Also remember to insert Your partial View into Your modal body.

Answer 2

My solution. You can write this code in cshtml. Step1:

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

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

Step2:

 <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>