Why Hidden Fields value are not posted in mvc 4?

Question

In my MVC-4 application i take location from geolocation using javaScript and set latitude, longiture and accuracy in Hidden Fields. Values are set correctly in Hidden fields but during PostBack it shows null.

Here is my code :

Razor :

@using (Html.BeginForm()
{
     @Html.HiddenFor(x => x.CurrentLocation.Latitude)
     @Html.HiddenFor(x => x.CurrentLocation.Longitude)
     @Html.HiddenFor(x => x.CurrentLocation.Accuracy)
     <input type="submit" name="command" value="Start" />
}

JavaScript :

function SetLocation(position) {
    console.log("{0},{1},{2}".format(position.coords.latitude, position.coords.longitude, position.coords.accuracy));
    $("#CurrentLocation_Latitude").val(position.coords.latitude);
    $("#CurrentLocation_Longitude").val(position.coords.longitude);
    $("#CurrentLocation_Accuracy").val(position.coords.accuracy);
}

$(document).ready(function () {
    $('form').submit(function () {
        LocationService.getCurrentLocation(SetLocation);
    });
});

In Html Inside My Controller

But if I write this code then it`s work

  $(document).ready(function () {
    $('form').submit(function () {
         $("#CurrentLocation_Latitude").val(100); 
        $("#CurrentLocation_Longitude").val(100);
    });
});

This send proper value to the controller.

enter image description here

I don`t understand why this is happening.

Thank`s in advance.

Update 1 :

Model :

[ComplexType]
public class Location
{
    public Location()
    {

    }
    public Location(double latitude, double longiture, double? accuracy = null)
    {
        Latitude = latitude;
        Longitude = longiture;
        if (accuracy.HasValue)
            Accuracy = accuracy.Value;
    }

    [DisplayName("Latitude : ")]
    public double? Latitude { get; set; }
    [DisplayName("Longitude : ")]
    public double? Longitude { get; set; }
    public double? Accuracy { get; set; }
}


public class ServiceInfoEditMetadata : ServiceInfo
 {
    public Int64 MachineId { get; set; }

    [DisplayName("Client Name :")]
    public string ClientName { get; set; }

    [DisplayName("Site Name :")]
    public string SiteName { get; set; }
    public Location CurrentLocation { get; set; }

    [DisplayName("Client Username :")]
    public string ClientUsername { get; set; }

    [DisplayName("Client Password :")]
    public string ClientPassword { get; set; }
}

Controller :

 public ActionResult Edit(Int64 id, ServiceInfoEditMetadata serviceInfoEditMetadata, string command)
    {
        try
        {
            switch (command)
            {
                case "Add":
                    AddMachineToServiceInfoDetails(serviceInfoEditMetadata);
                    return View(serviceInfoEditMetadata);
                case "Start":
                    _serviceInfoService.StartService(serviceInfoEditMetadata, User.Identity.Name);
                    return RedirectToAction("Edit", serviceInfoEditMetadata.Id);
                case "Update":
                    if (!ModelState.IsValid) return View(serviceInfoEditMetadata);
                    _serviceInfoService.UpdateServiceInfo(serviceInfoEditMetadata, User.Identity.Name);
                    return RedirectToAction("List");
            }
            return View(serviceInfoEditMetadata);
        }
        catch (Exception ex)
        {
            ModelState.AddModelError("ServiceInfoEditError", ex.Message);
            return View(serviceInfoEditMetadata);
        }
    }

Could you show the controller where your data are posted and your data model ? — Aymeric, Dec 03 '13 at 08:01
The binding must work if you have tried another test solution so add some alert statements around LocationService.getCurrentLocation(SetLocation), especially the SetLocation method to determine if the SetLocation position parameter is valid. — David, Dec 03 '13 at 08:29
I added a console.log in SetLocation method and its print correct result. @David — Hasanuzzaman, Dec 03 '13 at 08:32
There is probably a culture setting missmatch between your client and server. What is your sever culture? I guess it has a culcutre where the decimal separator is comma instead of a dot. So If you post the values: `23,70922` it should work. — nemesv, Dec 03 '13 at 08:36
check this http://stackoverflow.com/questions/6520005/problem-with-double-values-binding — qwr, Dec 03 '13 at 08:36
@Hasan009 add doublemodelBinder from the above link i sent and see if your double type values binded correctly — qwr, Dec 03 '13 at 08:42
@qwr default model works fine for me. Thank your for your advice. — Hasanuzzaman, Dec 03 '13 at 09:15

jbl · Accepted Answer · 2013-12-03T10:13:08.940

2

I assume your LocationService.getCurrentLocation is asynchronous. You should then delay form submission until it completes.

maybe you can try :

$(document).ready(function () {
    var locationSet =false;
    $('form').submit(function (event) {
        if(!locationSet)
             event.preventDefault();
        LocationService.getCurrentLocation(
            function(position){
                  SetLocation(position);
                  locationSet= true;
                  $('form').submit();
             }
         );
    });
});

edited Dec 03 '13 at 10:13

answered Dec 03 '13 at 08:37

jbl

15,179
3
34
101

your are right. This Problem is occurs for asynchronous call. But if I use your code then it does not submit my form. If I remove event.preventDefault(); then submit my form but it submit 2 times. Can you tell how to prevent this. – Hasanuzzaman Dec 03 '13 at 09:16
1

I Change it like this and it`s work`s for me. $(document).ready(function () { $('form').on('submit', function (e) { e.preventDefault(); var x = this; LocationService.getCurrentLocation( function (position) { SetLocation(position); x.submit(); } ); }); }); – Hasanuzzaman Dec 03 '13 at 10:01
1

@Hasan009 thx for the follow-up. I edited my answer. Feel free to edit it to add your own version – jbl Dec 03 '13 at 10:15

score 0 · Answer 2 · answered Dec 03 '13 at 08:40

There could be more causes, because the mechanism (e.g mvc binding, ajax) of passing the fields' data is little complex.

I see that in the following js code you're passing handler to function 'SetLocation'. Try to invoke the function:

$(document).ready(function () {
    $('form').submit(function () {
        LocationService.getCurrentLocation(SetLocation(position));// 'SetLocation' with (position)
    });
});

Why Hidden Fields value are not posted in mvc 4?

2 Answers2