ASP.NET Webforms PageMethods modernisiert

ASP.NET Webforms hat einige sehr bequeme Features, die sich unter Umständen gar nicht positiv auswirken. Für den partiellen Austausch von Webinhalten im Zusammenspiel Server und Client hilft zb das UpdatePanel. Hierbei wird der komplette Page Inhalt am Server gerendert, zum Client geschickt und nur der partielle Teil im Updatepanel ausgetauscht. Für klassische Intranet Anwendungen per Q&D Pattern meist kein Problem.

Etwas moderner wirken da die Pagemethods. Dabei wird eine Methode in der ASPX Seite statisch (shared) ausgelegt und per Methodenattribut Webmethod zu einem Miniservice. Der Postback zum Server umfasst dann lediglich minimale Daten. Die Antwort erfolgt mit Json formatierten Daten.

   1:   <WebMethod()>
   2:   Public Shared Function do_ss(anz As Integer) As List(Of dings)
   3:          Dim l As New List(Of dings)
   4:          l.Add(New dings With {.id = anz + 1, .text = "somestring"})
   5:          Return l
   6:   End Function

Wer mit ASP.NET Webforms aufgewachsen ist, wird den ScriptManager kennen und nutzen. Dieser generiert den für die Server Control nötigen JavaScript  Code.  Über das Proxy Objekt PageMethods wird die Methode am Server aufgerufen.

   1:   <asp:ScriptManager ID="ScriptManager1" runat="server" 
   2:        EnablePageMethods="true">
   3:   </asp:ScriptManager>
   4:   <asp:Button ID="Button1" runat="server" Text="Button"
   5:                   OnClientClick="return meineMethode()" />
   6:   <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
   7:   <script>
   8:              function meineMethode()
   9:              {
  10:                  var l = PageMethods.do_ss(1, OnSucceeded, OnFailed);
  11:                  return false;
  12:   
  13:              }
  14:   
  15:              function OnSucceeded(result, userContext, methodName) {
  16:                  $get('Label1').innerHTML = result;   }   
  17:              function OnFailed(error, userContext, methodName) {  
  18:                  $get('Label1').innerHTML = "An error occured.";  } 
  19:  </script>

 

Dieser Code verursacht gleich mehrfach Bauchschmerzen. So wird ein ASP.NET Server Button unnötigerweise verwendet. Sogar der übliche Form Postback muss mit dem Return false unterdrückt werden. Bei der Betrachtung des HTTP Verkehrs mit Fiddler, erkennt kann den initalen Request gefolgt von umfangreichen JavaScript Downloads. Der eigentliche Webservice Aufruf erfolgt mit dem Page Methodennamen do_ss am Ender der Url.

image

Die Magie des ScriptManagers ist auch ein wenig unheimlich. Also wird nun auf diesen verzichtet und statt dem ASP.NET Scriptmanager ein XMLHTTPRequest per JQuery JavaScript Bibliothek durchgeführt.

   1:   function meineMethode() {
   2:                  $.ajax({
   3:                      type: "POST",
   4:                      url: "webform32.aspx/do_ss",
   5:                      data: '{anz: 1 }',
   6:                      contentType: "application/json; charset=utf-8",
   7:                      dataType: "json",
   8:                      success: OnSucceeded,
   9:                      failure: OnFailed
  10:                  });
  11:                  return false;
  12:   }

Hinweis: wenn Friendlyurls verwendet werden, lassen sich Pagemethods nicht aufrufen. Es ist immer die .aspx Erweiterung im Callback mit anzugeben.

Auch der JavaScript Code wird passend zur API des JQuery Frameworks angepasst.

   1:       $('#Label1').text(result);

 

Die dazu nötige Menge an Requests und Größe reduziert sich dadurch erheblich, wie der Fiddler Trace zeigt.

image

Sollten also Änderungen an bestehenden Webseiten anstehen, könnte dies eine Möglichkeit sein einen kompletten Code rewrite zu umgehen. Aus Logik die für den Server rendering Prozess geschrieben wird, wird per Attribut ein JSON REST Service.

Kommentare sind geschlossen