Generating URL with URL.Action helper and proper encoding of javascript variables

Question

I'm trying to call an action method in ASP.MVC with AJAX using URL generated by Url.Action helper. I have a few arguments which are javascript variables extracted from DOM using jQuery.

I have tried two approaches and both failed.

I've simplified example using only two variables. In real world there's four (decimal?, string, string, string).

First:

var link = '@Url.Action(MVC.ControllerName.ActionNames.Edit, MVC.ControllerName.Name)';
link = link + '?first=' + first + '&second=' + second;

In this scenario all arguments are passed to the action method but when variable contains some non-standard character (for instance "é") it is malformed and I have problems with restoring proper encoding of it (for instance "Simplifi�s" instead of "Simplifiés")

Second:

var link = '@Url.Action(MVC.ControllerName.ActionNames.Edit, MVC.ControllerName.Name, new { first = "-1", second = "-2"})'

link = link.replace("-1", first);
link = link.replace("-2", second);

In this scenario only first variable (which is nullable decimal) is passed to the action method. The rest are the empty strings.

I've noticed that in the second case the link looks like that:

/ControlerName/Edit?first=890 &amp ;second=Something

(spaces between 890 and ;second are inserted only because of stack overflow's html rendering)

while in the first case it looks as follows:

/ControlerName/Edit?first=890&second=Something

Action method looks like that:

[HttpGet]
public virtual ActionResult Edit(decimal? first, string second)
{
   //code
}

Ajax call looks as follows:

$.ajax({
    url: link,
    type: 'get',
    cache: false,
    async: true,
    success: function (result) {
        $('#someId').html(result);
    }
});

Variables are selected from DOM as follows:

var first = $(this).closest('tr').find('.first').html();

maybe use post type to send your string, which contains some non-standard character, to server? — aleha_84
– aleha_84, Commented Jan 12, 2015 at 13:12
Why dont you use Server.UrlEncode and Server.UrlDecode ? — Nilesh
– Nilesh, Commented Jan 12, 2015 at 13:14
@Nilesh I didn't know I should. I'm sorry. Now I've surrounded Url.Action with UrlEncode, but AJAX can't locate action method... Is there any trick to do? — Arkadiusz Kałkus
– Arkadiusz Kałkus, Commented Jan 12, 2015 at 15:05
You shouldn't surround Url.Action with UrlEncode. Url.Action itself will do necessary encode for you, UrlEncode will do unnecessary encode to your url well formatted base url. The part you have to manually encode is your javascript variables first and second, surround them with javascript encode function encodeURIComponent() — tweray
– tweray, Commented Jan 12, 2015 at 18:55
Sorry @Landeeyo could not reply back yesterday. What @tweray said is correct, use encodeURI instead — Nilesh
– Nilesh, Commented Jan 13, 2015 at 3:45

tweray · Accepted Answer · 2015-01-13 13:37:46Z

1

@Url.Action will do necessary encoding for your base url, but you have to handle the url encoding for your 2 javascript variables first and second by yourself.

One straightforward way is to use encodeURIComponent():

var link = '@Url.Action(MVC.ControllerName.ActionNames.Edit, MVC.ControllerName.Name)';
link = link 
       + '?first=' + encodeURIComponent(first) 
       + '&second=' + encodeURIComponent(second);

Or as @Nilesh mentioned in comment, you can do it in one time use encodeURI()

var link = '@Url.Action(MVC.ControllerName.ActionNames.Edit, MVC.ControllerName.Name)';
link = link + '?first=' + first + '&second=' + second;
linkToUse = encodeURI(link);

answered Jan 13, 2015 at 13:37

tweray

1,00311 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generating URL with URL.Action helper and proper encoding of javascript variables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related