Mvc & java script
Download as PPTX, PDF2 likes1,218 views
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.
Mvc & java script
- 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: [email protected]
- 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: [email protected]
- 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: [email protected]
- 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: [email protected]
- 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: [email protected]
- 7. Action Link © 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
- 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: [email protected]
- 9. Begin Form © 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
- 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: [email protected]
- 11. Client Event Orders Confirm OnBegin Async Communication OnSuccess | OnFailure OnComplete © 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
- 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: [email protected]
- 13. Ajax Client Events © 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
- 14. Ajax Helper © 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]