Setting string in javascript function in ASP.NET MVC give NullReferenceException

Question

Inside my MVC view I have javascript that is executed by a button click. I'm trying to set a string to a random set of characters which I can get to work fine but when I try and set that string to 'randomchars' string inside the javascript I get a NullReferenceException when I try and run the view.

Below is the code snippet, the CreateRString is where the model parameter (RString) is set to the random string.

<script type="text/javascript">
    function showAndroidToast(toast) {

        var url = '@Url.Action("CreateRString", "Functions")';
        $.ajax({ url: url, success: function (response) { window.location.href = response.Url; }, type: 'POST', dataType: 'json' });

        var randomchars = '@(Model.RString)';
    }
</script>

Is the syntax correct? I'm not too sure why it's getting the NULL.

Steven Wexler · Accepted Answer · 2013-04-29T23:59:08.793

2

The javascript is executed after the page been delivered to the client (i.e. web browser). Your razor code here is executed on the server before the page is sent to the client. Therefore, the ajax method will execute after you try to access Model.RString

To fix this you can either call CreateRString on the server, or you can set randomchars by using the response in the success callback.

To explain option 2 a bit further. You could do something like this:

//Action Method that returns data which includes your random chars
public JsonResult CreateRString()
{
    var myRandomChars = "ABCDEF";
    return new JsonResult() { Data = new { RandomChars = myRandomChars } };
}

//The ajax request will receive json created in the CreateRString method which 
//contains the RandomChars
$.ajax({ url: url, success: function (response) { 
    var randomchars = response.Data.RandomChars;
    window.location.href = response.Url; 
}, type: 'POST', dataType: 'json' });

More specifically, the razor calls @Url.Action("CreateRString", "Functions") and @(Model.RString) execute first on the server.

Then showAndroidToast executes in the client's browser when you call it.

edited Apr 29 '13 at 23:59

answered Apr 29 '13 at 23:33

Steven Wexler

16,589
8
53
80

1

Thanks for the reply, unfortunately I can't create the random string on the server since it needs to be client specific. When you say I can set `randomchars` in the success callback - how would I go about doing this? The only method I know of setting `randomchars` as `Model.RString` is by using the razor method with `@(Model.RString)` which will be executed early as you've stated. – benallansmith Apr 29 '13 at 23:45
1

If it needs to be client specific you can use a C# GUID on the server side. If you need information that you can only get in the browser, then you need to create your randomchars with javascript or by making an ajax request that passes information to the controller. But I think I may not be understanding everything your saying. – Steven Wexler Apr 29 '13 at 23:57
1

Yeah that is pretty much what I'm saying. I have it working now thanks to your insight. I create the randomchars with javascript as seen in [this question](http://stackoverflow.com/questions/1349404/generate-a-string-of-5-random-characters-in-javascript). I then passed that to the controller using ajax `data: { 'RString': RString },` allowing my controller to use the string. – benallansmith Apr 30 '13 at 00:37

Setting string in javascript function in ASP.NET MVC give NullReferenceException

1 Answers1