The story around routing in
ASP.NET MVC is pretty good. When a resource is requested the action that it is routed
to is determined and the parameters to the action are initialized. Counter to that
when you build a link you specify the argument values and it creates the url for you.
So if your routes happen to change your application shouldn’t be bothered by that.
One area which can be problematic for this is if you are making any ajax requests.
What I’ve done to minimize the impact of route changes to Ajax requests is to have
the script make a call to determine the correct route. In the most trivial case this
is extremely easy. You call an action, which has a known route, passing into it the
name of the action and controller. It returns to you the url for the route. This works
really good, but the problem is when your routes have parameters, how do you handle
those?

First let’s take a look at the Javascript and then the definition of the action method
which it calls.

Here I am building a Javascript object named routeData. This is declared in JSON.
One thing to pay attention to is the fact that the value for paramValues is
a string containing JSON. This is passed to the controller action.

I’m using jQuery to make an Ajax request to /Home/MapRoute.
This maps to the method shown below.

Here I’m using the JavaScriptSerializer to
convert the JSON string into a dictionary, with string as key and value. I use that
dictionary to create a RouteValueDictionary which
is passed, along with other parameters, into the UrlHelper to
generate the url. When you return the Json result you must specify JsonRequestBehavior.AllowGet,
otherwise a 500 internal service error will be returned.
I think this is new with ASP.NET 2.

When the action method returns, you can use that url. The drawback to this approach
is that you will make an extra request to determine the url, but you will be sure
that those urls are correct. Also you could cache the results with Output
Caching since the routes won’t change.

Sayed Ibrahim Hashimi

ASP.NET MVC Route + Ajax + jQueryhttp://sedodream.com/PermaLink,guid,beb40727-c878-440d-bb2d-80501bb77312.aspxhttp://sedodream.com/2010/04/02/ASPNETMVCRouteAjaxJQuery.aspx
Fri, 02 Apr 2010 05:24:30 GMT<p>
The story around <a href="http://msdn.microsoft.com/en-us/library/cc668201%28VS.100%29.aspx">routing</a> in
ASP.NET MVC is pretty good. When a resource is requested the action that it is routed
to is determined and the parameters to the action are initialized. Counter to that
when you build a link you specify the argument values and it creates the url for you.
So if your routes happen to change your application shouldn’t be bothered by that.
One area which can be problematic for this is if you are making any ajax requests.
What I’ve done to minimize the impact of route changes to Ajax requests is to have
the script make a call to determine the correct route. In the most trivial case this
is extremely easy. You call an action, which has a known route, passing into it the
name of the action and controller. It returns to you the url for the route. This works
really good, but the problem is when your routes have parameters, how do you handle
those?
</p>
<p>
First let’s take a look at the Javascript and then the definition of the action method
which it calls.
</p>
<pre class="brush: js;">// wire up the event for the enter button
$(&quot;#searchText&quot;).keypress(function (event) {
if (event.keyCode == 13) {
// grab the text that is inside the box
var text = $(&quot;#searchText&quot;).val();
var routData = {
controllerName: 'Search',
actionName: 'Search',
paramValues: &quot;{ criteria: '&quot; + text + &quot;' }&quot;
};
$.ajax({
url: &quot;/Home/MapRoute&quot;,
data: routData,
success: function (data) {
window.location.href = data;
},
error: function (data) {
alert('there was a failure on the internets');
}
});
}
});</pre>
<p>
Here I am building a Javascript object named routeData. This is declared in <a href="http://json.org/">JSON</a>.
One thing to pay attention to is the fact that the value for <em><strong>paramValues</strong></em> is
a string containing JSON. This is passed to the controller action.
</p>
<p>
I’m using <a href="http://jquery.com/">jQuery</a> to make an Ajax request to <em>/Home/MapRoute</em>.
This maps to the method shown below.
</p>
<pre class="brush: csharp;">public JsonResult MapRoute(string actionName, string controllerName, string paramValues)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
Dictionary&lt;string, string&gt; parameters = jss.Deserialize&lt;Dictionary&lt;string, string&gt;&gt;(paramValues);
RouteValueDictionary rd = new RouteValueDictionary();
foreach (string key in parameters.Keys)
{
rd.Add(key, parameters[key]);
}
UrlHelper urlHelper = new UrlHelper(this.Request.RequestContext);
string url = urlHelper.Action(actionName, controllerName, rd);
return Json(url, JsonRequestBehavior.AllowGet);
}</pre>
<p>
Here I’m using the <a href="http://msdn.microsoft.com/en-us/library/system.web.script.serialization.javascriptserializer.aspx">JavaScriptSerializer</a> to
convert the JSON string into a dictionary, with string as key and value. I use that
dictionary to create a <a href="http://msdn.microsoft.com/en-us/library/system.web.routing.routevaluedictionary.aspx">RouteValueDictionary</a> which
is passed, along with other parameters, into the <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.urlhelper.aspx">UrlHelper</a> to
generate the url. When you return the Json result you must specify <a href="http://msdn.microsoft.com/en-us/library/system.web.mvc.jsonrequestbehavior%28VS.100%29.aspx">JsonRequestBehavior</a>.AllowGet,
otherwise a <strong><em>500 internal service error</em></strong> will be returned.
I think this is new with ASP.NET 2.
</p>
<p>
When the action method returns, you can use that url. The drawback to this approach
is that you will make an extra request to determine the url, but you will be sure
that those urls are correct. Also you could cache the results with <a href="http://www.asp.net/learn/mvc/tutorial-15-cs.aspx">Output
Caching</a> since the routes won’t change.
</p>
<p>
Sayed Ibrahim Hashimi
</p>ASP.NET MVCJavascriptjQueryroutinghttp://sedodream.com/Trackback.aspx?guid=539af450-2b61-46e1-a6de-8a62cbb5b4f9http://sedodream.com/pingback.aspxhttp://sedodream.com/PermaLink,guid,539af450-2b61-46e1-a6de-8a62cbb5b4f9.aspxIbrahim
Have you seen those text
boxes on the web that have a hint contained inside of it and wondered how you
could implement that? It's pretty easy with jQuery,
and there already exist some plugins that you can use, for example here is one.
When I set out to do this I didn’t even look to see what was out there because I wanted
to write a jQuery plugin, but the solution
that I can up with is not that different from that one.

Here is how I wanted the plugin to behave

Add a specified hint to the text box, if the input element was not focused and empty

When the text box was focused, the hint should disappear

When a form is submitted all hints should be removed prior to ensure that they are
not incorrectly submitted

First what I did was to create the a file named jquery.sedotech.inputWithHint.js.
You should name your plugins using this naming convention

Some things to take note of. When you are creating a plugin in you should use the
pattern

(function ($) {
// plugin code here
})(jQuery);

Take note of the ($) as the parameter and (jQuery) at
the end. What is happening here is that you are defining an anonymous function declaring
a parameter named $ and then invoking that function passing in the jQuery object.
You do this because when you are authoring plugins the $ variable is not available,
you have to use the other alias jQuery, but that’s just way too difficult. If you
use the pattern you are ensured that the $ alias is available and
it won’t conflict with other Javascript libraries.

Beyond this all I’m doing is filtering the list of items which are passed in, with
the expression var filteredSet = this.filter('input:text, textarea'),
to make sure that the plugins doesn’t touch elements which it is not familiar with
modifying. After I add the hint, by calling doAddHint on
each element in the filtered set, I make sure that the forms on the page are not submitted
with those hints.

Resource Links

jQuery: Creating a plugin to place hints in text boxeshttp://sedodream.com/PermaLink,guid,539af450-2b61-46e1-a6de-8a62cbb5b4f9.aspxhttp://sedodream.com/2010/03/31/jQueryCreatingAPluginToPlaceHintsInTextBoxes.aspx
Wed, 31 Mar 2010 04:24:07 GMTHave you seen those <a href="http://sedotech.com/LiveDemo/TextWithHints">text boxes</a> on
the web that have a hint contained inside of it and wondered how you could implement
that? It's pretty easy with <a href="http://jquery.com/">jQuery</a>, and there already
exist some plugins that you can use, for example here is <a href="http://remysharp.com/2007/01/25/jquery-tutorial-text-box-hints/">one</a>.
When I set out to do this I didn’t even look to see what was out there because I wanted
to write a <a href="http://plugins.jquery.com/">jQuery plugin</a>, but the solution
that I can up with is not that different from that one.
<p>
Here is how I wanted the plugin to behave
</p>
<ol>
<li>
Add a specified hint to the text box, if the input element was not focused and empty
</li>
<li>
When the text box was focused, the hint should disappear
</li>
<li>
When a form is submitted all hints should be removed prior to ensure that they are
not incorrectly submitted
</li>
</ol>
<p>
First what I did was to create the a file named <em>jquery.sedotech.inputWithHint.js</em>.
You should name your plugins using this naming convention
</p>
<p>
<em>jquery.<strong>customString</strong>.<strong>pluginName</strong>.js</em>
</p>
<p>
Here is the source for the plugin
</p>
<pre class="brush: js;">(function ($) {
var hintClassName = 'inputWithTextHint';
$.fn.addHint = function (hint) {
var filteredSet = this.filter('input:text, textarea');
filteredSet.each(function () {
// In here 'this' refers to an individual element
doAddHint($(this), hint);
});
// Find all forms and update the pre post to remove the hint
$('form input:submit').click(function () {
$('input:text, textarea').each(function () {
if ($(this).hasClass(hintClassName) &amp;&amp; $(this).attr('hint')
&amp;&amp; $(this).val() == $(this).attr('hint')) {
$(this).val('');
}
});
});
}
function doAddHint(target, hint) {
// Only add hint if the target is empty
if (target.val() == '') {
addHintToInput(target, hint);
target.focus(function () {
// If the target has the hint class on it then a hint must be showing
// when hint is showing put cursor at the begining
if ($(this).hasClass(hintClassName)) {
// remove the hint
$(this).val('');
// remove class
$(this).removeClass(hintClassName);
}
});
target.blur(function () {
// If no text then add hint class back
if ($(this).val() == '') {
addHintToInput(target, hint);
}
});
}
}
function addHintToInput(target, hint) {
target.val(hint);
target.addClass(hintClassName);
// add attribute to the target to store hint
target.attr('hint', hint);
}
})(jQuery);</pre>
Some things to take note of. When you are creating a plugin in you should use the
pattern <pre class="brush: js;">(function ($) {
// plugin code here
})(jQuery);</pre>
<p>
Take note of the <strong>($)</strong> as the parameter and <strong>(jQuery)</strong> at
the end. What is happening here is that you are defining an anonymous function declaring
a parameter named $ and then invoking that function passing in the <strong>jQuery</strong> object.
You do this because when you are authoring plugins the $ variable is not available,
you have to use the other alias jQuery, but that’s just way too difficult. If you
use the pattern you are ensured that the <strong>$</strong> alias is available and
it won’t conflict with other Javascript libraries.
</p>
<p>
Beyond this all I’m doing is filtering the list of items which are passed in, with
the expression <strong><em>var filteredSet = this.filter('input:text, textarea')</em></strong>,
to make sure that the plugins doesn’t touch elements which it is not familiar with
modifying. After I add the hint, by calling <strong><em>doAddHint</em></strong> on
each element in the filtered set, I make sure that the forms on the page are not submitted
with those hints.
</p>
<h3>Resource Links
</h3>
<ul>
<li>
<a href="http://sedotech.com/Resources#jQuery">All my jQuery resources</a>
</li>
<li>
<a href="http://sedotech.com/LiveDemo/TextWithHints">Live Demo for this plugin</a>
</li>
</ul>
<p>
Sayed Ibrahim Hashimi
</p>JavascriptjQueryjQuery-plugin