Excluded characters in a URI generated when invoking URL.Action with jQuery Script

Question

I have the following code as part of a jquery script to open a jqueryui dialog (the id value is hard-coded for testing purposes):

open: function (event, ui) { $(this).load("@Url.Action("Edit", "Person", new { id = Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609"), selectedPersonFor = Model.SelectedPersonFor, selectedPersonForId = Model.SelectedPersonForId, clientAccountId = Model.ClientAccountId })"); }, 

The problem is that although my dialog opens, the action of the controller never hits.

If I look at the source code in my browser, I get the following result:

 open: function (event, ui) { $(this).load("/Person/Edit/28769371-7518-49db-a5ea-b9c62621a609?selectedPersonFor=ClientAccount&selectedPersonForId=2a2dd3b9-a73b-4afa-8237-5a4f37736f8a&clientAccountId=00000000-0000-0000-0000-000000000000"); }, 

I found that if I transcoded the URI above into my script and replaced escaped ampersand (&) with an unshielded ampersand (&), then my action with the controller will get there.

I tried to add a call to the replace method in my script to get rid of the escaped ampersand, but that doesn't help. When I look at another URI on the same page that are generated to invoke controller actions, but not inside the script, I note that they avoided the ampersands inside them.

There seems to be some difference in how the browser handles the controller action call from the script as to how it does it from outside the script - and all this has to do with the escaped ampersand.

Can someone guide me on how to overcome this problem?

Additional Information:

I also tried passing the request parameters to the load function as follows:

 open: function (event, ui) { $(this).load("@Url.Action("Edit", "Person")", { id: @Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609"), selectedPersonFor: Model.SelectedPersonFor, selectedPersonForId: Model.SelectedPersonForId, clientAccountId: Model.ClientAccountId }); }, 

However, when I do this, my dialogue does not even open.

Edit:

In response to a request to show the route, I provide the following (I hope this is what was requested):

 routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults ); 

I just use the default routes provided by my asp.net mvc3 project.

Answer 1

In Razor, the @ operator is used to encode HTML output => & becomes & . If you do not want this, you can use the Html.Raw :

 var url = '@Html.Raw(Url.Action("Edit", "Person", new { id = Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609"), selectedPersonFor = Model.SelectedPersonFor, selectedPersonForId = Model.SelectedPersonForId, clientAccountId = Model.ClientAccountId }))'; $(this).load(url); 

Now consider your second piece of code:

 $(this).load("@Url.Action("Edit", "Person")", { id: @Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609"), selectedPersonFor: Model.SelectedPersonFor, selectedPersonForId: Model.SelectedPersonForId, clientAccountId: Model.ClientAccountId }); 

If you look at the rendered HTML, you will see the following:

 $(this).load("@Url.Action("Edit", "Person")", { id: 28769371-7518-49db-a5ea-b9c62621a609, selectedPersonFor: Model.SelectedPersonFor, selectedPersonForId: Model.SelectedPersonForId, clientAccountId: Model.ClientAccountId }); 

which obviously does not work, because Model.SelectedPersonForId is probably not a valid javascript variable, so you get a javascript error. Also, 28769371-7518-49db-a5ea-b9c62621a609 not a valid javascript expression, since you did not enclose it in quotation marks.

If you want this to work, make sure you create the correct content:

 $(this).load("/Person/Edit", { id: '@Guid.Parse("28769371-7518-49db-a5ea-b9c62621a609")', selectedPersonFor: '@Model.SelectedPersonFor', selectedPersonForId: '@Model.SelectedPersonForId', clientAccountId: '@Model.ClientAccountId' }); 

Note the @ operator used before each variable on the server side, and not just before the pointer. Also note that the values ​​are wrapped like javascript strings.