<= Tilbake

Sende form med Ajax

Hva er Ajax?
Ajax, eller Asynkron JavaScript og XML, er en webutviklingsteknikk for å lage interaktive nettsider. Dette gjøres ved at sidene utveksler litt og litt data med serveren i bakgrunnen, i stedet for å laste hele siden på nytt hver gang brukeren gjør en forandring. Vi bruker ofter jQuery for å skrive Ajax-requests.

Det første vi vil gjøre er å endre slik at skjemaet sendes inn med Ajax. Dette gjør vi i JavaScript som vi legger nederst i Index. Normalt vil vi legge det i en egen fil ettersom det er gunstig med tanke på caching, minification osv, men for denne oppgaven legger vi det bare nederst i Index.cshtml.

<script>
	
	var form = $("form");

	form.submit(function (e) {
		// Hindre skjemaet i å sendes inn på vanlig måte
		e.preventDefault();

		// Samle input-dataen i en string
		var input = form.serialize();

		// Hent url fra action-attributten til skjemaet
		var url = form.attr('action');

		// Post skjemaet med ajax
		$.post(url, input, function (data) {
			// Sett inn resultatet i div'en med id 'person-info'
			$('#person-info').html(data);
		});

});
</script>

For at vi skal ha et sted å plassere innholdet må vi pakke inn hele Index.cshtml i en div med en passende id: 

<div id="person-info">
    <h2>Index
	.......
</div>

I tillegg må vi flytte lastningen av jQuery øverst i _Layout.cshtml slik at det er tilgjengelig når html-en lastets. Legg den head under modernir: 

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>@ViewBag.Title - My ASP.NET Application</title>
	@Styles.Render("~/Content/css")
	@Scripts.Render("~/bundles/modernizr")
	@Scripts.Render("~/bundles/jquery")    
</head>

Vi refresher Index og sender inn skjemaet.
Det funker det, men vi får footeren to ganger. Hmmmm. Vi inspiserer person-info-diven og ser at vi har fått hele skjermbildet på nytt, inkludert menyen, stylesheets, JavaScript - alt som er i _Layout.cshtml.

For å fikse dette må vi gjøre noen grep i PersonController: 

		
[HttpPost]
public ActionResult Create(PersonModel model)
{
	if (ModelState.IsValid)
	{
		if (Request.IsAjaxRequest())
		{
			return PartialView("Show", model);
		}
		return View("Show", model);
	}


	if (Request.IsAjaxRequest())
	{
		return PartialView("Index", model);
	}

	return View("Index", model);
}
Vi bygger på nytt og ser at det funker.
Det fine nå er at vi ikke behøver å laste hele siden på nytt, så vi sparer trafikk og brukern får rask tilbakemelding. I tillegg har vi fallback hvis JavaScript ikke er på - da fungerer det som før.


<= Tilbake