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);
    });
});

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.

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);
        }
    }

Answer 1

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();
             }
         );
    });
});

Answer 2

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)
    });
});