Running a C# and a Javascript function on an asp button control? - Stack Overflow

admin2025-04-19  0

I can get both the Javascript and the C# function to work just fine.

However, my Javascript function runs before the C#.

How do I get it to run after the C# function??

Here is my code:

<script src=".8/jquery-ui.min.js"></script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<div id="div2" style="height:70px; width:auto; text-align:center;">
<p><b>This is A View!!!</b></p>
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>

<div id="div1">
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" 
        OnClientClick="javascript:Highlit()" />
</div>
</asp:View>
</asp:MultiView>

<script type="text/javascript">

function Highlit() 
{
 $("#div2").effect("highlight", {}, 10000);
}
</script>

 </ContentTemplate>
 </asp:UpdatePanel>

Code behind:

namespace jQuery_Highlight.jQuery_Highlight
{
public partial class jQuery_HighlightUserControl : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Changed";
    }
   }
}

Here is the code reflecting changes from the answers:

Code behind

namespace jQuery_Highlight.jQuery_Highlight
{
public partial class jQuery_HighlightUserControl : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Changed";
        ScriptManager.RegisterStartupScript(this, this.GetType(), "TEST", "Highlit();", true);
    }
   }
   }




 <script src=".8/jquery-ui.min.js"></script>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
 <asp:View ID="View1" runat="server">
 <div id="div2" style="height:70px; width:auto; text-align:center;">
 <p><b>This is A View!!!</b></p>
 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
 </div>

 <div id="div1">
  <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
 </div>
 </asp:View>
 </asp:MultiView>

 </ContentTemplate>
 </asp:UpdatePanel>

<script type="text/javascript">

function Highlit() {
    $("#div2").effect("highlight", { color: "#9499FC" }, 10000);
}
</script>

I can get both the Javascript and the C# function to work just fine.

However, my Javascript function runs before the C#.

How do I get it to run after the C# function??

Here is my code:

<script src="http://ajax.googleapis./ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<div id="div2" style="height:70px; width:auto; text-align:center;">
<p><b>This is A View!!!</b></p>
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>

<div id="div1">
    <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" 
        OnClientClick="javascript:Highlit()" />
</div>
</asp:View>
</asp:MultiView>

<script type="text/javascript">

function Highlit() 
{
 $("#div2").effect("highlight", {}, 10000);
}
</script>

 </ContentTemplate>
 </asp:UpdatePanel>

Code behind:

namespace jQuery_Highlight.jQuery_Highlight
{
public partial class jQuery_HighlightUserControl : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Changed";
    }
   }
}

Here is the code reflecting changes from the answers:

Code behind

namespace jQuery_Highlight.jQuery_Highlight
{
public partial class jQuery_HighlightUserControl : UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = "Changed";
        ScriptManager.RegisterStartupScript(this, this.GetType(), "TEST", "Highlit();", true);
    }
   }
   }




 <script src="http://ajax.googleapis./ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

 <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
 <ContentTemplate>
 <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
 <asp:View ID="View1" runat="server">
 <div id="div2" style="height:70px; width:auto; text-align:center;">
 <p><b>This is A View!!!</b></p>
 <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
 </div>

 <div id="div1">
  <asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
 </div>
 </asp:View>
 </asp:MultiView>

 </ContentTemplate>
 </asp:UpdatePanel>

<script type="text/javascript">

function Highlit() {
    $("#div2").effect("highlight", { color: "#9499FC" }, 10000);
}
</script>
Share Improve this question edited Jul 11, 2012 at 16:19 user1266515 asked Jul 11, 2012 at 15:18 user1266515user1266515 7963 gold badges16 silver badges33 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 7

The only way to get the javascript to run after is to add a script reference in your Button1_Click event.

Example Code for standard postback:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Changed";
    Page.ClientScript.RegisterStartupScript(this.GetType(), "PostButton1_ClickScript", "Highlit();", true);
}

As noted by others, be sure to remove your OnClientClick event. Also, consider moving your "Highlit" script outside of the update panel.

Additionally, since you are in an update panel, you will need to use the following example code for a Partial Postback:

protected void Button1_Click(object sender, EventArgs e)
{
    Label1.Text = "Changed";
    ScriptManager.RegisterStartupScript(this, this.GetType(), "PostButton1_ClickScript", "Highlit();", true);
}

You have to register a ClientScript at the end of Button1_Click event
and remove OnClientClick="javascript:Highlit()"

protected void Button1_Click(object sender, EventArgs e)
{
    //Do stuff
    ScriptManager.RegisterStartupScript(this, this.GetType(), "ANYNAME", "javascript:Highlit();", true);
}

Remove the OnClientClick attribute, and add the call as a startup script, so that it runs after the page has loaded:

protected void Button1_Click(object sender, EventArgs e) {
  Label1.Text = "Changed";
  Page.ClientScript.RegisterStartupScript(this.GetType(), "start", "Highlit();", true);
}

Side note: When you use the OnClientClick attribute, the code should not start with javascript:. That's only used when you put script in a href attribute in a link.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745077446a283652.html

最新回复(0)