webForm系列 前端框架快速引用

说明：该博客使用的方法我已经不再使用，只是还具有学习价值，所以暂不删除。

不再使用的原因是没有相关js引用，css引用，在VS中没有提示功能，太费力了，与之相比，复制一下其实还轻松一点，只是如果要换就比较麻烦，更新静态文件也不好刷新缓存，但是这个对我们公司的影响比较小。

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Html文件的缺点就是不能重用，MVC可以在_Layout.cshtml中将每个页面都需要的js和css文件（如jq,bootstrap等）都引用进去，webform就麻烦一点。

webForm需要给所以页面派生个父类BasePage,然后在BasePage中给每个页面的Header添加css和js文件。当然也可以用js的方法，如新建一个js文件，然后在里面写document.write("<script src='js地址'>")引用进去，但是缺点是每个页面还要配置js，比较麻烦，对一般后台来说，还是写在类里比较方便。

下面是添加动态js和css的代码。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Web.UI;
using System.Web.UI.HtmlControls;

namespace Utility.WebForm
{
    public class HtmlControl
    {
        /// <summary>
        /// 注册js
        /// </summary>
        /// <param name="page"></param>
        /// <param name="url"></param>
        public static void RegJs(Page page, string[] url)
        {
            foreach (var item in url)
            {
                HtmlGenericControl htmlGenericControl = new HtmlGenericControl();
                htmlGenericControl.TagName = "script";
                htmlGenericControl.Attributes.Add("type", "text/javascript");
                htmlGenericControl.Attributes.Add("src", item);
                page.Header.Controls.Add(htmlGenericControl);
            }
        }

        /// <summary>
        /// 注册Css
        /// </summary>
        /// <param name="page"></param>
        /// <param name="url"></param>
        public static void RegCss(Page page, string[] url)
        {
            foreach (var item in url)
            {
                HtmlLink htmlLink = new HtmlLink();
                htmlLink.Href = item;
                htmlLink.Attributes.Add("type", "text/css");
                htmlLink.Attributes.Add("rel", "Stylesheet");
                page.Header.Controls.Add(htmlLink);
            }
        }
    }
}

在webForm中调用时这样的，只需要配置css和js就好了

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Utility.WebForm
{
    /// <summary>
    /// 基本页面类的父类/// </summary>
    public class PageBase: System.Web.UI.Page
    {

        #region 静态资源地址
        public string[] Css{ get;set;}
        public string[] Js { get; set; }
        #endregion

        /// <summary>
        /// 页面初始化
        /// </summary>
        protected override void OnInit(EventArgs e)
        {
            #region 权限检测
            //。。。
            #endregion

            #region 设置公共页面样式
            HtmlControl.RegCss(this, Css);
            HtmlControl.RegJs(this, Js);
            #endregion
        }

        public PageBase()
        {
            Css = new string[]{
                "/Content/bootstrap/bootstrap.min.css",
                "/Content/bootstrap/bootstrap-responsive.min.css",
                "/Content/ligerUI/skins/Aqua/css/ligerui-all.css",
                "/content/comom/formcommon.css"
            };
            Js = new string[]{
                "/Content/Jquery/jquery-1.9.1.min.js",
                "/Content/bootstrap/bootstrap.min.js",
                "/Content/ligerUI/js/ligerui.min.js",
                "/Public/Js/My97DatePicker/WdatePicker.js",
                "/content/comom/formcom.js"
            };
        }

        //。。。其他代码。。。
    }
}
    

需要说明的地方：

HtmlGenericControl 类

只要我们在html标签上面加了runat,他就会生成一个htmlGenericControl类。

在 .aspx文件中我们将一个div定义成服务器控件

<div runat="server" id="div1" title="网站管理">

然后再 .aspx.designer.cs文件中会自动给我们加上这样的标签

        /// <summary>
        /// div1 控件。
        /// </summary>
        /// <remarks>
        /// 自动生成的字段。
        /// 若要进行修改，请将字段声明从设计器文件移到代码隐藏文件。
        /// </remarks>
        protected global::System.Web.UI.HtmlControls.HtmlGenericControl div1;

所以我们也可以手动定义htmlGenericControl然后将他添加到另一个服务器控件中，如header中。