ASP.NetMVC引⽤动态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)
{
thismonConfigService = 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
})
$igger(`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);
asp查看源码配置ui}
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-18 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
})
$igger(`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();
效果：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论