Embed Size (px)
DESCRIPTION
JaxDUG March 2012. Using ASP.NET MVC3 w/ JQuery. Who am I. David Fekke Web Applications and iOS Apps 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. - PowerPoint PPT Presentation
Citation preview
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
