Aby używać AJAXA w MVC należy wywołać poniższe biblioteki JS znajdziemy je w folderze Scripts naszego projektu

1
2
3
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

Teraz możemy przystąpić do generowania linku naszej akcji, wykorzystamy do tego nowy silnik generowania widoków „Razor” dostępny od MVC3

1
2
3
4
5
6
7
@Ajax.ActionLink("Kliknij aby wykonać akcję",
"NazwaAkcji",
new AjaxOptions{
UpdateTargetId = "idElementu",
HttpMethod = "Get", //default
InsertionMode = InsertionMode.Replace,
})

Przydatne opcje AjaxOptions
OnBegin – Gets or sets the name of the JavaScript function to call immediately before the page is updated.
OnComplete – Gets or sets the JavaScript function to call when response data has been instantiated but before the page is updated.
OnFailure – Gets or sets the JavaScript function to call if the page update fails.
OnSuccess – Gets or sets the JavaScript function to call after the page is successfully updated.


Wyświetlenie ikony ładowania oraz potwierdzenie chęci wykonania akcji:

1
2
3
4
5
6
7
new AjaxOptions{
LoadingElementId = "Loading", //
Confirm = "Jesteś pewny?", //
UpdateTargetId = "idElementu",
})
}
<div id="Loading" style="display: none;"><img src="http:\" alt="Wczytywanie" /></div>

CONTOLLER:
Prosty kontroller który zwróci do widoku datę która następnie za pomocą Ajaxa zostanie umieszczona w elemencie podanym w UpdateTargetId

1
2
3
4
public string NazwaAkcji()
{
return DateTime.Now.ToLongDateString();
}