@URL.Contenu dans un fichier javascript séparé en utilisant ASPNET MVC 3 et Razor
J'utilisais ceci
if (ret = 1)
iconType = new google.maps.MarkerImage('@Url.Content("~/Content/images/image.png")');
else if (ret = 2)
iconType = new google.maps.MarkerImage('@Url.Content("~/Content/images/image2.png")');
else if (ret = 3)
iconType = new google.maps.MarkerImage('@Url.Content("~/Content/images/image3.png")');
Dans une vue (ASPNET MVC 3), Maintenant je déplace le code vers un fichier javascript séparé (Je l'utilise car en fonction d'une valeur vaiable que j'ai définie comme image d'une image de contrôle.png, image2.png ou image3.png).
Razor n'analyse pas @Url.Contenu dans le fichier javascript, Quelle est la meilleure façon de gérer cela?
Merci d'avance! Guillermo.
2 réponses
Je mets habituellement un bloc comme celui - ci au début de la page:
<script>
var ROOT = '@Url.Content("~")';
</script>
Et puis je me réfère à la variable ROOT
en javascript:
if (ret = 1)
iconType = new google.maps.MarkerImage(ROOT + '/Content/images/image.png');
else if (ret = 2)
iconType = new google.maps.MarkerImage(ROOT + '/Content/images/image2.png');
else if (ret = 3)
iconType = new google.maps.MarkerImage(ROOT + '/Content/images/image3.png")');
Une autre solution consiste à rendre vos fichiers JS complètement à travers le RazorViewEngine. De cette façon, vous pouvez facilement utiliser la syntaxe Razor dans votre fichier Javascript:
public class CustomRazorViewEngine : BuildManagerViewEngine
{
internal static readonly string ViewStartFileName = "_ViewStart";
public CustomRazorViewEngine()
: this(null)
{
}
public CustomRazorViewEngine(IViewPageActivator viewPageActivator)
: base(viewPageActivator)
{
AreaViewLocationFormats = new[]
{
"~/Areas/{2}/Views/{1}/{0}.cshtml",
"~/Areas/{2}/Views/{1}/{0}.vbhtml",
"~/Areas/{2}/Views/{1}/{0}.csjs",
"~/Areas/{2}/Views/Shared/{0}.cshtml",
"~/Areas/{2}/Views/Shared/{0}.vbhtml",
"~/Areas/{2}/Views/Shared/{0}.csjs"
};
AreaMasterLocationFormats = new[]
{
"~/Areas/{2}/Views/{1}/{0}.cshtml",
"~/Areas/{2}/Views/{1}/{0}.vbhtml",
"~/Areas/{2}/Views/{1}/{0}.csjs",
"~/Areas/{2}/Views/Shared/{0}.cshtml",
"~/Areas/{2}/Views/Shared/{0}.vbhtml",
"~/Areas/{2}/Views/Shared/{0}.csjs"
};
AreaPartialViewLocationFormats = new[]
{
"~/Areas/{2}/Views/{1}/{0}.cshtml",
"~/Areas/{2}/Views/{1}/{0}.vbhtml",
"~/Areas/{2}/Views/{1}/{0}.csjs",
"~/Areas/{2}/Views/Shared/{0}.cshtml",
"~/Areas/{2}/Views/Shared/{0}.vbhtml",
"~/Areas/{2}/Views/Shared/{0}.csjs"
};
ViewLocationFormats = new[]
{
"~/Views/{1}/{0}.cshtml",
"~/Views/{1}/{0}.vbhtml",
"~/Views/{1}/{0}.csjs",
"~/Views/Shared/{0}.cshtml",
"~/Views/Shared/{0}.vbhtml",
"~/Views/Shared/{0}.csjs"
};
MasterLocationFormats = new[]
{
"~/Views/{1}/{0}.cshtml",
"~/Views/{1}/{0}.vbhtml",
"~/Views/{1}/{0}.csjs",
"~/Views/Shared/{0}.cshtml",
"~/Views/Shared/{0}.vbhtml",
"~/Views/Shared/{0}.csjs"
};
PartialViewLocationFormats = new[]
{
"~/Views/{1}/{0}.cshtml",
"~/Views/{1}/{0}.vbhtml",
"~/Views/{1}/{0}.csjs",
"~/Views/Shared/{0}.cshtml",
"~/Views/Shared/{0}.vbhtml",
"~/Views/Shared/{0}.csjs"
};
FileExtensions = new[]
{
"cshtml",
"vbhtml",
"csjs",
};
}
protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
{
return new RazorView(controllerContext, partialPath,
layoutPath: null, runViewStartPages: false, viewStartFileExtensions: FileExtensions,
viewPageActivator: ViewPageActivator);
}
protected override IView CreateView(ControllerContext controllerContext, string viewPath, string masterPath)
{
var view = new RazorView(controllerContext, viewPath,
layoutPath: masterPath, runViewStartPages: true, viewStartFileExtensions: FileExtensions,
viewPageActivator: ViewPageActivator);
return view;
}
}
Dans votre fichier ASAX Global, ajoutez simplement ces éléments:
RazorCodeLanguage.Languages.Add("csjs", new CSharpRazorCodeLanguage());
ViewEngines.Engines.Add(new CustomRazorViewEngine());
Et ajoutez ce mappage sur le web.config racine
<system.web>
<compilation debug="true" targetFramework="4.0">
<assemblies>
<add assembly="Newtonsoft.Json" />
<add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Web.Helpers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
<add assembly="System.Web.WebPages, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
</assemblies>
<!--Added-->
<buildProviders>
<add extension=".csjs" type="System.Web.WebPages.Razor.RazorBuildProvider, System.Web.WebPages.Razor"/>
</buildProviders>
Vous pouvez maintenant même travailler avec un modèle dans votre fichier javascript!
public ActionResult MyJavascriptThroughRazor()
{
var someModel = ...
return PartialView("filenamewithcsjsextension",someModel);
}