Mvc & java script

MVC & Javascript

Eyal Vardi
CEO E4D Solutions LTD
Microsoft MVP Visual C#
blog: www.eVardi.com

Agenda
 Ajax.ActionLink

 Ajax.BeginForm

 Ajax Options

© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

Ajax.ActionLink
Client Controller
XmlHttp
1 2
Action
Data
4 3

<div class="code" id="Demo1">
@Ajax.ActionLink( "Click Me (Replace)",
"ServerTime",
new AjaxOptions
{
UpdateTargetId = "Demo1",
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace
} )
</div>


Ajax.ActionLink
Client Controller
XmlHttp
1 2
Action
Data
4 3

public class AjaxController : Controller
{
public PartialViewResult ServerTime()
{
return PartialView();
}
}


Unobtrusive Ajax
"ServerTime",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace
} )
</div>

<a href="/Ajax/Ajax/ServerTime"
data-ajax ="true"
data-ajax-method ="GET"
data-ajax-mode ="replace"
data-ajax-update ="#Demo1" >Click Me (Replace)</a>
</div>

jquery.unobtrusive-ajax.js

AjaxOptions to Attributes
AjaxOptions HTML attribute
Confirm data-ajax-confirm
HttpMethod data-ajax-method
InsertionMode data-ajax-mode
LoadingElementDuration data-ajax-loading-duration
LoadingElementId data-ajax-loading
OnBegin data-ajax-begin
OnComplete data-ajax-complete
OnFailure data-ajax-failure
OnSuccess data-ajax-success
UpdateTargetId data-ajax-update
Url data-ajax-url


Action Link


Ajax.BeginForm
@using ( Ajax.BeginForm( "Search",new AjaxOptions {
UpdateTargetId = "Result",
LoadingElementId = "Loading" } ))
{
<input type="text" name="query" />
<input type="submit" value="Search" />

<div id="Loading" > Loading... </div>
}
<ul id="Result" />

<form action="/Ajax/Ajax/Search" id="form0" method="post"
data-ajax ="true"
data-ajax-loading="#Loading"
data-ajax-mode ="replace"
data-ajax-update ="#Result" >
. . .
</form>


Begin Form


Ajax Options ( Events )
"ServerTime",
new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
Confirm = "R-U-Sure?",
OnSuccess = "alert('OnSuccess')",
OnBegin = "alert('OnBegin')",
OnComplete = "alert('OnComplete')",
OnFailure = "alert('OnFailure')"
} )
</div>


Client Event Orders
 Confirm

 OnBegin

 Async Communication

 OnSuccess | OnFailure

 OnComplete


Client Ajax Context
 get_data()

 get_insertionMode()

 get_request()

 get_response()

 get_updateTarget()


Ajax Client Events


Ajax Helper


Mvc & java script

More Related Content

What's hot

Similar to Mvc & java script

More from Eyal Vardi

Recently uploaded

Mvc & java script