Mvc & java script

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


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>


Ajax.ActionLink

2

34

1

Client ControllerXmlHttp

DataAction

public class AjaxController : Controller { public PartialViewResult ServerTime() { return PartialView(); }}


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


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


Action Link


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>


Begin Form


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>


Client Event Orders

Confirm

OnBegin

Async Communication

OnSuccess | OnFailure

OnComplete


Client Ajax Context

get_data()

get_insertionMode()

get_request()

get_response()

get_updateTarget()


Ajax Client Events


Ajax Helper

Mvc & java script

Education

Transcript of Mvc & java script