JaxDUG March 2012

farmpaintlickInternet and Web Development

Oct 21, 2013 (4 years and 22 days ago)

75 views

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


3
rd

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