ASP.Net MVC 引用動態 js 腳本

希望可以動態生成 js  發送給客戶端使用。

layout頁引用：

<script type="text/javascript" src="@Url.Action("Js","CommonConfig",new {version= OP.WebUI.Areas.Sys.Controllers.CommonConfigController.GetVersion()})"></script>

如果使用了 Nginx 反向代理，且代理的端口號不是80，下面的寫法可能會異常

<script type="text/javascript" src="@Url.Action("Js","CommonConfig",new {version= OP.WebUI.Areas.Sys.Controllers.CommonConfigController.GetVersion()},"http")"></script>

因為端口號可能會錯誤。比如它有可能映射成 域名:8080/xxx/xxx 而你的請求地址是 域名/xxx/xx。

當更新 js 內容的時候就修改 version 即可。

控制器：

我這里的例子是把數據和 一些 js 函數一並放到一起了。

    public class CommonConfigController : Core.ControllerBase
    {
        private static short version;
        private static object versionLocker = new object();
        private readonly Lazy<ICommonConfigService> commonConfigService;
        public CommonConfigController(Lazy<ICommonConfigService> commonConfigService)
        {
            this.commonConfigService = commonConfigService;
        }

        public ActionResult CommonConfig()
        {
            return View();
        }

        public ActionResult GetCommonConfigData(QueryModel queryModel)
        {
            var res = commonConfigService.Value.GetCommonConfigData(queryModel);

            return ReturnPageData(res);
        }

        public ActionResult AddConfig()
        {
            return View();
        }

        [HttpPost]
        public JsonResult DoAddConfig(Sys_CommonConfig config)
        {
            commonConfigService.Value.AddConfig(config);
            IncrVersion();
            return JsonManager.GetSuccess();
        }

        [HttpPost]
        public JsonResult DeleteConfig(string ids)
        {
            commonConfigService.Value.DeleteConfig(ids);
            IncrVersion();
            return JsonManager.GetSuccess();
        }

        public ContentResult Js(long version)
        {
            string data = $";debugger; var CC_DATA ={commonConfigService.Value.GetCommonConfigData(m => m.IsDelete == false).ToJson()};var CC_TAG = {{version:{version}}};";

            string func = @"; (function(){
            if (CC_DATA && CC_DATA.length > 0) {
                for (var i = 0; i < CC_DATA.length; i++) {
                    var item = CC_DATA[i];
                    var tag = item.Target;
                    if (!CC_TAG[tag]) CC_TAG[tag] = [];
                    CC_TAG[tag].push(item);
                }
            }})()".Replace("@version", version.ToString());

            string extend = @"
   ; !function ($) {
        
        $.fn.extend({
            ccSelect: function () {
                var $this = $(this);
                var tag = $this.attr(`cc-tag`);
                var value = $this.attr(`cc-val`);
                if (!tag) return;
                var data = CC_TAG[tag];
                if (!data || data.length === 0) return;

                let opts = ['<option></option>'];
                for (var i = 0, l = data.length; i < l; i++) {
                    if( value == data[i].Value || value == data[i].Name ){
                      opts.push('<option selected value=`' + data[i].Value + '`>' + data[i].Name + `</option>`)
                    }
                    else{
                     opts.push('<option value=`' + data[i].Value + '`>' + data[i].Name + `</option>`)
                    }
                }
                $this.html(opts.join(''));

                 if ($this.hasClass('chosen-select')) {
                     $this.chosen({
                     no_results_text: `未找到`,
                     allow_single_deselect: true,
                     search_contains: true
                })
                $this.trigger(`chosen:updated`);
                return  $this ;
                }
            }
        })
    }(jQuery)";

            Response.AddHeader("Cache-Control", "max-age=120"); //緩存
            Response.AddHeader("Last-Modified", DateTime.Now.ToString("U", DateTimeFormatInfo.InvariantInfo));
            return Content(data + func + extend, "application/javascript", Encoding.UTF8);
        }

        public static short GetVersion()
        {
            lock (versionLocker)
            {
                return version;
            }
        }
        public void IncrVersion()
        {
            lock (versionLocker)
                unchecked
                {
                    version++;
                }
        }
    }

生成的 js 效果：

;debugger; var CC_DATA =[{"Name":"測試","Value":"測試","Target":"頭程航班啟運地","IsDelete":false,"Remark":"14","Id":1,"CreateUserName":"朱皖蘇","CreateTime":"2019-09-18T14:31:59","UpdateUserName":"朱皖蘇","UpdateTime":"2019-09-18T14:31:59"},{"Name":"2","Value":"2","Target":"重派類型","IsDelete":false,"Remark":"1","Id":2,"CreateUserName":"朱皖蘇","CreateTime":"2019-09-18T15:36:14.74","UpdateUserName":"朱皖蘇","UpdateTime":"2019-09-18T15:36:14.74"},{"Name":"測試","Value":"2","Target":"清關地址","IsDelete":false,"Remark":"2","Id":3,"CreateUserName":"朱皖蘇","CreateTime":"2019-09-18T15:40:50.687","UpdateUserName":"朱皖蘇","UpdateTime":"2019-09-18T15:40:50.687"},{"Name":"測試","Value":"2","Target":"退回地址","IsDelete":false,"Remark":"4","Id":4,"CreateUserName":"朱皖蘇","CreateTime":"2019-09-18T15:43:42.077","UpdateUserName":"朱皖蘇","UpdateTime":"2019-09-18T15:43:42.077"},{"Name":"2","Value":"2","Target":"頭程航班啟運地","IsDelete":false,"Remark":"","Id":5,"CreateUserName":"朱皖蘇","CreateTime":"2019-09-18T15:48:54.93","UpdateUserName":"朱皖蘇","UpdateTime":"2019-09-18T15:48:54.93"},{"Name":"zws","Value":"2","Target":"重派類型","IsDelete":false,"Remark":"2","Id":6,"CreateUserName":"朱皖蘇","CreateTime":"2019-09-18T15:50:05.177","UpdateUserName":"朱皖蘇","UpdateTime":"2019-09-18T15:50:05.177"}];var CC_TAG = {version:0};; (function(){
            if (CC_DATA && CC_DATA.length > 0) {
                for (var i = 0; i < CC_DATA.length; i++) {
                    var item = CC_DATA[i];
                    var tag = item.Target;
                    if (!CC_TAG[tag]) CC_TAG[tag] = [];
                    CC_TAG[tag].push(item);
                }
            }})()
   ; !function ($) {
        $.fn.extend({
            ccSelect: function () {
                var $this = $(this);
                var tag = $this.attr(`cc-tag`);
                var value = $this.attr(`cc-val`);
                if (!tag) return;
                var data = CC_TAG[tag];
                if (!data || data.length === 0) return;

                let opts = ['<option></option>'];
                for (var i = 0, l = data.length; i < l; i++) {
                    if( value == data[i].Value || value == data[i].Name ){
                      opts.push('<option selected value=`' + data[i].Value + '`>' + data[i].Name + `</option>`)
                    }
                    else{
                     opts.push('<option value=`' + data[i].Value + '`>' + data[i].Name + `</option>`)
                    }
                }
                $this.html(opts.join(''));

                 if ($this.hasClass('chosen-select')) {
                     $this.chosen({
                     no_results_text: `未找到`,
                     allow_single_deselect: true,
                     search_contains: true
                })
                $this.trigger(`chosen:updated`);
                return  $this ;
                }
            }
        })
    }(jQuery)

可以吧一些實體的元數據信息發送到客戶端，實現UI層的 Entity 結構層，

也可以把一些枚舉映射發送到客戶端，可以實現一些 format，

我這里是維護了一個通用配置，用來配置一些動態的下拉框UI組件，並且使用  chosen-select 插件，基於動態數據實現了一個小的 jQuery 插件。

使用方法：

<select class="cc-select chosen-select width-40" cc-tag="頭程航班啟運地" cc-val="default" ></select>

 $('.cc-select').ccSelect();

效果：