Bootstrap~二伯封装的弹层

回来目录

对于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

而运作的功力是我们得以想到的

图片 1

谢谢我们的读书!

回来目录

相关文章