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中。