在Asp.net MVC 使用bootstrap 的modal dialog 實現Popup

標籤：

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. 查看結果：

在Asp.net MVC 使用bootstrap 的modal dialog 實現Popup