jQuery and ASP.NET Page load

Question

I test jQuery and ASP.NET with Webcontrols and in my test load the Side everytime new if I click on the Button. The jQuery Code add a Css Class to a Label.

My aspx:

      <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Main.aspx.cs" Inherits="jQueryAnwendung.Main" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery Anwendung</title>

    <script src="Scripte/jquery-1.8.0.min.js" type="text/javascript"></script>

    <style type="text/css">
        .CssKlasse 
        {
            background:red;
            font-size:40px; 
            }
    </style>

    <script type="text/javascript" language="javascript">

        $(document).ready(function () {
            $("#<%= b1.ClientID%>").click(function (event) {
                $("#<%= bild1.ClientID %>").slideToggle('slow');
            });

        });

    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="b1" runat="server" text="Bild verkleinern/vergrößern"/>
        <asp:Image ID="bild1" runat="server" ImageUrl="~/Theme/net.png" Width="50" Height="50" /> 
    </div>
    </form>
</body>
</html>

What can I do?

tarasov

What do you want to get? If your button should not to fire post to server, don't use <asp:Button>. Use html button. — Kirill Bestemyanov
– Kirill Bestemyanov, Commented Aug 23, 2012 at 8:41

roland · Accepted Answer · 2012-08-23 20:04:14Z

1

inside your handler, prevent the button from behaving normally:

$("#<%= b1.ClientID%>").click(function (event) {
  event.preventDefault(); //prevent the control to act in its default way
  $("#<%= bild1.ClientID %>").slideToggle('slow');
});

edited Aug 23, 2012 at 20:04

answered Aug 23, 2012 at 9:11

roland

7,7956 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

el vis · Accepted Answer · 2012-08-23 08:44:33Z

1

Asp button causes Post back when you click it - page reloads and your script is not executed, you can use HTML button instead or try to disable postback on this button.

answered Aug 23, 2012 at 8:44

el vis

1,3022 gold badges17 silver badges33 bronze badges

Comments

Harry89pl · Accepted Answer · 2012-08-23 08:59:04Z

1

if you using asp controls you have 2 ways to handle it

First is change "#b1 and "#l1" to "<%= #b1.ClientID%>" and "<%= #l1.ClientID %>" in your jQuery function

Second is to add attribute ClientIDMode="Static" to your asp:Button and asp:Label

edited Aug 23, 2012 at 8:59

answered Aug 23, 2012 at 8:41

Harry89pl

2,43512 gold badges46 silver badges64 bronze badges

2 Comments

Harry89pl Over a year ago

which way doesn't work? edit you question and show how did you make this:)

Harry89pl Over a year ago

ok I've see problem is you add both solution. Use 1-st or second not both same time;)

roland · Accepted Answer · 2013-10-19 09:39:12Z

1

The generated id is more verbose; open your browser and click View source. You will notice it. Copy and paste the ID into your jQuery selector.

Another way is to call b1.clientID inside your .aspx: $("<%= b1.ClientID %>"), which will output the generated clientID at runtime.

Since ASP.NET 4, StaticMode allows you to have complete control over the generated ID. For more information, check it out: http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx

edited Oct 19, 2013 at 9:39

answered Aug 23, 2012 at 8:40

roland

7,7956 gold badges48 silver badges62 bronze badges

Collectives™ on Stack Overflow

jQuery and ASP.NET Page load

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related