# Integrer Ajax à un projet MVC

## Controller

Le controlleur doit fournir deux méthodes:

Les exemples ci dessous utilient un modele `PersonModel`, avec deux propriétés: `name` (string) et `DateTime` (DateTime) 

### GET 

Une methode GET qui retourne la view

### POST

Une methode POST qui retourne un `JsonResult`

### Exemple

	public class HomeController : Controller
	{
		// GET: Home
		public ActionResult Index()
		{
			return View();
		}
	 
		[HttpPost]
		public JsonResult AjaxMethod(string name)
		{
			PersonModel person = new PersonModel
			{
				Name = name,
				DateTime = DateTime.Now.ToString()
			};
			return Json(person);
		}
	}

## View 

la view contient ici une textbox et un bouton.
On assigne à la vue un event hadler jquery qui appellera la méthode du controlleur via AJAX. 

### Exemple

	@model jQuery_AJAX_MVC.Models.PersonModel
	 
	@{
		Layout = null;
	}
	 
	<!DOCTYPE html>
	 
	<html>
	<head>
		<meta name="viewport" content="width=device-width"/>
		<title>Index</title>
	</head>
	<body>
		<input type="text" id="txtName"/>
		<input type="button" id="btnGet" value="Get Current Time"/>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">
			$(function () {
				$("#btnGet").click(function () {
					$.ajax({
						type: "POST", // => Request Type
						url: "/Home/AjaxMethod", // => Controlleur
						data: '{name: "' + $("#txtName").val() + '" }', // => Paramètre et valeur
						contentType: "application/json; charset=utf-8",
						dataType: "json",
						success: function (response) {
							alert("Hello: " + response.Name + " .\nCurrent Date and Time: " + response.DateTime); // => Méthode si succès
						},
						failure: function (response) {
							alert(response.responseText); // => Méthode si echec
						},
						error: function (response) {
							alert(response.responseText); // => Méthode si erreur
						}
					});
				});
			});
		</script>
	</body>
	</html>
