Using ASP.NET MVC3 w/ JQuery
advertisement
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.
.NET Framework
JavaScript Framework
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();” />
$(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
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
