mvc & java script
DESCRIPTION
ASP.NET MVC 3.0 & AjaxTRANSCRIPT
MVC & Javascript
Eyal VardiCEO E4D Solutions LTDMicrosoft MVP Visual C#blog: www.eVardi.com
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
Agenda
Ajax.ActionLink
Ajax.BeginForm
Ajax Options
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
Ajax.ActionLink
2
34
1
Client ControllerXmlHttp
DataAction
<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]
Ajax.ActionLink
2
34
1
Client ControllerXmlHttp
DataAction
public class AjaxController : Controller { public PartialViewResult ServerTime() { return PartialView(); }}
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
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]
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]
Action Link
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
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]
Begin Form
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
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]
Client Event Orders
Confirm
OnBegin
Async Communication
OnSuccess | OnFailure
OnComplete
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
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]
Ajax Client Events
© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]
Ajax Helper