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. Te...
Ajax.ActionLink        Client                                                                   Controller                ...
Ajax.ActionLink        Client                                                                   Controller                ...
Unobtrusive Ajax        <div class="code" id="Demo1">        @Ajax.ActionLink( "Click Me (Replace)",                      ...
AjaxOptions to Attributes      AjaxOptions                                                  HTML attribute      Confirm   ...
Action Link© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
Ajax.BeginForm      @using ( Ajax.BeginForm( "Search",new AjaxOptions {                      UpdateTargetId   = "Result", ...
Begin Form© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
Ajax Options ( Events )        <div class="code" id="Demo1">        @Ajax.ActionLink( "Click Me (Replace)",               ...
Client Event Orders           Confirm           OnBegin           Async Communication           OnSuccess | OnFailure ...
Client Ajax Context           get_data()           get_insertionMode()           get_request()           get_response(...
Ajax Client Events© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
Ajax Helper© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
Upcoming SlideShare
Loading in …5
×

Mvc & java script

3,966 views

Published on

ASP.NET MVC 3.0 & Ajax

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,966
On SlideShare
0
From Embeds
0
Number of Embeds
1,998
Actions
Shares
0
Downloads
74
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Mvc & java script

  1. 1. MVC & Javascript Eyal Vardi CEO E4D Solutions LTD Microsoft MVP Visual C# blog: www.eVardi.com
  2. 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. 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. 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. 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. 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. 7. Action Link© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  8. 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. 9. Begin Form© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  10. 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. 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. 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. 13. Ajax Client Events© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il
  14. 14. Ajax Helper© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: Eyal@E4D.co.il

×