当前位置：首页 > news >正文

在Asp.net MVC 使用bootstrap 的modal dialog 实现Popup

news 来源：原创 2024/5/6 20:17:25

web应用经常需要弹出modal dialog，此例说明如何使用bootstrap提供的dialog，可以满足大部分场景。

1. 安装nuget

2. 完成以下代码：

Home Controller :

 public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public ActionResult Index(HomeVm vm)
        {
            TempData["Message"] = string.Format("Submitted : Name : {0} ,Age: {1}", vm.Name, vm.Age);
            return Index();
        }

View Model :

 public class HomeVm
    {
        [Required]
        public string Name { get; set; }


        [Required]
        [Range(0, 150)]
        public string Age { get; set; }
    }

Index.cshtml :

@model WebApplication1.Controllers.HomeVm
<input type="button" data-toggle="modal"
       data-target="#popup_id" value="click"/>


<div>
    @TempData["Message"]
</div>


<div class="modal fade" id="popup_id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content text-left">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Title</h4>
                
            </div>
            <form action="@Url.Action("Index")" method="POST">
                <div class="modal-body">
                    Here is body
                </div>
                <div class="modal-footer">
                    <div style="display: inline-block">
                        <div>
                            @Html.TextBoxFor(m => m.Name)
                        </div>
                        <div>
                            @Html.TextBoxFor(m => m.Age)
                        </div>                      
                        <input type="submit" value="Submit" />
                    </div>
                    <div style="display: inline-block">
                        <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </form>
           


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

3. 查看结果：