ASP.NET MVC 3.0 & Ajax

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