Simple Tip for Accessing Relative Path Items in Javascript in your ASP.NET Website

Dave Arlin — Mon, 03 May 2010 14:54:25 GMT

One common problem I’ve faced when developing applications is when I need to access an Image file or some other artifact that is relative to my website.

I’ve often gotten “lucky” where my virtual directory path locally matches my QA, Staging, Production, etc. So I’m able to have javascript code like this:

$('.ok-button').attr('src', '/Content/Images/btn_ok.jpg');

$('.ok-button').hover(

function() { $(this).attr('src', '/Content/Images/btn_okOver.jpg');
}

, function() { $(this).attr('src', '/Content/Images/btn_ok.jpg');
}

);

Here, I’m assuming that my images will always be stored somehow like this:

http://localhost/Content/Images

http://[test-dns]/Content/Images

http://[prod-dns]/Content/Images

etc…

That above javascript will fail if I am forced to be put into a Virtual Directory such as this:

http://[prod-dns]/[some-virtual-directory]/Content/Images

The most effective way I’ve found to get around this is by creating a hidden field on my main master page that contains the value derived by the web server of the root URL to my website. This root URL might contain no virtual directory or 10 virtual directories depending on the IIS Web Server set up.

I’m using ASP.NET MVC, but this example can easily be ported into a Page_Load event with standard ASP.NET web forms.

<% string virtualPath = HttpRuntime.AppDomainAppVirtualPath;
       virtualPath = virtualPath.EndsWith("/") ? virtualPath : virtualPath + "/";
    %>

<input id = "website-image-path" type = "hidden" value = '<%=virtualPath + "Content/Images/" %>' />

Just place that code somewhere in the body of your master page.

Then access it via JQuery, or standard javascript using something like this:

$('#website-image-path').val();

Then finally you’re javascript might look something like this to get at your actual Image source.

var websiteImagePath = $('#website-image-path').val();

$('.ok-button').attr('src',
websiteImagePath + 'btn_ok.jpg');

$('.ok-button').hover(

function() { $(this).attr('src',
websiteImagePath + 'btn_okOver.jpg'); }

, function() { $(this).attr('src',
websiteImagePath + 'btn_ok.jpg'); }

);

JSON to .NET Object Using JQuery and IModelBinder in ASP.NET MVC

Dave Arlin — Fri, 30 Apr 2010 03:15:59 GMT

Ok, so I have a pretty basic web page that displays a paginated grid of a collection of my business objects. This grid gets displayed when I perform a simple string search on let’s say my entity name. Of course, everyone hates dealing with full postbacks, so I want to perform this search via javascript, or more specifically via an AJAX call.

Using the typical form post method common in many ASP.NET MVC applications doesn’t really work in my scenario because I’m not mapping all the necessary fields upon landing on my page.

I know I want to use JQuery’s AJAX capabilities to post my search string information, but I couldn’t figure out a way to do it without passing in an “ugly” set of query strings and having to accept 3 parameters in my Controller Action method.

Basically I didn’t want to have to have something like this:

[NoCache][AcceptVerbs(HttpVerbs.Post)]

public ActionResult SearchEntities(string searchValue, int pageNumber, int itemsPerPage)

{

var allSearchResults = _entityAdministrationService.SearchEntities(searchValue);

var searchResultsForPage = allSearchResults.Skip((pageNumber
- 1) * itemsPerPage).Take(itemsPerPage);

return Json(new EntitySearchResultsInput

{

Entities = searchResultsForPage,

ItemsPerPage = itemsPerPage,

PageNumber = pageNumber,

TotalResults = allSearchResults.Count()

});

}

(oh by the way, going forward in this post, ignore my custom “NoCache” attribute in any of my code snippets. It’s not related to this post, but I use it all the time now because of the automatic post caching feature in IE).

Ok, so if you look at the method signature, it really doesn’t look THAT bad right? Well it’s not bad, but the problem is that I’m sure I’ll have other pages that need to perform AJAX calls that will pass in other sets of parameters. I want one to have a nice POCO that I can work with that gets “automatically” mapped for me.

I want something like this:

[NoCache][AcceptVerbs(HttpVerbs.Post)]

public ActionResult SearchEntities(EntitySearchOutput entitySearchOutput)

{

var allSearchResults = _entityAdministrationService.SearchEntities(entitySearchOutput.SearchValue);

var searchResultsForPage = allSearchResults.Skip((entitySearchOutput.PageNumber
- 1) * entitySearchOutput.ItemsPerPage).Take(entitySearchOutput.ItemsPerPage);

return Json(new EntitySearchResultsInput

{

Entities = searchResultsForPage,

ItemsPerPage = entitySearchOutput.ItemsPerPage,

PageNumber = entitySearchOutput.PageNumber,

TotalResults = allSearchResults.Count()

});

}

Where the definition of EntitySearchOutput is:

public class EntitySearchOutput

{

public string SearchValue
{ get; set;
}

public int PageNumber
{ get; set;
}

public int ItemsPerPage
{ get; set;
}

}

So, making use of Google’s jquery.json library, and javascript objects, I’m able to write the following javascript code that calls my “SearchEntities” controller action.

var searchValue = GetSearchValue();

var currentPageNumber = GetCurrentPageNumber();

var itemsPerPage = 20;

var searchData = {

'SearchValue': searchValue,

'PageNumber': currentPageNumber,

'ItemsPerPage': itemsPerPage

};

var searchDataJSON = $.toJSON(searchData);

searchDataJSON = searchDataJSON.replace(/null/g, '');

$.post(

'../ApplicationManagement/SearchEntities',

{ EntitySearchOutput: searchDataJSON },

function(jsonResult) {

DisplaySearchResults(jsonResult);

}, "json");

So what this actually does is builds out my “searchData” javascript object and then runs through the “$.toJSON” function to convert the javascript object to a JSON object called “searchDataJSON”. This in turn gets passed to my “SearchEntities” method as a JSON string. As a side note, line 12 is necessary for IE so that the JSON string gets created in a way that can be de-serialized by .NETs JavascriptSerializer as you’ll see soon.

So how does the application know to convert what I passed in javascript to my EntitySearchOutput class? That’s where an IModelBinder implementation comes into play.

public class JsonModelBinder

:IModelBinder where T:class

{

#region IModelBinder Members

public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)

{

string jsonString = controllerContext.RequestContext.HttpContext.Request.Params[0];

JavaScriptSerializer serializer = new JavaScriptSerializer();

var result = serializer.DeserializeObject(jsonString);

return serializer.ConvertToType
(result);

}

#endregion

}

As you can see, this JsonModelBinder class does not say anything about EntitySearchOutput. As a matter of fact, it is a generic class which means, yes, it can be used for any class provided it is Javascript serializable. So you can do this with deep complex arrays. The one method you must implement is called “BindModel” which gives you a reference to the HttpContext. The json String exists in the HttpContext.Request parameter. Simple use the JavaScriptSerializer framework class and deserialize to the generic type T and return the results.

The final piece of this to tie in the model binder comes in the Global.asax.cs

protected void Application_Start()

{

RegisterRoutes(RouteTable.Routes);

SetupIoCContainer(); 

SetupModelBinders(); 

}

private static void SetupModelBinders()

{

ModelBinders.Binders.Add(typeof(EntitySearchOutput), new JsonModelBinder<EntitySearchOutput>>());

}

The “SetupModelBinders” method makes a call that tells the MVC Framework to always using the JsonModelBinder class to create an EntitySearchOutput object when it is specified as a parameter of a controller action.

Now the controller action will work as expected:

[NoCache][AcceptVerbs(HttpVerbs.Post)]

public ActionResult SearchEntities(EntitySearchOutput entitySearchOutput)

{

var allSearchResults = _entityAdministrationService.SearchEntities(entitySearchOutput.SearchValue);

var searchResultsForPage = allSearchResults.Skip((entitySearchOutput.PageNumber
- 1) * entitySearchOutput.ItemsPerPage).Take(entitySearchOutput.ItemsPerPage);

return Json(new EntitySearchResultsInput

{

Entities = searchResultsForPage,

ItemsPerPage = entitySearchOutput.ItemsPerPage,

PageNumber = entitySearchOutput.PageNumber,

TotalResults = allSearchResults.Count()

});

}

The final part of this method returns back JSON to our javascript AJAX call, it JSON serializes an “EntitySearchResultsInput” class defined here:

public class EntitySearchResultsInput

{

public IEnumerable<Entity>>
Entities { get; set;
}

public int ItemsPerPage
{ get; set;
}

public int PageNumber
{ get; set;
}

public int TotalResults
{ get; set;
}

}

So that the following “jsonResult” object is populated on line 17 below:

var searchValue = GetSearchValue();

var currentPageNumber = GetCurrentPageNumber();

var itemsPerPage = 20;

var searchData = {

'SearchValue': searchValue,

'PageNumber': currentPageNumber,

'ItemsPerPage': itemsPerPage

};

var searchDataJSON = $.toJSON(searchData);

searchDataJSON = searchDataJSON.replace(/null/g, '');

$.post(

'../ApplicationManagement/SearchEntities',

{ EntitySearchOutput: searchDataJSON },

function(jsonResult) {

DisplaySearchResults(jsonResult);

}, "json");

You can access properties on “jsonResult” simply by typing in: jsonResult.TotalResults or jsonResult.Entities[0].Name

So that’s an example of one implementation of IModelBinder. You might find other things you want to do with other types of ModelBinders. I actually created another one for a specific scenario I had with arrays of integers. Here is that ModelBinder. I’ll leave it to you to see how you might use it.

public class CommaSeperatedStringToIntegerEnumModelBinder : IModelBinder

{

#region IModelBinder Members

public object BindModel(ControllerContext controllerContext, ModelBindingContext bindingContext)

{

string commaSeperatedString = controllerContext.RequestContext.HttpContext.Request.Params["Ids"];

string[] intStringArray = commaSeperatedString.Split(',');

IEnumerable<int><>
intArray = intStringArray.ToList().ConvertAllint>>(delegate(string str)
{ return int.Parse(str);
});

return intArray;

}

#endregion

}

Dave Arlin - Bloggin' - JQuery

Simple Tip for Accessing Relative Path Items in Javascript in your ASP.NET Website

JSON to .NET Object Using JQuery and IModelBinder in ASP.NET MVC