I want to learn a bit more about JQuery serialization so I worked though this working example.

I got the ASP.NET Web Service solution up and running no problem.

I then ported it over to a MVC solution.

The first thing I did was to set up the controller and the routing to handle incoming requests – basically replacing the web service from the original solution:

Here is the controller:

    public class WeatherController : Controller

    {

        private readonly static string FindNearByWeatherUrl =

        "http://ws.geonames.org/findNearByWeatherJSON?lat={0}&lng={1}&username={2}";

        public JsonResult GetWeatherByLocation(double latitude, double longitude)

        {

            JsonResult jsonResponse = new JsonResult();

            string formattedUri = String.Format(CultureInfo.InvariantCulture, FindNearByWeatherUrl, latitude, longitude, "fatbgr");

            Uri serviceUri = new Uri(formattedUri, UriKind.Absolute);

            HttpWebRequest httpWebRequest = WebRequest.Create(serviceUri) as HttpWebRequest;

            if (httpWebRequest != null)

            {

                HttpWebResponse httpWebResponse = (HttpWebResponse)httpWebRequest.GetResponse();

                string readerResponse = string.Empty;

                using (StreamReader streamReader = new StreamReader(httpWebResponse.GetResponseStream()))

                {

                    readerResponse = streamReader.ReadToEnd();

                }

                jsonResponse.Data = readerResponse;

            }

            return jsonResponse;

        }

    }

Here is the routing:

            routes.MapRoute(

                "WeatherRoute",

                "Weather/GetWeatherByLocation/{latitude}/{longitude}",

                new { controller = "Weather", action = "GetWeatherByLocation"}

            );

And here is the javascript that I use to call the controller:

        function CallService() {

            var latitude = "35.797153";

            var longitude = "-78.886546";

            var postData = { latitude: latitude, longitude: longitude };

            $.ajax({

                type: "POST",

                url: "/Weather/GetWeatherByLocation",

                data: postData,

                dataType: "json",

                success: function (msg) {

                    GetWeather_Success(msg);

                }

            });

        }

Everything is working fine in terms of the Json exchange – Wahoo!

However, I was blindsided by the Jquery selectors.  When I replace the hard-coded values for latitude and longitude with some JQuery, the variables are null:

            var latitude = $("txtLatitude").val;

            var longitude = $("txtLongitude").val;

Here is how the controls are created on the form

    <p>

        <input type="text" id="txtLatitude"  value = "35.797153" />

        <input type="text" id="txtLongitude" value = "-78.886546" />

        <input type= "button" value="Get Weather Info" onclick="CallService();" />

    </p>

Note that I also try and stuff the result set into the div – but that also is not being recognized

$("#divResult").html = e.toString();

I am at a loss – why aren’t the JQuery selectors working???

Following up on my April 13^th post, I have the drag and drop working between the 2 tables.  I now want to post the data back to the server for processing

Posting to a server method like so:

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Index(string regionId)

        {

            //Do Something Useful Here

            return View();

        }

(I know that the return will be JSON, not an ActionResult, but one thing at a time)

I set up a simple AJAX call in JQuery like so:

$.post("Region/Index",{regionId: "Hello"});

Things worked great:

I then tried to change the parameter from a single string to an array of strings

        [AcceptVerbs(HttpVerbs.Post)]

        public ActionResult Index(List<String> regionIds)

        {

            //Do Something Useful Here

            return View();

        }

And I changed the AJAX call to this:

            var regionArray = new Array();

            $("#destinationTable tr:gt(0)").each(function () {

                var regionId = $(this).find("#regionId").html();

                regionArray.push(regionId);

            });

            var postData = { regionIds: regionArray };

            $.post("Region/Index", postData);

When looking at Fiddler, data is crossing over the wire:

With the web form view like so:

But the MVC function was not recognizing the input – the paramters were null.  After many hours of searching and trial-by-error, I found this post

Once I changed the $post to $.ajax and specified the traditional attribute, the parameters were filled fine.

Note that

jQuery.ajaxSetting.traditional = true; 

does not work – traditional is not a property of ajaxSetting