如何在C#MVC4中从插件更改资源(JS和CSS)URL

时间:2013-05-16 05:13:06

标签: c# asp.net asp.net-mvc-3 asp.net-mvc-4 nopcommerce

我正在研究nopCommerce并注意到脚本和css包含在Root_Head.cshtml文件中的以下方式

Html.AppendCssFileParts("~/Content/smoothness/jquery-ui-1.8.17.custom.css"); 
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-ui.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery.unobtrusive-ajax.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.7.1.min.js");

在同一份文件的后期,它嵌入在Head:

@Html.NopCssFiles(this.Url, ResourceLocation.Head)
@Html.NopScripts(this.Url, ResourceLocation.Head)

这会生成html输出,将脚本/ css嵌入到页眉/页脚中,如相对URL所定义的那样...

<link href="/Content/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.7.1.min.js"></script>

我需要在不修改根文件的情况下将URL更改为插件中的其他URL。完成后,它将如下所示:

<link href="http://someurl.com/Content/smoothness/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" />
<script src="http://someurl.com/Scripts/jquery-1.7.1.min.js"></script>

有关如何从插件扩展此功能的任何想法?我该怎么办?

1 个答案:

答案 0 :(得分:1)

我不确定nopCommerce是如何工作的,但如果您使用MVC4,那么您可以使用新功能调用Bundling and Minification

一个很大的优点是,这会将所有js和css合并到一个文件中并进行缩小,这样可以提高网站的性能

参考:http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

在BundleConfig.cs中,你可以做这样的事情

        var domainUrl = "http://someurl.com"; // you can retrieve it from config file

        bundles.Add(new StyleBundle(domainUrl + "/Content/css").Include( domainUrl + "/Content/site.css"));


        bundles.Add(new StyleBundle(domainUrl + "/Content/themes/base/css").Include(
                    domainUrl + "/Content/themes/base/jquery.ui.core.css",
                    domainUrl + "/Content/themes/base/jquery.ui.resizable.css",
                    domainUrl + "/Content/themes/base/jquery.ui.selectable.css",
                    domainUrl + "/Content/themes/base/jquery.ui.accordion.css",
                    domainUrl + "/Content/themes/base/jquery.ui.autocomplete.css",
                    domainUrl + "/Content/themes/base/jquery.ui.button.css",
                    domainUrl + "/Content/themes/base/jquery.ui.dialog.css",
                    domainUrl + "/Content/themes/base/jquery.ui.slider.css",
                    domainUrl + "/Content/themes/base/jquery.ui.tabs.css",
                    domainUrl + "/Content/themes/base/jquery.ui.datepicker.css",
                    domainUrl + "/Content/themes/base/jquery.ui.progressbar.css",
                    domainUrl + "/Content/themes/base/jquery.ui.theme.css"));

        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

然后在cshtml中,您可以使用以下方法

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")

* 编辑*

对不起,我刚刚重新审视了答案,我可以做到这一点

中的

<configuration>
    <appSettings>
        <add key="resourcePath" value="http://someurl.com"/>
    </appSettings>
 . . .
</configuration>

然后在你的HTML中

var url = ConfigurationManager.AppSettings["resourcePath"];
Html.AppendCssFileParts( url + "/Content/smoothness/jquery-ui-1.8.17.custom.css"); 
Html.AppendScriptParts(url + "/Scripts/public.ajaxcart.js");
Html.AppendScriptParts(url + "/Scripts/public.common.js");
Html.AppendScriptParts(url + "/Scripts/jquery-ui.min.js");
Html.AppendScriptParts(url + "/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts(url + "/Scripts/jquery.validate.min.js");
Html.AppendScriptParts(url + "/Scripts/jquery.unobtrusive-ajax.min.js");
Html.AppendScriptParts(url + "/Scripts/jquery-1.7.1.min.js");