I am developing an ASP.NET 4.0 (.NET 4.5) web application with MVC 5 / Razor 3, Bootstrap 3.x. In this particular controller I make use of the Google Maps API v3.
Basically among many other things I have two textboxes, one for Latitude the other for Longitude. Then I also have a Google Map with ONE marker.
When the user right clicks on a spot I want the current click Lat/Long to be set for the marker and update the Lat/Long textboxes and center the map there.
When the user drags the marker to a new location the same thing should happen, both textboxes get updated with the new marker location.
Other than having added the Google Map, the rest of the form is exactly the same as the Visual Studio "Add View with EF CRUD" template.
Now the problem... The textbox control code created by the VS template does not let you set a control ID that I can use with the jQuery/Javascript code to update the textboxes but all the map behaviour (marker replacement, centering, etc.) works:
@Html.EditorFor(model => model.longitude, new { htmlAttributes = new { @class = "form-control" } })
Somewhere in this site someone suggested another person to use TextBoxFor instead of EditorFor which appears to let you specify an ID for the textboxes. However, that renders both textboxes in standard form which is totally discordant with the look of the other textboxes.
So I then opted for another suggestion to replace that code for this:
@Html.EditorFor(model => model.latitude, null, "mylatitude", new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.latitude, "", new { @class = "text-danger" })
@Html.EditorFor(model => model.latitude, null, "mylongitude", new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.longitude, "", new { @class = "text-danger" })
With this form the textboxes look like the others AND when I move the marker or right click the latitude/longitude textboxes get updated with the corresponding coordinates because I can address them from JavaScript with the IDs I stated in the EditorFor.
However, when I submit the form neither the latitude/longitude values on the textboxes get filled on the model, the other model values are properly filled. If I revert back to the original EditorFor -where I cannot specify an ID- then the values are submitted properly.
So there is something weird in that the textboxes get updated (proper ID) but somehow the actual textbox values filled in via Javascript are not filled into the model.
When you use the overload
@Html.EditorFor(model => model.latitude, null, "mylatitude", ..
The 3rd parameter is setting the name attribute to mylatitude which does not match the property name latitude so the DefaultModelBinder cannot match up the values.
Why can't you use the ID generated @Html.EditorFor(model => model.longitude, .. which will be "longitude", or use TextBoxFor and add the relevant class names so that it is styled to look the same as the output generated by @Html.EditorFor