加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > asp.Net > 正文

你在ASP.NET MVC视图中编写JavaScript吗?还是在单独的JavaScrip

发布时间:2020-12-15 19:02:00 所属栏目:asp.Net 来源:网络整理
导读:试图改进我的编码风格我试过不同的解决方案,但我不知道什么是最好的。 我开始把JavaScript放入我的视图,但我不是特别喜欢这个解决方案。 它很难调试与Visual Studio,它的种类“污染”的页面。 我的新“趋势”是将页面的脚本放在单独的文件中。 我面临的唯
试图改进我的编码风格我试过不同的解决方案,但我不知道什么是最好的。
我开始把JavaScript放入我的视图,但我不是特别喜欢这个解决方案。
它很难调试与Visual Studio,它的种类“污染”的页面。
我的新“趋势”是将页面的脚本放在单独的文件中。
我面临的唯一的问题是与代码。
为了解决这个问题,我定义了JavaScript变量,像这样:
<script type="text/javascript">
    var PriceListFetchAction = '<%=Url.Action("Fetch","PriceList")%>';
    var UploaderAction = '<%=Url.Action("UploadExcelPriceList","PriceList")%>';
    var ModelId = '<%=Model.id%>';
    var ImportType = '<%=Model.Type%>';
    var customerCodeFetchAction = '<%=Url.Action("FetchByCustomerCode","Customers")%>';
    var customerNameFetchAction = '<%=Url.Action("FetchByCustomerName","Customers")%>';
    var ImportErpAction = '<%=Url.Action("ImportPriceListErp","PriceList")%>';
    var imageCalendar = '<%=Url.Content("~/Content/Images/calendar.png")%>';
</script>

然后我使用我的JavaScript文件中的变量。
什么是最好的性能,调试,风格为你?

解决方法

我遵循一些规则:

>除非绝对必要,否则不要直接将变量附加到DOM。
>尽可能多地在js文件中放置信息。 js文件越少越好。
>版本您的js文件。当发布,缩小和通过Chirpy或SquishIt捣碎
>在js中,尽可能最小化对动态服务器端值(生成的ids等)的依赖。

所以,这里有一个例子:

我将添加jQuery和jQuery元数据到我的项目:
http://plugins.jquery.com/project/metadata

然后,在我的主js文件中,我将使用自己的命名空间扩展jQuery:

$.extend({
   fatDish : {
     url : {},urls : function(a) {
        $.extend($.fatDish.url,a);
     }
   }
});

几乎所有我定制的js逻辑将存储在$ .fatDish命名空间。

现在,假设我想传递一个MVC路由到$ .fatDish。在我的aspx页面,我会写下面的:

<script src="@Url.Content("~/path/master.js")" type="text/javascript"></script>
<script type="text/javascript">
   $.fatDish.urls({
      path1 : '@Url.Action("Index","Home")'
   });
</script>

在js文件中,我现在可以写:

window.location = $.fatDish.url.path1;

第二种方法是使用jQuery元数据(我上面提到过)。在你的aspx页面上,你可以写如下:

<div class="faux-link {act:'@Url.Action("Index","Home")'}">Go Somewhere</div>

然后,在您的js文件中,您可以抓取路由值如下:

$('.faux-link').click(function() {
   var $this = $(this);
   var href = $this.metadata().act;
   window.location = href;
});

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读