The following code sample demomstrates the problem.
When Button1 is clicked, Button3 is disabled through JavaScript. Clicking Button2 causes a server event that intitiates the postback. After the postback Button3 is no longer disabled.
ASPX
<%# Page Language="C#" AutoEventWireup="true" CodeFile="TestDisableButton.aspx.cs" Inherits="StudentForms_CaseManagement_TestDisableButton" %>
<!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>
<script language="javascript" type="text/javascript">
function Button1_onclick() {
document.getElementById("<%= Button3.ClientID %>").disabled = true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="Disable Button 3" onclick="return Button1_onclick()" />
<asp:Button ID="Button2" runat="server" Text="Perform Post Back" onclick="Button2_Click" />
<asp:Button ID="Button3" runat="server" Text="Button3" />
<br />
<asp:Label ID="Label1" runat="server" ></asp:Label>
</div>
</form>
</body>
</html>
CodeBehind
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class StudentForms_CaseManagement_TestDisableButton : System.Web.UI.Page
{
protected void Button2_Click(object sender, EventArgs e)
{
Label1.Text = "Button 2 clicked";
}
}
The button is recreated on the server side, based on it's latest state (stored in ViewState, which goes from server to browser and back to server), and the posted value.
The problem is that the disabled state is in the ViewState and you cannot modify it on the client side. The only posted value is the value of the control itself (for example the text in a text box).
So, as you cannot modify the ViewState, the only alternative is to have an extra control in your form tha allows to post the disabled state back to the sever. So you need to add a HiddenField, set its state on the client side (in the same script that enables/disables the button), and then, on the server side recovere the posted back value and apply it to the control. I.e., read the hidden field value, and set the Enabled property of the button accordingly.
On postback disable your Button3
protected void Button2_Click(object sender, EventArgs e)
{
Button3.Enabled = false;
}
Related
My label and button:
<h1 id="display"></h1>
<asp:Button ID="Button1" runat="server" Text="display"
Onclientclick="return show()" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
My script:
<script type="text/javascript">
function show() {
document.getElementById('display').innerHTML =
"iam client side code";
return true;
}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "iam server side code";
}
my problem is that when I click on the button click event, client side code calls and next server side code is calling. when server side code calls page refreshes the client side message disappears .How do I display both messages.
Thanks in advance
As you coded a server side button it'll cause a postback to the server. So in two ways you can handle this situation.
First, what you have already tried is handling the message display on client side only. What you need to do is change the server side button into a simple input element.
Second, approach would be to use AjaxExtension <asp:UpdatePanel></asp:UpdatePanel> that will only send the control you want to the server side and won't cause full page reload rather a partial postback.
Second Approach Code : Update your code as follows,
<div>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<h1 id="display"></h1>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="display"
Onclientclick="return show()" onclick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
You can call javascript from button post back also.
you can follow this example
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Practise.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title></title>
<script type="text/javascript">
function show() {
document.getElementById('display').innerHTML = "iam client side code";
return true;
}
</script> </head> <body>
<form id="form1" runat="server">
<h1 id="display"></h1>
<asp:Button ID="Button1" runat="server" Text="display" onclick="Button1_Click" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</form> </body> </html>
Server side code is
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "iam server side code";
StringBuilder runscript = new StringBuilder();
runscript.AppendLine("show();");
ClientScriptManager manager = Page.ClientScript;
manager.RegisterStartupScript(this.GetType(), "any", runscript.ToString(), true);
}
I'm trying to use several instances of an ascx control on a single page. Only the last control on the page works. I understand from this post [Asp.Net User Control does not work correctly when multiple are added to one form that the problem is related to the IDs; somehow I'm trying to reuse the IDs and the specific control being edited is not referenced correctly. However, the code on that page is complex and I don't understand the answers. I created a small example of my problem to demonstrate.
Here is my user control:
<%# Control Language="vb" AutoEventWireup="false" CodeBehind="testControl.ascx.vb" Inherits="Tempusforms.testControl" %>
<script type="text/javascript">
function getValue() {
document.getElementById("<%=Label1.ClientID %>").innerHTML = getIndex();
}
function getIndex() {
return document.getElementById("<%=droppit.ClientID %>").selectedIndex;
}
</script>
<span>
<asp:DropDownList ID="droppit" runat="server" OnChange="getValue();" >
<asp:ListItem Value="Select a Value"></asp:ListItem>
<asp:ListItem Value="one"></asp:ListItem>
<asp:ListItem Value="two"></asp:ListItem>
<asp:ListItem Value="three"></asp:ListItem>
</asp:DropDownList>
</span> Index Value =
<span>
<asp:label ID="Label1" runat="server" Text="mylabel" ></asp:label>
</span>
Here is the page that uses the controls:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="userControlTest.aspx.vb" Inherits="Tempusforms.userControlTest" %>
<%# Register src="../Common/testControl.ascx" tagname="testControl" tagprefix="uc1" %>
<!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>
<uc1:testControl ID="testControl1" runat="server" />
<br /><br />
<uc1:testControl ID="testControl2" runat="server" />
</div>
</form>
</body>
</html>
Can you show me how to make this work?
Thanks for your help.
ASP.NET generates different IDs which include the UserControl ID so IDs aren't the issue here.
However the problem is with the JS code that you are including in the User Control. This gets repeated and bad things happen because of that obviously.
You should get those scripts outside the User Control and change them to use parameters.
Something like:
<script type="text/javascript">
function getValue(ctrlID) {
document.getElementById(ctrlID).innerHTML = getIndex(ctrlID);
}
function getIndex(ctrlID) {
return document.getElementById(ctrlID).selectedIndex;
}
</script>
And you can call these functions from the User Control like this: OnChange="getValue(this.id);"
I have the fallowing code that is working but my question is how do you get to pass the value of the textbox every time you type on the textbox? Maybe Using Javascript or JQuery ? If anyone could help me it would be great.
SearchProducstController:
public class SearchProducstController: Controller
{
public ActionResult searchmain(string name)
{
var result = name;
return View();
}
site.master
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" runat="server" />
</head>
<body>
<div class="page">
<% using (Html.BeginForm("searchmain", "SearchProducstController")) { %>
<%: Html.TextBox("name") %>
<input type="submit" value="searchmain" />
<% } %>
</div>
</body>
</html>
Use AJAX(Asynchronous JavaScript and XML).
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
AJAX was invented for this feature only.
Google ajax autocomplete textbox and you will find what i am talking about.
Suppose I have a .gif:
<img alt="" src="./wait.gif" />
And I have a Label:
<asp:Label ID="tbnotif" runat="server" ReadOnly="True" Text="" ></asp:Label>
And a button:
<asp:Button ID="Button1" runat="server" Text="Pubblica" OnClientClick="show_table();add_gif();" OnCommand="Button1_Click" />
I'm using aspx pages, the question is:
Can I click on the button and at same TIME show the .gif with JavaScript and change the Label from code behind? Or will things never be shown at same time?
It looks to me like you want to show a busy animated gif between postbacks, is that right?
Here's how I do it (unless I'm using update panels which have their own progress indicator server control)
<script type="text/javascript">
window.onbeforeunload = function(){showGif();};
</script>
When the page unloads because of a postback (click the button which POSTs to the server), reveal the gif image. When the new page comes back from the server the image will disappear because it's now a new page.
Changing a label is a small operation, so you will probably never see the image as the request/response will turn around very quickly. For testing you can add a System.Threading.Thread.Sleep(3000) in your button handler to simulate a longer running process.
EDIT
AJAX is your only option then, but there are many many ways. One possible solution:
Put the label in an UpdatePanel server control, place button outside of update panel, but set it as an AsyncPostbackTrigger in the update panel's declarative mark-up in the aspx page. Show the gif with OnClientClick handler client-side or using JQuery to attach a client-side click handler to the button.
aspx
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="AjaxLabel._Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager1"></asp:ScriptManager>
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="ajaxLabel">Initial value</asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="asyncButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
<img id="theImage" src="img/success.png" style="display: none;" />
<asp:Button runat="server" ID="asyncButton" Text="Client & Server Click" OnClientClick="showImage();" OnClick="asyncButton_Click" />
</div>
</form>
<script type="text/javascript">
function showImage() {
document.getElementById('theImage').style.display = "block";
}
</script>
</body>
</html>
aspx.cs
using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AjaxLabel
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void asyncButton_Click(object sender, EventArgs e)
{
ajaxLabel.Text = "Server-side value";
}
}
}
i am learning javascript client side scripting language and i am using js in ASP.. i dont know when i compile the code, it shows
COMPILATION ERROR:Compiler Error
Message: CS1061: 'ASP.default_aspx'
does not contain a definition for
'popup' and no extension method
'popup' accepting a first argument of
type 'ASP.default_aspx' could be found
(are you missing a using directive or
an assembly reference?)
here is my code :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WEB_test_app._Default" %>
<!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>Shuraat Web ki</title>
<script type ="text/javascript">
function popup()
{
alert("popup!!");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick ="popup()"/>
<script type ="text/javascript">
document.write("Abid");
</script>
</div>
</form>
</body>
</html>
You're confusing client-side and server-side events. The popup() function is written in Javascript and runs on the client, but OnClick is a server-side event, so its handler runs on the server and has to be written in the language of your page (C#). popup() has no meaning in that context.
You can use the ClientClick event in order to handle the button click client-side. Note that you probably should return false from the handler in order to avoid a postback to the server:
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick ="popup(); return false;" />
You have to assign popup() to the event OnClientClick instead of Click like this:
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick ="popup()"/>
The reasoning behind your problem is that when the run-time saw OnClick it tried to attatch that event with a C#/VB.Net (Code-Behind) method (which obviously does not exist) and we solved that by attaching the event OnClientClick to your Javascript method.
OnClick - is click handler on server side. If you want to call javascript function, use OnClientClick.