The document discusses Microsoft MVC and JavaScript tools for building asynchronous web applications. It covers the Ajax.ActionLink and Ajax.BeginForm helpers for making AJAX calls from links and forms, the options for configuring AJAX behavior like events, and how the helpers generate HTML attributes for the unobtrusive AJAX script to handle requests.

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

2. Agenda
 Ajax.ActionLink
 Ajax.BeginForm
 Ajax Options
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

3. 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>
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

4. Ajax.ActionLink
Client Controller
XmlHttp
1 2
Action
Data
4 3
public class AjaxController : Controller
{
public PartialViewResult ServerTime()
{
return PartialView();
}
}
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

5. Unobtrusive Ajax
<div class="code" id="Demo1">
@Ajax.ActionLink( "Click Me (Replace)",
"ServerTime",
new AjaxOptions
{
UpdateTargetId = "Demo1",
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace
} )
</div>
<div class="code" id="Demo1">
<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
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

6. 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
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

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

8. 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>
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

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

10. Ajax Options ( Events )
<div class="code" id="Demo1">
@Ajax.ActionLink( "Click Me (Replace)",
"ServerTime",
new AjaxOptions
{
UpdateTargetId = "Demo1",
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
Confirm = "R-U-Sure?",
OnSuccess = "alert('OnSuccess')",
OnBegin = "alert('OnBegin')",
OnComplete = "alert('OnComplete')",
OnFailure = "alert('OnFailure')"
} )
</div>
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

11. Client Event Orders
 Confirm
 OnBegin
 Async Communication
 OnSuccess | OnFailure
 OnComplete
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

12. Client Ajax Context
 get_data()
 get_insertionMode()
 get_request()
 get_response()
 get_updateTarget()
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

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

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