AJAX i MVC med JSON og jQuery

Hvis du søger hjælp til at komme igang så se længere nede.

Jeg har igennem noget tid gerne ville effektificere mine webapps.

Hidtil har jeg kun rodet lidt med webservices (SOAP) som virker rimeligt nemt at arbejde med og ligetil, men har jo så hørt at WCF services er klassen "nye" dreng. Ham den smarte der er bedre til det hele, men desværre ikke noget jeg har haft muligheden for at lege med endnu.
Det er hvad jeg har arbejdet med som middleware-lag der skal transportere data til min frontend, men er jo for nyligt begyndt at se nærmere på ASP.NET MVC 4 via Visual Studio 11 Beta.

Jeg har igennem lang tid gerne ville lære at lave AJAX kald via JSON for at effektificere de tunge SOAP-kald, men har så for kort tid siden fundet ud af at jeg fra mit view kan lave et AJAX kald til min controller og levere JSON til mit view og lade jQuery håndtere det.
Da jeg indtil videre har brugt ASP.NET MVC 4 fra Visual Studio 11 beta forsøgte jeg mig længe og hårdt at få den til at virke, men kunne ikke.
Da jeg så til sidst fik hjælp fra udvikleren.dk prøvede jeg det samme af i ASP.NET MVC 3 og her virkede det så endeligt.
Således vil jeg kunne få en responsive-web oplevelse på min side, og kunne lave alting meget smartere med jQuery og levere data meget mere effektivt og langt nemmere at vedligeholde da jeg ikke skal bruge en webservice og min web applikation og skulle opdatere begge dele når data ændrer sig og datastrukturer gør det samme.
Så det er meget federe på denne måde da tiden i datatransport er langt mindre, giver mig flere muligheder i usability og så er det nemmere at vedligeholde det hele.

Det er faktisk meget nemt og jeg vil lave et lille eksempel der gennemgår det.

For at gennemgå hvordan det foregår så vil jeg gennemgå det overordnet hvordan vi vil gøre.
På vores side (view) har vi en knap der skal sætte vores AJAX request igang, som skal aktivere noget en action i vores Controller og som vil udføre det ønskede arbejde - som fx. at hente flere data - for så at pakke dem ind som JSON og levere tilbage til vores side (view) og så præsentere dem.
Alt dette vil blive gjort i jQuery i stedet for at gøre det via ASP.NET-måden fordi jeg mener det er noget der har flere og andre muligheder og som mange ofte vil bruge.

1. Lave en knap på vores side
2. Lave en div der kan vise vores data
3. Huske at indsætte jQuery reference.
4. Sørge for at jQuery vil lave et AJAX-kald når vi trykker på knappen
5. Lave den action der vil udføre vores arbejde i vores Controller
6. Ændre vores jQuery AJAX-kald til at bruge den action lavet i punkt 5.
7. Modtage data og gøre noget ved dem (i dette tilfælde vise dem i vores div).

1. Lave en knap på vores sides
<input type="button" id="ClickMe" value="Click this button"/>
2. Lave en div der kan vise vores data
<div id="HereIsResult">Result goes here</div>
3. Huske at indsætte jQuery reference.
<script src="../../Scripts/jquery-1.5.1.js" type="text/javascript"></script>Her kan det faktisk være en fordel i produktionsøjemed at bruge et distributionsnetværk istedet for at have din egen udgave liggende på din server. En fordel er at en webbrowser kun kan hente 6 ting af gangen fra samme domæne, og ved at denne ikke vil ligge på din egen side/server vil du sørge for at din side potentielt kan hentes hurtigere da denne resource ikke vil være fra dit eget domæne og browseren kan dermed bruge tid på at hente data fra forskellige steder.

4. Sørge for at jQuery vil lave et AJAX-kald når vi trykker på knappen
succesCallback er i denne forbindelse den metode der vil blive kaldt ved succes.
<script>

$("#ClickMe").click(function ()
    {
        $.getJSON("/Controller/Action", data, succesCallback);
    }
);

</script>
5. Lave den action der vil udføre vores arbejde i vores Controller (her kaldet TestController)
public JsonResult GetJsonResult()
        {
            List<object> jsonDict = new List<object>();
            var testing = new {Name = "HelloWorld"};
            jsonDict.Add(testing);
            testing = new {Name = "Second string"};
            jsonDict.Add(testing);
            var testing2 = new { Name = "Have you seen it works with more than one attribute?", Shakes = "22" };
            jsonDict.Add(testing2);
            testing = new { Name = "Whats up?" };
            jsonDict.Add(testing);
            return Json(jsonDict, JsonRequestBehavior.AllowGet);
        }

6. Ændre vores jQuery AJAX-kald til at bruge den action lavet i punkt 5.
Her skal Controller ændres til Test (fordi den hedder TestController) og
vores Action skal ændres til GetJsonResult som den action vi lige har lavet.

<script>

//lav metoden til når der trykkes på knappen ClickMe
$("#ClickMe").click(function ()
{
    $.getJSON("/Test/GetJsonResult", null, function (data)
    {
        alert("data recieved");
    });
});
</script>7. Modtage data og gøre noget ved dem (i dette tilfælde vise dem i vores div).
<script>

//lav metoden til når der trykkes på knappen ClickMe
$("#ClickMe").click(function ()
{
      $.getJSON("/Test/GetJsonResult", null, function (data)
      {     
            alert("data recieved");
            for (var i = 0; i < data.length; i++)
            {
                  var myObj = data[i];
                  alert("Name: " + myObj.Name);
                  //Lav en grafisk representation der hurtigt viser det er udført korrekt
                  $("#HereIsResult").css("background-color", "red");
                  $("#HereIsResult").text("name: " + myObj.Name);
            }
      });
});
< /script>
Og således vil du kunne se at du vil kunne lave et AJAX request imod en action i vores view der udfører noget logik og sørger for nogle data, for så at lave dem om til JSON og sende dem til vores view som modtager og håndterer dem.

Jeg ville idag forsøge at arbejde videre med dem på min anden maskine, men af en eller anden grund har den ikke ville installere MVC 3 i Visual Studio 2010 når man har Visual Studio 11 Beta installeret så nu prøver jeg at afinstallere dem begge komplet og begynde forfra og så prøve at få det til at virke så jeg ikke kun kan udvikle på min stationære, men også den bærbare.
Så der vil jeg prøve at lave nogle lidt nye sjove forsøg med at videreudvikle lidt eksperimenter.