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
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');
});
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.
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
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
Related
Jquery is not wrking when I am using form tag in asp.net controls.so whats the solution .I am trying multiple techniques but it does not work.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#bt1").click(function () {
$("#p1").hide(2000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p runat="server" id="p1">this is asp.net</p>
<asp:Button ID="bt1" Text="click" runat="server"/>
</div>
</form>
</body>
</html>
As you are using ASP.NET and bt1 is a button server control you need to use Control.ClientID.
<%= bt1.ClientID %> will Gets the control ID for HTML markup that is generated by ASP.NET.
Use
$("#<%= bt1.ClientID %>").click(function () {
$("#<%= p1.ClientID %>").hide(2000);
});
OR
You can use ClientIDMode.Static mode then you can continue with your existing code. However I will not recommend it.
I need some help figuring out the best way to go about adding jquery code to my aspx file. We have a big front end solution in VS2008 using a master page. In the master page we have a ContentPlaceHolder where you can add stuff to the <head>, but the location of the place holder is above the code which declares the local path to jquery. Would I need to move the ContentPlaceHolder to a location below the jquery? If so, couldn't doing that cause some potential issues? I tried adding an additional ContentPlaceHolder under the script declaration tags, but that caused ViewState errors (I think having to do with code behind I added for my page to allow CSS3 for IE).
Here is the relevant code from the master file:
<%# Master Language="C#" AutoEventWireup="True" CodeBehind="Class.Master.cs" Inherits="Company.Project.Masters.Class" %>
<!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 id="Head1" runat="server">
<title><%# Page.Title %></title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<asp:ContentPlaceHolder ID="cphHead" runat="server" >
</asp:ContentPlaceHolder>
<link href="~/inc/style.css" rel="stylesheet" type="text/css" />
<script src='<%# ResolveUrl("~/inc/utils.js") %>' type="text/javascript"></script>
<script type="text/javascript">
//some js stuff here
<style type="text/css">
// some css stuff here
</style>
<script language="javascript" type="text/javascript" src='local/path/to/jquery' ></script>
<script language="javascript" type="text/javascript" src='local/path/to/jquery-ui-1.10.3.custom.min.js") %>'></script>
<script type="text/javascript">
$(document).ready(function() {
//some jquery stuff here
})
});
</script>
</head>
Below is the code I have added to my page's .cs file to allow CSS3 elements to work in IE. This error looks like it is related to the ViewState error
protected void Page_Load(object sender, EventArgs e)
{
HtmlMeta xuac = new HtmlMeta();
xuac.HttpEquiv = "X-UA-Compatible";
xuac.Content = "IE=edge";
Header.Controls.AddAt(0, xuac);
}
When I add a new ContentPlaceHolder in the MasterPage I get the error:
Failed to load viewstate. The control tree into which viewstate is
being loaded must match the control tree that was used to save
viewstate during the previous request. For example, when adding
controls dynamically, the controls added during a post-back must match
the type and position of the controls added during the initial
request.
Coming to all your points one by one.
You can have multiple content place holders in master page and you can refer to them in other pages. You should add a contentplaceholder right after jQuery script. And add content to this placeholder from child pages, it should not create any kind of problem.
Please share the view-state error you are getting on adding extra contentplaceholder. You can explore browser console for more information on view state problems.
I have a panel. in that panel there is one text box for some input and another one for taking date from calendar control. I have put calendar control below the second text box(i.e. txtDate), but I don't want it to be displayed when the page is loaded, instead I want a small image of calendar and on clicking that image a calendar should pop up and selected date must be captured by txtdate textbox.
Please help me with .aspx and .cs file. I'm using asp.net with C#.
Use AJAX Calender Extender. Here is the Sample Markup Code:
<asp:CalendarExtender ID="ControlIDHere" runat="server" Enabled="True"
TargetControlID="TextBoxIDHere" PopupButtonID="CalenderImageIDHere" Format="MM/dd/yyyy">
</asp:CalendarExtender>
An ASP.NET based solution for calender control is best explained here
But I would suggest you to go forward with Ajax based solution
Ajax Calender
Calender control in AJax toolkit
You can user use Jquery library in your project. Below is the example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script >
$(document).ready( function() {
$("[id=^datepicker]").datepicker();
} );
</script>
</head>
<body>
<form id="form1" runat="server">
<p>Date: <asp:TextBox id="datepicker" runat="server">
</p>
</form>
</body>
</html>
I have an ASP.NET page with a Submit button. When I click the button my code runs and then the page reload/refresh....the whole page gets posted back.
What must I use or do to prevent the page from reload? AJAX? How would this be done?
Code examples would be great!
Check the below code with AJAX and Without AJAX
Case 1 With AJAX
In this we added following controls
1. Script Manager
2. Ajax Update Panel with Trigger and Content Template
3. Button
In this case, you will notice that on clicking the button, the controls which are outside the Update Panel will not be updated. That means controls inside the Update Panel will be updated on clicking the button. That means complete page will not be refreshed. I hope this fulfill your requirement....
Output
Date outside the update panel will not be updated and date inside the update panel will only be updated because it is inside the update panel so complete page will not be refreshed.
Source Code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=DateTime.Now %>
<br />
<asp:ScriptManager ID="scr" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="Upd" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now %>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btn" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="btn" runat="server" Text="Click Me" />
</div>
</form>
</body>
</html>
Case 2 Without AJAX
The below case will also update the date but this time page will be refreshed completely due to absence of Update Panel
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!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></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<%=DateTime.Now %>
<asp:Button ID="btn" runat="server" Text="Click Me" />
</div>
</form>
</body>
</html>
Hope this article will help you understand the quick basics
If you don't want the page to reload, you should take a look at the UpdatePanel Control: http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx
If you want to avoid that your code is run again
you can do in your page_load event
If(!page.IsPostBack())
{
your code here
}
and ajax to avoid reload in jquery
with the example here
or with asp ajax panel
I am trying to set the disabled property for my CheckBox to true. However, when I do a postback the CheckBox is still enabled?
HTML:
<!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">
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<head runat="server">
<title></title>
<script>
$(document).ready(
function () {
$("#CheckBoxList1_0").attr('disabled',true);
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem>een</asp:ListItem>
<asp:ListItem>twee</asp:ListItem>
<asp:ListItem>drie</asp:ListItem>
</asp:CheckBoxList>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</form>
</body>
</html>
c#:
protected void Button1_Click(object sender, EventArgs e)
{
if (!CheckBoxList1.Items[0].Enabled)
{
Response.Write("it is disabled");
}
}
CSS properties like disabled added with jQuery, or added in any way for that matter, will not post to the server when you do a postback.
If you really need to keep track of which checkboxes are disabled, one way to accomplish this would be to store those elements' ids into a hidden input, the value of which will post to the server.
Something like this should work
<input type="hidden" runat="server" id="yourHiddenInput" />
$("form").submit(function(){
var allIds = [];
$("input[type='checkbox']:disabled").each(function() {
allIds.push($(this).attr("id"));
});
$("#yourHiddenInput").val(allIds.join());
//form is about to post. When it does,
//you'll be able to read the ids via yourHiddenInput.Value
});
When you change the checkbox using javascript that change is on the client only, I believe that the viewstate information for the checkbox won't be updated and so when the postback occurs as far as the page knows the checkbox is still unchecked