Mvc & java script

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

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

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

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

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

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

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

http://blogs.microsoft.co.il	1237
http://eyalvardi.wordpress.com	312
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://translate.googleusercontent.com	2
http://207.46.192.232	1
http://www.directrss.co.il	1
http://feeds.feedburner.com	1

Mvc & java script

by Eyal Vardi on Nov 17, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

11 Embeds 1,767

Statistics

Mvc & java script — Presentation Transcript