Mvc & java script
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,070
On Slideshare
2,123
From Embeds
1,947
Number of Embeds
13

Actions

Shares
Downloads
60
Comments
0
Likes
2

Embeds 1,947

http://blogs.microsoft.co.il 1,336
http://eyalvardi.wordpress.com 388
http://www.e4d.co.il 140
http://feeds2.feedburner.com 36
http://e4d.co.il 20
http://beta.blogs.microsoft.co.il 9
http://localhost 8
http://www.linkedin.com 4
http://translate.googleusercontent.com 2
http://207.46.192.232 1
http://www.directrss.co.il 1
http://feeds.feedburner.com 1
https://www.facebook.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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