jaxdug march 2012. who am i david fekke web applications and ios apps jaxdug, jssug, jaxjug...
TRANSCRIPT
USING ASP.NET MVC3 W/ JQUERY
JaxDUG March 2012
Who am I
David Fekke Web Applications and iOS Apps http://fekke.com/blog/ JaxDUG, JSSUG, JaxJUG and
JaxFusion David Fekke L.L.C.
ASP.NET MVC 3.NET Framework
JQUERY 1.7JavaScript Framework
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 Json ActionResult
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));
<sometag onclick=“fn();” />
PLEASE AVOID
$(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 ActionResult SampleJsonResponse(int Id){ int mynumber = 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 [email protected] 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