在Asp.net MVC 使用bootstrap 的modal dialog 实现Popup
2015-01-31 01:17
417 查看
web应用经常需要弹出modal dialog,此例说明如何使用bootstrap提供的dialog,可以满足大部分场景。
1. 安装nuget
2. 完成以下代码:
Home Controller :
View Model :
Index.cshtml :
3. 查看结果:
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 使用signalR +bootstrap 实现 progressBar
- ASP.NET MVC 使用总结(二)——扩展HtmlHelper实现动态生成title及meta
- 使用 ExtJS 实现 ASP.NET MVC 2 客户端验证
- Asp.net MVC中使用Razor Generator实现View的单元测试
- Asp.Net Mvc 使用jQuery实现Ajax文件上传
- ASP.NET MVC使用Filter实现页面验证与授权
- 在ASP.NET MVC中使用Juqery实现页面局部刷新
- ASP.NET MVC 3 使用 DotNetOpenAuth 实现SSO
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
- 在Asp.net MVC使用thickbox实现调用页面的Ajax更新
- 使用 ExtJS 实现 ASP.NET MVC 2 客户端验证
- 【EntityFramework系列教程三,翻译】在ASP.NET MVC程序中使用EntityFramework对数据进行排序、过滤筛选以及实现分页
- 使用PureMVC实现ASP.NET的MVC结构开发
- [原]ASP.NET MVC 3 使用 DotNetOpenAuth 实现SSO
- 我要学ASP.NET MVC 3.0(十九): MVC 3.0 实例之使用开源控件实现表格排序和分页
- Asp.net MVC使用JQuery Validate实现用户名重名查询
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能