Bootstrap被封装的弹层

时间:2021-05-28

对于Bootstrap的弹层,插件有很多,今天主要用的是它自带的功能,通过bootstrap提供的模式窗口来实现的,而小编主要对使用方法进行了封装,开发人员可以自己动态传入弹层的HTML内容,可以控制按钮的显示与隐藏,用户通过MVC扩展方法对弹层进行生成,然后使用A标签进行调用.

具体使用很简单

@Html.GenerateDialog("测试",true, @<div><form action="/home/index">hello world!</form></div>)<a data-toggle='modal' data-target='#LindModal'>测试弹层</a>

上面代码分为两块,第一块MVC扩展方法,主要用于在页面上输出弹层的代码段,第二段是A标签的调用,主要用于绑定上面的弹层控件.

下面主要看一下弹层的扩展方法,它使用了Func<string, HelperResult>这个委托,用来接收前台的HTML代码段,这对于开发人员是个福音,你不用关心如何去拼接HTML代码了,而是直接把前台给我们的代码复制过来即可.

弹层方法

#region Bootstrap弹层/// <summary>/// bootstrap风格的弹层/// </summary>/// <param name="htmlHelper"></param>/// <param name="isBtn"></param>/// <param name="result"></param>/// <returns></returns>public static MvcHtmlString GenerateDialog(this HtmlHelper htmlHelper, bool isBtn, Func<string, HelperResult> result){return GenerateDialog(htmlHelper, "详细", isBtn, result);}/// <summary>/// bootstrap风格的弹层/// </summary>/// <param name="htmlHelper"></param>/// <param name="title"></param>/// <param name="isBtn"></param>/// <param name="result"></param>/// <returns></returns>public static MvcHtmlString GenerateDialog(this HtmlHelper htmlHelper, string title, bool isBtn, Func<string, HelperResult> result){string templete = @"<div class='modal fade' id='LindModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'><div class='modal-dialog'><div class='modal-content'><div class='modal-header'><button type='button' class='close'data-dismiss='modal' aria-hidden='true'>&times;</button><h4 class='modal-title' id='myModalLabel'>"+title+@"</h4></div><div class='modal-body' id='dialogContent'>" + result.Invoke(null) + "</div>";if (isBtn){templete +=@"<div class='modal-footer'><button type='button' class='btn btn-warning'data-dismiss='modal'>关闭</button><button type='button' class='btn btn-primary' id='subBtn'>提交</button></div>";}templete +=@"</div></div></div><script>$('#subBtn').click(function(){$('#dialogContent form').submit();});</script>";return MvcHtmlString.Create(templete);}#endregion

而运行的效果是我们可以想到的

以上所述是小编给大家介绍的Bootstrap被封装的弹层,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章