Javascript – ASP.NET MVC and Relative Paths within Javascript

asp.net-mvcjavascript

This question is being based off of a similar question titled, "ASP.NET MVC Relative Paths", located here.

I understand that issues arise concerning absolute and relative paths when developing an ASP.NET application…especially an ASP.NET MVC application. Throughout the application lifecycle, I've been using something similar to the following to resolve paths in my ASPX pages:

<script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery-1.2.6.js")%>"></script>

I am unable to leave the paths as relative, because it is getting moved around from the development tier to the staging tier to the production tier, and it may reside in a slightly different folder structure within IIS.

My question, however, is what can I do about relative paths located in Javascript files? How can they be resolved? Up to this point, I have been embedding the Javascript for each page into the page itself, so I can resolve the URL using an approach similar to above. This results in Javascript looking something like this:

$(function() {
    $.getJSON('<%= Url.Content("~/home/test/1") %>', null, function(data) {
        // Do stuff in here
    });
});

This works fine, of course until I move everything out of the ASP.NET page and into a centrally located Javascript file. As suggested by the aforementioned question:

Or you can use document.location.host
to build the fully qualified path name
within the javascript:
document.location.host +
"/Content/Images/MyImage.jpg"

Another method is to have ASP.NET
build this part of the script
dynamically so that the fully
qualified path name is injected.You
can do this by using
ScriptManager.RegisterStartupScript or
ScriptManager.RegisterScriptBlock

The application is a rather heavy Javascript user, so I'm unsure if the second option is going to work. Is there a more elegant way to resolve this issue other than the first option? What have you guys done to resolve this issue? Any help would be greatly appreciated. Thanks.

Best Answer

One way could be is to have your JS script take a reference to an object, and this object would be constructed in the view/partial that contains the relative pathing you need. Then your JS file code can use this object to instantiate the paths as you need.

Kind of a pain, but that would work, as in:

var paths = 
{
    imagePath: '<%= Url.Content("~/Content/Images/MyImage.jpg") %>'
}

var obj = myJSFileObject.Load(paths);
//continue

HTH

Related Solutions

Asp.net-mvc – ASP.NET MVC Relative Paths

Try this:

<script type="text/javascript" src="<%=Url.Content("~/Scripts/jquery-1.2.6.js")%>"></script>

Or use MvcContrib and do this:

<%=Html.ScriptInclude("~/Content/Script/jquery.1.2.6.js")%>

Asp.net-mvc – ASP.NET MVC – Set custom IIdentity or IPrincipal

Here's how I do it.

I decided to use IPrincipal instead of IIdentity because it means I don't have to implement both IIdentity and IPrincipal.

Create the interface

interface ICustomPrincipal : IPrincipal
{
    int Id { get; set; }
    string FirstName { get; set; }
    string LastName { get; set; }
}

CustomPrincipal

public class CustomPrincipal : ICustomPrincipal
{
    public IIdentity Identity { get; private set; }
    public bool IsInRole(string role) { return false; }

    public CustomPrincipal(string email)
    {
        this.Identity = new GenericIdentity(email);
    }

    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

CustomPrincipalSerializeModel - for serializing custom information into userdata field in FormsAuthenticationTicket object.

public class CustomPrincipalSerializeModel
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

if (Membership.ValidateUser(viewModel.Email, viewModel.Password))
{
    var user = userRepository.Users.Where(u => u.Email == viewModel.Email).First();

    CustomPrincipalSerializeModel serializeModel = new CustomPrincipalSerializeModel();
    serializeModel.Id = user.Id;
    serializeModel.FirstName = user.FirstName;
    serializeModel.LastName = user.LastName;

    JavaScriptSerializer serializer = new JavaScriptSerializer();

    string userData = serializer.Serialize(serializeModel);

    FormsAuthenticationTicket authTicket = new FormsAuthenticationTicket(
             1,
             viewModel.Email,
             DateTime.Now,
             DateTime.Now.AddMinutes(15),
             false,
             userData);

    string encTicket = FormsAuthentication.Encrypt(authTicket);
    HttpCookie faCookie = new HttpCookie(FormsAuthentication.FormsCookieName, encTicket);
    Response.Cookies.Add(faCookie);

    return RedirectToAction("Index", "Home");
}

Global.asax.cs - Reading cookie and replacing HttpContext.User object, this is done by overriding PostAuthenticateRequest

protected void Application_PostAuthenticateRequest(Object sender, EventArgs e)
{
    HttpCookie authCookie = Request.Cookies[FormsAuthentication.FormsCookieName];

    if (authCookie != null)
    {
        FormsAuthenticationTicket authTicket = FormsAuthentication.Decrypt(authCookie.Value);

        JavaScriptSerializer serializer = new JavaScriptSerializer();

        CustomPrincipalSerializeModel serializeModel = serializer.Deserialize<CustomPrincipalSerializeModel>(authTicket.UserData);

        CustomPrincipal newUser = new CustomPrincipal(authTicket.Name);
        newUser.Id = serializeModel.Id;
        newUser.FirstName = serializeModel.FirstName;
        newUser.LastName = serializeModel.LastName;

        HttpContext.Current.User = newUser;
    }
}

Access in Razor views

@((User as CustomPrincipal).Id)
@((User as CustomPrincipal).FirstName)
@((User as CustomPrincipal).LastName)

and in code:

    (User as CustomPrincipal).Id
    (User as CustomPrincipal).FirstName
    (User as CustomPrincipal).LastName

I think the code is self-explanatory. If it isn't, let me know.

Additionally to make the access even easier you can create a base controller and override the returned User object (HttpContext.User):

public class BaseController : Controller
{
    protected virtual new CustomPrincipal User
    {
        get { return HttpContext.User as CustomPrincipal; }
    }
}

and then, for each controller:

public class AccountController : BaseController
{
    // ...
}

which will allow you to access custom fields in code like this:

User.Id
User.FirstName
User.LastName

But this will not work inside views. For that you would need to create a custom WebViewPage implementation:

public abstract class BaseViewPage : WebViewPage
{
    public virtual new CustomPrincipal User
    {
        get { return base.User as CustomPrincipal; }
    }
}

public abstract class BaseViewPage<TModel> : WebViewPage<TModel>
{
    public virtual new CustomPrincipal User
    {
        get { return base.User as CustomPrincipal; }
    }
}

Make it a default page type in Views/web.config:

<pages pageBaseType="Your.Namespace.BaseViewPage">
  <namespaces>
    <add namespace="System.Web.Mvc" />
    <add namespace="System.Web.Mvc.Ajax" />
    <add namespace="System.Web.Mvc.Html" />
    <add namespace="System.Web.Routing" />
  </namespaces>
</pages>

and in views, you can access it like this:

@User.FirstName
@User.LastName

Best Answer

Related Solutions

Asp.net-mvc – ASP.NET MVC Relative Paths

Asp.net-mvc – ASP.NET MVC – Set custom IIdentity or IPrincipal

Related Topic