Roberto’s Blog

jQuery Plugin selbstgemacht - Dynamisches laden von ASP.NET Controls

Wer kennt sie nicht... die zauberhaften ajax Kekse.

Doch was steckt dahinter?

In diesem Beitrag werde ich anhand eines Beispiels erklären, wie man ein jQuery Plugin dafür erstellen kann.

Die Vorgehensweiße:
Über einen clientseitigen Funktionsaufruf werden wir den Inhalt eines HTML Containers mit dem eines klassischen ASP.NET Controls ersetzen.
Das alles passiert mit einem Webservice Aufruf per jQuery der den HTML Code zurückliefert.

Schritt 1: Das Plugin

Eine kurze Einführung in jQuery Plugins.
In jQuery werden Objekte mit $.fn.<Name> = function() {} erweitert.
Allerdings sollte der "$" Alias vermieden werden, da Konflikte mit anderen Javascript Bibliotheken(bspw. prototype.js) entstehen können.
Die am häufigsten benutzte Vorgehensweise sieht so aus:

(function($){
    // --- Plugin kommt hier
})(jQuery);

Das neue Plugin nennt sich ascxLoder. Als Parameter die Pfadangabe und eine Sammlung mit Einstellungen.
Natürlich werden auch Standard Werte benötigt, damit ewige Parameter Übergaben vermieden werden.

$.fn.ascxLoader = function( path, params ) {
    var defaults = {
        showLoadingScreen = true
    };
    var config = $.extend(defaults, params);
    // --- Mit $(this) können wir auf den Container zugreifen.
    // --- über config.<Value> die gewünschte Einstellung.
}

Der Aufruf erfolgt dann über:

$("#MyContainer").ascxLoader("~/Control.ascx", { showLoadingScreen: false });

Schritt 2: Der Webservice Aufruf

Damit das Plugin jetzt auch den gewünschten Effekt bringt, bauen wir einen einfachen Webservice Request ein.

(function($){
$.fn.ascxLoader = function( path, params ) {
    var defaults = {
        path: "Control.ascx",
        showLoadingScreen: true
    };   
    var config = $.extend(defaults, params);
    var obj = $(this);
    path = path || config.path;
    // --- der Webservice Aufruf mit Pfad übergabe:
    $.ajax({
        type        : "POST",
        url         : "Webservices.asmx/GetControl",
        data        : '{"Path":"' + path + '"}',
        contentType : "application/json; charset=utf-8",
        dataType    : "json",
        success     : function( result ) {
            // result.d enthält den HTML code für unseren Container
            obj.html( result.d );
        }
    });
}
})(jQuery);

Hinweis: "path = path || config.path" bedeutet: falls path undefined ist, nimm config.path

Schritt 3: Der Webservice

Nun zum Webservice, der uns das gewünschte Control als HTML code zurückgibt.

<WebMethod()> _
Public Function GetControl( Path As String ) As String
Dim page        As New Page()
Dim userControl As UserControl = Page.LoadControl( Path )
Dim output      As New System.IO.StringWriter()
    page.Controls.Add( userControl )
    HttpContext.Current.Server.Execute( page, output, false )      
    return output.ToString()
End Function

Über folgenden Funktionsaufruf lässt sich das Control neu laden.

   $("Container").ascxLoader("~/Controls/Control.ascx");

War doch gar nicht so schwierig oder?

Anbei gibt es ein Beispiel zum selber ausprobieren.
Dieses beinhaltet neben dem eben gezeigten Beispiel auch die Möglichkeit, einer Anforderungen Parameter mitzugeben und so je nach Aufruf ein geändertes Control zurückzugeben.