Endlich: JSON-Binding in ASP.NET MVC 3 zum Senden von Objekten via AJAX

Das Erzeugen von Ergebnissen in Form von JSON-Strings war bereits vor Version 3 möglich. Allerdings fehlte es an der Möglichkeit, einen über HTTP übertragenen JSON-String an Eingabeparameter zu binden. Für solche Szenarien musste selber Hand angelegt oder auf andere Frameworks, wie WCF, ausgewichen werden. Ab Version 3 ist dies nicht mehr notwendig, denn das Mappen von JSON-Strings auf Parameter wird nun ohne Umwege unterstützt.

Die Methode Div in Listing 1, welche ein DivRequest erwartet und ein DivResponse zurückliefert, kann somit via AJAX mit JSON angesprochen werden. In Listing 2 wird dies unter Verwendung von jQuery, einem weit verbreiteten freien JavaScript-Framework, das ab Visual Studio 2010 ausgeliefert wird, bewerkstelligt. Dazu kommt die Methode $.ajax zum Einsatz. Um das Objekt request, dessen Aufbau der Struktur von DivRequest entspricht, in einen JSON-String umzuwandeln, wird die über json.org bereitgestellte Methode JSON.stringify herangezogen. Damit dieses Vorhaben funktioniert, bedarf es noch einer zusätzlichen Zeile in der global.asax, welche eine Instanz von JsonValueProviderFactory bei ASP.NET AJAX registriert (Listing 3).

Listing 1

1:  [HttpPost]  
2:  public ActionResult Div(DivRequest req)  
3:  {  
4:      DivResponse response = new DivResponse();  
5:                
6:      response.Result = req.A / req.B;  
7:      response.Remainder = req.A % req.B;  
8:      return Json(response);  
9:  }

Listing 2

1:  <script type="text/javascript" src="../../Scripts/jquery-1.4.1-vsdoc.js"></script>  
2:  <script type="text/javascript" src="../../Scripts/json2.js"></script>  
3:     
4:  <script type="text/javascript">  
5:      $(function () {  
6:     
7:     
8:          $("#execDivLink").click(function () {  
9:    
10:              var request = { 
11:                  A: 10, 
12:                  B: 3 
13:              }; 
14:    
15:              var strRequest = JSON.stringify(request); 
16:    
17:              $.ajax({ 
18:                  type: "POST", 
19:                  url: "/Math/Div", 
20:                  data: strRequest, 
21:                  dataType: "json", 
22:                  contentType: "application/json", 
23:                  processData: false, 
24:                  success: function (data, status, req) { 
25:                      alert("Result: " + data.Result); 
26:                      alert("Remainder: " + data.Remainder); 
27:                  }, 
28:                  error: function (req, textStatus, errorThrown) { 
29:                      alert("Error: " + req.status); 
30:                  } 
31:              }); 
32:          }); 
33:      }); 
34:  </script> 
35:       
36:  <h2>Index</h2> 
37:    
38:  <p> 
39:      <a id="execDivLink" href="#">Dividiere 10 durch 3 ...</a> 
40:  </p>

Listing 3

1:  protected void Application_Start()  
2:  {  
3:      [...]  
4:     
5:      ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());  
6:  }