回到目錄

對于Bootstrap的彈層，插件有很多，今天主要用的是它自帶的功能，通過bootstrap提供的模式窗口來實現(xiàn)的，而大叔主要對使用方法進行了封裝，開發(fā)人員可以自己動態(tài)傳入彈層的ＨＴＭＬ內(nèi)容，可以控制按鈕的顯示與隱藏，用戶通過ＭＶＣ擴展方法對彈層進行生成，然后使用A標簽進行調(diào)用．

具體使用很簡單

@Html.GenerateDialog("測試",true, @<div><form action="/home/index">hello world!</form> </div>) <a data-toggle='modal' data-target='#LindModal'>測試彈層</a>

上面代碼分為兩塊，第一塊ＭＶＣ擴展方法，主要用于在頁面上輸出彈層的代碼段，第二段是Ａ標簽的調(diào)用，主要用于綁定上面的彈層控件．

下面主要看一下彈層的擴展方法，它使用了Func<string, HelperResult>這個委托，用來接收前臺的HTML代碼段，這對于開發(fā)人員是個福音，你不用關(guān)心如何去拼接ＨＴＭＬ代碼了，而是直接把前臺給我們的代碼復(fù)制過來即可．

彈層方法

#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'>關(guān)閉</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

而運行的效果是我們可以想到的

感謝咱們的閱讀！

回到目錄

轉(zhuǎn)載于:https://www.cnblogs.com/lori/p/5684708.html

總結(jié)

以上是生活随笔為你收集整理的Bootstrap~大叔封装的弹层的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。