javascript in einem UpdatePanel ausführen. Geht das?

Hallo Leute!

Ich möchte einen Javascript-Code zur Laufzeit bei Klick eines Buttons ausführen, damit in einem <div> ein Diagramm gezeichnet wird, dass sich wiederum in einem UpdatePanel befindet.
Wenn ich das UpdatePanel kommentiere, funktioniert es, jedoch hab ich dann kein Ajax. Die gesamte Page wird submitted.
Nun zu meiner Frage: Geht das überhaupt, dass man Javascript-Code in einem UpdatePanel ausführt.

Anbei der Code:

ASPX-Seite:

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    EnableEventValidation="false" CodeFile="UserMonthlyView.aspx.cs" Inherits="UserMonthlyView" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="ajax_utils.js" />
        </Scripts>
    </asp:ScriptManager>
    <br />
    <div style="padding-left: 20px;">
        ... // UNWICHTIGER CODE

        <div class="divFrame">
            <asp:Panel ID="pnlTableSelect" runat="server">
                <table cellspacing="5">
                    <tr>
                        </td>
                            <asp:Button ID="btnSelect" runat="server" Text="select" CssClass="Button" UseSubmitBehaviour="true"
                                OnClick="btnSelect_Click" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
            <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                ... // UNWICHTIGER CODE

                <div id="costchart" style="width: 800px"></div> // HIER IST DAS DIV, DASS DANN ZUR LAUFZEIT VON JAVASCRIPT BEFÜLLT WIRD
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSelect" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </div>
</asp:Content>

Code-Behind:

public partial class UserMonthlyView : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
      ... // VIEL ANDERER CODE
    }
    

    protected void btnSelect_Click(object sender, EventArgs e)
    {
      ... // VIEL ANDERER CODE
        string jsCode = Utils.getJsCodeForChart();
        ClientScript.RegisterStartupScript(GetType(), "", jsCode, true);
    }

    // Das ist Highchart-javacode, der in das <div> 'costchart' ein Diagramm zeichnet
    // Die Bibliothek hab ich in der Masterpage eingebunden
    public static string getJsCodeForChart() {
        string jsCode =
        @"var chart1; // globally available
            $(document).ready(function() {
                chart1 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'costchart',
                        defaultSeriesType: 'column'
                    },
                    title: {
                        text: 'Fruit Consumption'
                    },
                    xAxis: {
                        categories: ['Apples', 'Bananas', 'Oranges']
                    },
                    yAxis: {
                        title: {
                            text: 'Fruit eaten'
                        }
                    },
                    series: [{
                        name: 'Jane',
                        data: [1, 0, 4]
                    }, {
                        name: 'John',
                        data: [5, 7, 3]
                    }]
            });
        });"; 
        return jsCode;
    }
}

Also wie gesagt. Es funktioniert wenn ich das UpdatePanel kommentiere in der aspx.Seite. Mit dem UpdatePanel funktioniert es nicht. Die document.ready-Methode im Javascript hab ich auch mal kommentiert, weil ich dachte, dass das sich nicht verträgt. Ebenfalls wenn ich das div außerhalb des UpdatePanels platziere. Kommt nichts. Fehlermeldungen gibt es keine.

Vielleicht weiß jemand einen Rat.

ich weiß jetzt nicht genau ob ich damit richtig liege 😉 aber brauchst du überhaupt das update panel? kannst du nicht einfach den onclientclick event des asp buttons verwenden um deine javascript methode aufzurufen?

lg ingemar

Hallo OldSchool,

ohne mir den Code näher angesehen zu haben, aber versuch mal ClientScript.RegisterStartupScript mit ScriptManager.RegisterStartupScript zu ersetzen.

-yellow

Hallo OldSchool,

ohne mir den Code näher angesehen zu haben, aber versuch mal ClientScript.RegisterStartupScript mit ScriptManager.RegisterStartupScript zu ersetzen.

-yellow

Vielen Dank Yellow für die Antwort. Es funktioniert jetzt.

Ich habe ClientScript.RegisterStartupScript(GetType(), "", jsCode, true) mit ScriptManager.RegisterStartupScript(this.Page, GetType(), "", jsCode, true) ersetzt.

Hallo OldSchool,

freut mich, dass es jetzt funktioniert! Trotzdem möchte ich wissen, warum du das UpdatePanel brauchst, immerhin wird am Server ja nichts gerendert, oder? Ist das nicht ein reines Javasript Control?

Lg Ingemar

Hallo,

immerhin wird am Server ja nichts gerendert, oder? Ist das nicht ein reines Javasript Control?

Das sehe ich genauso. Eigentlich sollte ein reiner Ajax-Aufruf reichen. Das UpdatePanel macht die Sache ggf. etwas bequemer für die Implementierung.
Selbst wenn es kein reines JavaScript-Control wäre, sondern selbst über Ajax mit dem Server spricht, wäre diese Ajax-Funktionalität ja intern im Control und damit von einem UpdatePanel unabhängig.

Gruß, MarsStein

Hallo Ingemar!

Im UpdatePanel ist noch eine GridView, die eine Tabelle anzeigt, die soll mit Ajax abgearbeitet werden. Im Code hier hab ich dieses GridView rausgelöscht, damit ihr nur das wichtige seht, um was es geht.

Hi,

ok, und dein Javascript Code soll jedesmal aufgerufen werden: $(document).ready(function()....
nicht nur bei den partial postbacks? ich denke, deine überschrift hat mich etwas verwirrt, denn du führst ja keinen Javascript Code in deinem UpdatePanel aus, der PartialPostback der durch dein UpdatePanel erzeugt wird, triggert deine $(document).ready(function()....

Wichtig ist das es funktioniert 😉

Lg ingemar

Hallo,

ich hatte auch neulich das Problem, dass eine JS-Funktion in einem UpdatePanel ausgeführt werden musste.
Ein "<script>foobar();</script>" rendern reichte nicht. JQuery hatte ich nicht zur verfügung und "window.onload" funktionierte auch nicht.

Irgendwo im Netz habe ich dann etwas gefunden, mein Ergebnis daher:

var script = new StringBuilder();
script.AppendLine("var prm = Sys.WebForms.PageRequestManager.getInstance();");
script.AppendLine("if(prm != null) { prm.add_endRequest(foobar()); }");

ScriptManager.RegisterClientScriptBlock(this.Page, this.GetType(), this.UniqueID, script.ToString(), true);

Vielleicht hilft es ja jemanden weiter.

Gruß
Björn