Ajax with jQuery

17 May 2011 brianbruff

 

Hi all,

I’m sitting here waiting for a 50meg upload to finish,,, god my internet is slow.

May as well add a post ey Smile

So I’ll show you how you can request some JSON data from a MVC action using jQuery, You are probably familiar with AJAX.BeginForm extension from Microsoft, but lets do this the jQuery way.

  • Set up your action method to return some JSON
public ActionResult GetJson()
{
     return Json(new { Id = 1, value = "First" }, JsonRequestBehavior.AllowGet);
}
 

 

  • Set up a div to hold the json data and some jQuery to request it on document load,
    the getJSON takes the action url and when it returns it places the formatted JSON into the DIV.
    pretty simple ey..
   1:  @{
   2:      ViewBag.Title = "Home Page";    
   3:  }
   4:   
   5:   
   6:  @section head {
   7:   
   8:  }
   9:   
  10:  <h2>@ViewBag.Message</h2>
  11:   
  12:   
  13:  <DIV id=json></DIV>
  14:   
  15:   
  16:  @section footer {
  17:   
  18:  <script type="text/javascript">
  19:      $(function () {
  20:          
  21:          $.getJSON('@Url.Action("GetJson")', function (obj) {
  22:              $('#json').html(obj.Id.toString() + " : " + obj.value.toString());
  23:          });
  24:         
  25:      });
  26:  </script>
  27:   
  28:  }

The happy life of a web developer

09 May 2011 brianbruff

 

Spent some of the weekend mucking about with getting a website to go with an iPhone and WP7 app I’m developing with one mister Tomas McGuinness, the whole idea is a wonderful combination of the MS stack of love with a bit of xcode thrown in for good measure.

What better way to experience new tech than to come up with a pet project and get stuck in, so far we’ve gotten down and dirty with

  • MS Sync Framework: the backbone of our interoperability using OData and WCF Services.
  • WP7 Silverlight : The windows phone app
  • Silverlight Ria services: The rich internet application that also runs OOB (out of the browser on the desktop)
  • MVC JQuery Ajax.
  • Html 5: (low level stuff just now but really excited about this)
  • XCode: iPhone app.
  • IE9 Jump lists: quick site navigation.

    • Dusted off the old Photoshop shortcut, to modify a template and apply it to our MVC application, and it’s been a hell of a lot of fun, jQuery is pretty impressive at the visual end too, animations etc. are trivial and a joy to play with.

Site coming to an internet near you soon (if we manage to get some free time).

image

Now the techie bit, a sample how to slide in a panel/div.

@{
    ViewBag.Title1 = "Grass";
    ViewBag.Title2 = "Manager";   
}
 
@section head {    
    @*BEK: Add some animation using jquery*@
    <script>
        $(function () {            
 
            $("#wel_topd").hide();            
            $("#wel_topd").slideDown('slow', function () {
                // Animation complete.
            });
        });
    </script>
}

@section is used to inject some scripts into the head of the html page.

Then you see a little bit of jQuery that hides the div “Welcome to iFarm” in the screenshot above and slide it in from top