在ASP.NETMVC中创建带 Bootstrap 的模态

kcrjzv8t  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(223)

我正在ASP.NET MVC项目上使用. NET框架4.5, Bootstrap v3.3.6。
我想做的是创建一个模态表单

    • 我尝试了以下操作:**

1.在主布局中创建模态容器

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

1.添加了js以进行内部Ajax调用,从而在局部视图中注入内容

$(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');
    });
});

1.已创建要在模式对话框中加载的局部视图

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

1.已创建用于返回部分视图和处理发布结果的操作

public ActionResult CreateModal()
{
    return PartialView("_CreateModal");
}

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

1.创建了一个操作链接以在单击时显示模态

@Html.ActionLink("Click me", "CreateModal", "Place", null, new { @class = "img-btn-addcontent modal-link", title = "Add Content" })`
    • 我的问题是我的模态看起来不像模态**

jtoj6r0c

jtoj6r0c1#

只需将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>

`
然后通过以下方式调用Your modal:

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

也要记得把你的部分观点插入你的模态身体。

mkh04yzy

mkh04yzy2#

我的解决方案。您可以用cshtml编写此代码。步骤1:

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

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

第二步:

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

第三步:

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

相关问题