ASP.NET JSON WebService Port to MVC Controller

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???

 

Advertisements

Posting JSON Arrays to a MVC Controller using JQuery 1.4.1

Following up on my April 13th 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

VS2010, JQuery and Intellisense

I installed VS2010 this week.  I am not sure what took longer – installing 2010 or uninstalling 2008.  In any event, I am working on a JQuery project.  I was all hot to get JQuery intellisense on a Hello World MVC2 Project.  I did file-> New , carved out a Script block, and went to town:

 

 I was immediately confused -> only Javascript intellise.  After poking at the problem with Tinu for a couple of minutes, we realized that we need to add in the JQuery Script to get its intellisense

Did the trick

Another problem with JQuery was that some of the selectors were not working.  Consider this code block:

        $(function () {

            $("#sourceTable tr:gt(0)").draggable({

                revert: ‘invalid’,

                cursor: ‘move’

            });

 

When I fired up IE to see this working, nothing was draggable.  I then changed the selector to this:

$("#sourceTable").draggable({

And I had draggability (warning: new word alert) in IE.  After banging my head for an hour or so, I accidently clicked on compatibility mode on IE.  Low and Behold – it worked!  Lesson to the wise – if something doesn’t work as expected, blame IE….

Finally, just so you know – forgot to reference Ajax library, the message box you get is o so helpful:

Finally, really, is a quick reminder to myself about Fiddler:

 

 

JQuery and Caching

I ran into a problem this morning that is turning into something that is more than a little annoying.  I am cooking up some JQuery to allow drag and drop between two data tables.  Building slowly, I wrote the following JQuery: 

 

    <script type="text/javascript">

        $(function() {

            $("#sourceTable").draggable();

            $("#destinationTable").draggable();

        }

 

        );

      </script>

I then added an additional qualifier on the source table to only select the data rows

$("#sourceTable tr:gt(1)").draggable();

The problem is that it is not working.  Any other qualifier than TR does work – which makes no sense.

I then took these methods and put them into a seperate file.  I first tested with an alert – which worked fine

function jamie() {

    alert("setupDragDrop called");

}

However, once I renamed the target function to something more meaningful, it failed

function setupDragDrop() {

    alert("setupDragDrop called");

}

And the reason why is that I had a function with the same name (but different signature) created earlier.  The kicker is that the original function is commented out – but the browser is still calling it. 

I recompiled the solution and stopped the instance of Cassani running, to no avail.  I am wondering if I have to clear my IE cache.  If so, this is nutz.  There is no way I should need to go though all of those steps just to update a java script file.

–As an update, I noticed that the relative path in debugging mode was localhost\scripts\JQueryExtender.js.  I deleted all of the debugging symbols out of the /bin folder (both working and test) and it stuck.  I wonder why the debug symbols were not getting updated even when I recompiled…

 

 

CI and MVC

I have been getting up a nights a lot lately b/c of some diabetes issues – so I have not been coding in the AM too much.  I did finish Continuous Integration over the weekend
I liked the read and some really good pointers.  I am going to install CruseControl (but no lava lamp) on the swim team server soon.
 
Speaking of which, I did 2 things for the site recently.  First, I implemented Blog Engine into the site.  It was "fairly" painless.  The biggest lesson learned is that BE only works as a Website.  When I tried to put it as a subdirectory in my web project, things fell apart – there are too many absolute paths, config changes, and the like.  After about 4 hours, I gave up on the conversion and just gave it its own subdomain.
 
In addition, I also started implementing the Volunteer section in the site.  The biggest issue (so far) with MVC was routing – I spent a bunch of time with a 404 error to come to find out that the routing tables were too specific.  A word to the wise, check the convention of the Controller and then check the routes for all 404 errors.
 
Finally, did you see the redirect header on this Blog? 
I see FakeHandlerPage.aspx.  Really Microsoft?  You couldn’t come up with something better in the age of XSS?