[RESOLVED]Razor syntax with Google maps API Javascript error?

In my MVC4 web application, i’m passing the values from controller to the razor view.Values passing properly.Issue i’m facing is in my Google maps javascript section i can’t put razor values with javascript.Actually i’m passing Controller’s values to a Javascript
array.Following is the code section which gives me an error.

var locations = [@foreach (var item in Model){ 
['modelItem => item.locationname','@modelItem => item.latitude','@modelItem => item.longtitude'],
}];

Don’t you just mean this?

var locations = [@foreach (var item in Model){ 
['@item.locationname','@item.latitude','@item.longtitude'],
}];

I tried this way also.It’s not working.

Define "not working".  Do you get compile errors?  Runtime errors?  If you look at the page source is the javascript being rendered as you would expect?  Is it the javascript that isn’t working rather than the razor code?

I’m getting a compilation error.Following is the error.

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS1012: Too many characters in character literal

Source Error:


Line 15: 
Line 16:             var locations = [@foreach (var item in Model){ 
Line 17:                                  ['@item.hospital_name','@item.latitude','@item.longtitude'],
Line 18:                              }];

var locations = [@foreach (var item in Model){
                <text>@Html.Raw(string.Format("['{0}','{1}','{2}'],", item.hospital_name, item.latitude, item.longtitude))</text>
    }];

this is probably simpler though

var locations = [@foreach (var item in Model){
                <text>['@item.hospital_name','@item.latitude','@item.longtitude'],</text>
    }];

 use @html.raw(json.encode())  method to access model properties in javascript

var locations = [@foreach (var item in Model){ 
var itemjson=@Html.Raw(Json.Encode(item )
['modelItem =>itemjson.locationname','@modelItem =>itemjson.latitude','@modelItem =>itemjson.longtitude'], }];

Great!! It works now.I saw this <text> tag thing on internet when i’m searching this on internet.But didn’t found a proper example how to use it.So from this i could easily solve the issue.Thank you.

Wow this is also a great solution.Thank you too.I marked your reply also as an answer.I want to clarify something.Why should i use json here?Because i don’t want to pass the values elsewhere.Just need to add the values to a javascript array.Bit confused
on that.But i know this is also a solution because when i’m checking on this issue prior to post it here i saw these type of solutions too.

You would use json if you were manipulating the property values via javascript and wanted to set a javascript variable to contain a json object that represents your .net object.  You aren’t building this array via client-side js though so you don’t need
to, and the posted example doesn’t work anyway if you try it.

OK thanks.And i did the way that you had mentioned.Although the errors went,now map is not loading in the browser.I tried with @modelItem => item.locationname name instead of @item.locationname.Then again gives the previous error.Values are coming from the
controller to the view.I checked that by putting @Html.DisplayFor(modelItem => item.locationname).So there’s a javascript issue.

Why are you using @modelItem=>item.locationname?  It isn’t required, just use @item.locationname.  "=>" is a lambda expression and is used by functions that accept them such as Html.DisplayFor.  When you’re building your js array you’re not using helpers,
just writing raw html to the stream.

If the map isn’t loading in the browser you’ll need to diagnose that as a separate issue.  Try using a hard-coded array just to get your maps working as that will eliminate any change that it is your razor code giving you problems.  Once you have the code
working with a hard-coded array, look to generate that array from your data using the razor syntax.

OK.Thanks for the explanation :)

Hi,i checked the source code of the webpage.Locations are loading properly into javascript.So the confusing thing is same code is working on PHP.I checked it.Exact same code.HTML,JS all are same.But in ASP not showing it.Why is that?I’m bit confused here.Is
there anything else to do in ASP when loading javascript?I’m new to MVC4 and Razor syntaxes that’s why i’m asking :)

Server technology makes no difference to client-side technology.  There will be a difference somewhere you just haven’t spotted.

Yeah i know that.But i was thought is there any specific way to load javascript in MVC4 with Razor.OK then i’ll check it again thoroughly.

Leave a Reply