Using ASP.NET MVC3 w/ JQuery

JaxDUG March 2012 Using ASP.NET MVC3 w/ JQuery

Who am I • David Fekke • Web Applications and iOSApps • http://fekke.com/blog/ • JaxDUG, JSSUG, JaxJUG and JaxFusion • David Fekke L.L.C.

.NET Framework ASP.NET MVC 3

JavaScript Framework Jquery 1.7

Validation

Interactivity

AJAX

Widgets and UI

Semantic Web • Paint HTML • Style and Skin using CSS • Keep CSS at top of page • Keep Scripts at bottom of page • Update using Ajax • Use JsonActionResult

Sections • Create sections in your Layout file • Use section in head for styles • Use section at bottom for scripts • @RenderSection("StyleSection", false) • @section StyleSection in our view

<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> @RenderSection(“StyleSection”, false) <head> <body> … Rest of your html body here … @RenderSection(“Scripts”, false) <body> <html>

<appSettings> <add key="ClientValidationEnabled" value="true" /> <add key="UnobtrusiveJavaScriptEnabled" value="true" /> </appSettings>

public class People { public int ID { get; set; } [Required(ErrorMessage="Firstname is required")] [StringLength(50, ErrorMessage="Field too long")] public string FirstName { get; set; } [Required(ErrorMessage = "Lastname is required")] [StringLength(50, ErrorMessage = " Field too long ")] public string LastName { get; set; } [Required(ErrorMessage = "Email is required")] [StringLength(256, ErrorMessage = " Field too long by 256 chars")] [RegularExpression(".+\\@.+\\..+", ErrorMessage = "email not valid")] public string Email { get; set; } }

<input class="text-box single-line" data-val="true" data-val-length="Field too long" data-val-length-max="50" data-val-required="Firstname…" id="FirstName" name="FirstName" type="text" value="" />

Binding to events • Keep scripts at bottom of page • $(“#myButton”).click(fn(e)); • $(“#myButton”).bind(“click”, fn(e)); • $(“#myButton”).delegate(“td”, “click”, fn(e)); • $(“#myButton”).on(“click”, “td”, fn(e));

Please Avoid <sometagonclick=“fn();” /> $(sometag).live(fn);

Event object functions • event.preventDefault(); • event.stopPropagation(); • event.stopImmediatePropagation();

Partial Views • Use partials for Dialogs and pop-ups • $(“#myDiv”).load(“/controller/action”); • Partials are also good for Tabs

Ajax • $.ajax(); • $.getJSON(); • $.post(); • $.get(); • $.load();

Ajax function $.ajax({url:“/myController/myAction", type:“POST”, data: someVar, success:function(result){ $("#results").append(result);}});

getJSON function $.getJSON(“/mycontroller/myAction/232”, function(data) { … }); public ActionResultSampleJsonResponse(int Id) { intmynumber = providerGetNumber(Id); return Json(mynumber, JsonRequestBehavior.AllowGet); }

JQueryUI • Dragging • Widgets, Accordian, Tabs, Datepicker, Dialog, Slider and Autocomplete • Utilities Widget framework • Effects • Grid control coming

3rd Party Jquery Grids • tableSorter • jqGrid • Flexigrid • DataTables • SlickGrid • Ingrid

demo

How to Contact Me • davidfekke@gmail.com • http://www.fekke.com/blog/ • twitter.com/davidfekke

http://asp.net/mvc • Codeplex • http://weblogs.asp.net/scottgu/ • http://bit.ly/mvc-ebook • http://bit.ly/mvcmusicstore • Nuget

Using ASP.NET MVC3 w/ JQuery