如何从C＃MVC4中的插件更改资源（JS和CSS）URL

Question

I'm working on nopCommerce and noticed that scripts and css are included in following way, in the Root_Head.cshtml file

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");

Late in the same document, it is embedded in the Head:

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

This generates the html output to embed the scripts / css in header / footer as defined with relative URL like...

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

I need to change the URL to other URL from plugin without modifying root files. So after this is done, it will look like this:

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

Any idea on how can I extend this from plugin? How should I proceed?

Answer 1

I'm not sure how nopCommerce works but if your using MVC4, then you can use a new feature call Bundling and Minification

One big advantage is, this will combine all the js and css into one file and do minification, so it will improve the performance of your website

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

inside the BundleConfig.cs, you can do something like this

        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"));

Then in the cshtml, you can use following method

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

* EDIT *

Sorry i just re-looked at the answer, and i could of just done this

in your web.config

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

then in your 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");