ASP.Net jquery TextBox Event - c#

Can I call textbox changed event as text changing using jquery in asp.net?
So, I want the action to be done while the user is entering the number.
Default.aspx
<asp:TextBox ID="txtCount" CssClass="form-control" runat="server"></asp:TextBox>
<asp:TextBox ID="txtPrice" CssClass="form-control" runat="server" OnTextChanged="OnTextChanged"></asp:TextBox>
<asp:Label ID="lblTotal" CssClass="price" runat="server"></asp:Label>
Default.aspx.cs
protected void txtIskontoTutari_TextChanged(object sender, EventArgs e)
{
double price1=double.Parse(txtPrice.Text);
double count=double.Parse(txtCount.Text);
double total=0;
total=price1*count;
lblTotal.Text = string.Format("{0:#,##0.00}", total);
}

This could be the solution:
You have do take the ID Attribute of your asp tag.
$(document).ready(function () {
$('#txtPrice').change(function(){
$(this).....
}
});

Related

Display calculated value of 2 textbox values to third textbox

I have calculated the two textbox values and displayed successfully it into third textbox but the issues are when I enter value to textbox1 and move to textbox2 the page get reload as I have mentioned AutoPostBack="true" for textbox1 and textbox2 and when I remove this AutoPostBack="true" the calculated value is not displayed in third textbox.
Here is my code behind
protected void txttotal_TextChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(txttotal.Text) && !string.IsNullOrEmpty(txtdiscount.Text))
txtgrandtotal.Text = (Convert.ToInt32(txttotal.Text) - Convert.ToInt32(txtdiscount.Text)).ToString();
}
protected void txtdiscount_TextChanged(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(txttotal.Text) && !string.IsNullOrEmpty(txtdiscount.Text))
txtgrandtotal.Text = (Convert.ToInt32(txttotal.Text) - Convert.ToInt32(txtdiscount.Text)).ToString();
}
Here is aspx code
<asp:TextBox ID="txttotal" runat="server" CssClass="textstyle" OnTextChanged="txttotal_TextChanged" AutoPostBack="true"></asp:TextBox>
<asp:TextBox ID="txtdiscount" runat="server" CssClass="textstyle" OnTextChanged="txtdiscount_TextChanged" AutoPostBack="true"></asp:TextBox>
<asp:TextBox ID="txtgrandtotal" runat="server" CssClass="textstyle" ReadOnly="true"></asp:TextBox>
To add the two text box value and show it on third text box you can add them on button click event here is the code
aspx page
<div>
<asp:TextBox runat="server" ID="txt1"></asp:TextBox>
<asp:TextBox runat="server" ID="txt2"></asp:TextBox>
<br />
<asp:Label runat="server" Text="Answer"></asp:Label> <asp:TextBox runat="server" ID="txt3"></asp:TextBox>
<asp:Button runat="server" ID="btn1" Text="CLICK TO ADD" OnClick="btn1_Click"/>
</div>
.cs
protected void btn1_Click(object sender, EventArgs e)
{
if (!string.IsNullOrEmpty(txt1.Text) && !string.IsNullOrEmpty(txt2.Text))
{
txt3.Text = (Convert.ToInt32(txt1.Text) + Convert.ToInt32(txt2.Text)).ToString();
}
else {
Response.Write("Please Enter Value");
}
}

How to remove a class from a textbox that was changed

ASP.net:
<asp:TextBox ID="tbFirst" OnTextChanged="AddClass" runat="server" CssClass="tbStyle colorBlue" Text='<%# Eval("theFirstName") %>'></asp:TextBox>
<asp:TextBox ID="tbLast" OnTextChanged="AddClass" runat="server" CssClass="tbStyle colorBlue" Text='<%# Eval("theLastName") %>'></asp:TextBox>
<asp:TextBox ID="tbAdd1" OnTextChanged="AddClass" ClientIDMode="Static" runat="server" CssClass="tbStyle colorBlue" Text='<%# Eval("theAddress1") %>'></asp:TextBox>
CSS:
.colorRed
{
color: #CC0000;
}
.colorBlue
{
color: #0000CC;
}
C#:
public void AddClass() {
//add the 'colorRed' class to the textbox that was changed and remove the 'colorBlue' class.
}
How can I remove one of the class and add a new class to the respective textbox that was changed.
Use JS instead of call server:
<asp:TextBox ... Onchange="addClass(this)"></asp:TextBox> <!-- fires after losing focus-->
<asp:TextBox ... Oninput="addClass(this)"></asp:TextBox> <!-- fires after key pressing-->
<script>
function addClass(sender) {
$(sender).addClass('colorRed');
}
</script>
It will be faster
You'll probably need to specify a valid Signature for the OnTextChanged event handler.
See below.
protected void AddClass(object sender, EventArgs e)
{
((TextBox)sender).CssClass = "tbStyle colorRed";
}
We changed the value of the CssClass

Adding Dynamic Controls in ASP.NET

It kind of seems to me that there is an inherent difficulty in dynamically adding controls in ASP.NET Web Forms. Specifically, for a dynamically added control to be included in the ViewState, and have it's events properly wired up and so forth it is suggested that these be added during the Page_PreInit event.
That said, many times we'll probably want to add such controls according to an event, such as a user clicking a button. Control specific events like Click events always run after Init, and even after Load. Supposed the following .aspx....
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="phAddresses" runat="server"></asp:PlaceHolder>
<br /><br />
<asp:Button ID="btnAddAddress" runat="server" Text="Add Another Address" OnClick="btnAddAddress_Click" />
...and the following .aspx.cs....
private static List<AddressUserControl> addresses = new List<AddressUserControl>();
protected void Page_PreInit(object sender, EventArgs e)
{
foreach (AddressUserControl aCntrl in addresses)
{
phAddresses.Controls.Add(aCntrl);
// Helper to find button within user control
addressButtonControl = findAddressControlRemoveButton(aCntrl);
addressUserControlButton.ID = "btnRemoveAddress" + addressCount;
addressUserControlButton.Click += new EventHandler(addressUserControlButton_Click);
addressCount++;
}
}
protected void btnAddAddress_Click(object sender, EventArgs e)
{
AddressUserControl aCntrl = LoadControl("~/UserControls/AddressUserControl.ascx") as AddressUserControl;
addresses.Add(aCntrl);
}
Now in the above situation the number of User Controls displayed is always one behind the number the user has actually added, because the Click event doesn't run until after PreInit, where controls must be added to the placeholder. I must be missing something here, because this seems inherent to the ASP lifecycle, and to require some 'hack' or other.
EDIT - Yeah for some reason EventHandlers I add during btnAddress_Click() won't run, only EventHandlers I add during Page_Init, or declaratively in markup. This is what I tried to do...
protected void btnAddAddress_Click(object sender, EventArgs e)
{
AddressUserControl aCntrl = LoadControl("~/UserControls/AddressUserControl.ascx") as AddressUserControl;
addresses.Add(aCntrl);
phAddresses.Controls.Add(aCntrl);
findAddressControlRemoveButton(aCntrl);
addressUserControlButton.ID = "btnRemoveAddress" + addresses.Count;
///////////////////////////////////////////////////////////////////////////////////
// ADDED EVENT HANDLER HERE
//////////////////////////////////////////////////////////////////////////////////////
addressUserControlButton.Click += new E ventHandler(addressUserControlButton_Click);
}
...but the event won't fire as I've said. Any ideas?
EDIT - Here's the markup for my AddressUserControl. There's no logic in the code behind file
<%# Control Language="C#" ClassName="AddressUserControl" AutoEventWireup="true" CodeBehind="AddressUserControl.ascx.cs" Inherits="XFAWithUserControl.UserControls.AddressUserControl" %>
<asp:Panel ID="pnlAddressForm" runat="server">
<asp:Label ID="lblStreet" runat="server" Text="Street Address"></asp:Label>
<asp:TextBox ID="txtStreet" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="lblState" runat="server" Text="State"></asp:Label>
<asp:TextBox ID="txtState" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="lblZip" runat="server" Text="Zip"></asp:Label>
<asp:TextBox ID="txtZip" runat="server"></asp:TextBox>
<br /><br />
<asp:Button ID="btnRemoveAddress" runat="server" Text="Remove Address" />
</asp:Panel>
right now my click event for btnRemoveAddress is just something silly like this...
private void addressUserControlButton_Click(object sender, EventArgs e)
{
Button thisButton = sender as Button;
thisButton.Text = "Why Hello";
}
but my goal is to have it remove the associated AddressUserControl, so that a user can add and/or remove an arbitrary number of AddressUserControls from the page by clicking buttons.
EDIT - Here's what I have now, still doesn't work
protected void btnAddAddress_Click(object sender, EventArgs e)
{
AddressUserControl aCntrl = LoadControl("~/UserControls/AddressUserControl.ascx") as AddressUserControl;
addresses.Add(aCntrl);
phAddresses.Controls.Add(aCntrl);
findAddressControlRemoveButton(aCntrl);
addressUserControlButton.ID = "btnRemoveAddress" + addresses.Count;
aCntrl.ChangeText += new EventHandler(addressUserControlButton_Click);
}
private void addressUserControlButton_Click(object sender, EventArgs e)
{
Button thisButton = sender as Button;
thisButton.Text = "Why Hello";
}
AddressUserControl.ascx
<asp:Panel ID="pnlAddressForm" runat="server">
<asp:Label ID="lblStreet" runat="server" Text="Street Address"></asp:Label>
<asp:TextBox ID="txtStreet" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="lblCity" runat="server" Text="City"></asp:Label>
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="lblState" runat="server" Text="State"></asp:Label>
<asp:TextBox ID="txtState" runat="server"></asp:TextBox>
<br /><br />
<asp:Label ID="lblZip" runat="server" Text="Zip"></asp:Label>
<asp:TextBox ID="txtZip" runat="server"></asp:TextBox>
<br /><br />
<asp:Button ID="btnRemoveAddress" runat="server" Text="Remove Address" OnClick="btnRemoveAddress_Click" />
</asp:Panel>
AddressUserControl.ascx.cs
public event EventHandler ChangeText;
protected void Page_Load(object sender, EventArgs e)
{
}
public void btnRemoveAddress_Click(object sender, EventArgs e)
{
if (this.ChangeText != null)
{
ChangeText(sender, e);
}
}
You need to have the logic in your click handler add to the panel's Controls collection as well as to the list of controls, like this:
protected void btnAddAddress_Click(object sender, EventArgs e)
{
AddressUserControl aCntrl = LoadControl("~/UserControls/AddressUserControl.ascx") as AddressUserControl;
addresses.Add(aCntrl);
phAddresses.Controls.Add(aCntrl);
}
UPDATE:
In your user control, you need to define an event that can be defined in the page that hosts the user control, like this:
AddressUserControl.cs (code-behind):
public event EventHandler RemoveAddress;
protected void removeAddressUserControlButton_Click(object sender, EventArgs e)
{
// Find out if the event has been set, if so then call it
if (this.RemoveAddress!= null)
{
RemoveAddress(sender, e);
}
}
Now on your page where you are using the user control, do this:
// Wire up the user control's event
nameOfUserControl.RemoveAddress += new EventHandler(addressUserControlButton_Click);
Finally, implement the addressUserControlButton_Click event:
protected void addressUserControlButton_Click(object sender, EventArgs e)
{
// Do your dynamic control creation here or whatever else you want on the page
}

Hide and Show Label and Button

I have 2 labels and 2 text boxes and 1 buttons displayed.
When the page loads the Name and Button (will be initially displayed). Later when i click on the Button i need to display the age label and textbox. How can i do this ?
<ol>
<li>
<asp:Label runat="server" AssociatedControlID="Name">
User name
</asp:Label>
<asp:TextBox runat="server" ID="Name" Width="167px" />
<asp:Button ID="Button1" runat="server" Text="Button" />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="age">age</asp:Label>
<asp:TextBox runat="server" ID="age" TextMode="age" Width="240px" />
</li>
</ol>
code for button press
protected void Button1_Click(object sender, EventArgs e)
{
}
You could set the label/textbox Visible property to True in server side. Alternatively, you could use JavaScript to avoid post backs to the server.
Add OnClientClick to your button :
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ShowLabel();"/>
and declare the JavaScript function on page:
<script type="text/javascript">
function ShowLabel() {
// Note that the client ID might be different from the server side ID
document.getElementById('lblAge').style.display = 'inherit';
}
</script>
You need to set the Label Display style to none initially.
<asp:Label ID="lblAge" style="display: none;" runat="server" AssociatedControlID="age">age</asp:Label>
Try below code:
You need to set Visible property of controls to True or False according to your requirement. By default, all controls are visible on the screen whenever they are added on the page.You need to do following thing:
You need to remove TextMode="age" as there is not any supported textmode of type age.
Need to define id of control if you want to access a control server side in code behind. So define the ID of Label that you put corresponding to Age textbox.
By Default age label and textbox will not be visible by using below code:
<asp:Label ID="lblAge" runat="server" AssociatedControlID="age" Visible="false">age</asp:Label>
<asp:TextBox runat="server" ID="age" Width="240px" Visible="false"/>
Code behind:
After button click age label and the textbox will be visible by using below code:
protected void Button1_Click(object sender, EventArgs e)
{
lblAge.Visible = true;
age.Visible = true;
}
First add id to elements and set visible false
<asp:Label runat="server" AssociatedControlID="age" Visible="false" Id="lbl1">age</asp:Label>
<asp:TextBox runat="server" ID="age" TextMode="age" Width="240px" Visible="false" />
button click event set visible true
protected void Button1_Click(object sender, EventArgs e)
{
lbl1.Visible = True;
age.Visible = True;
}
this is the basic concept of asp.net. you can use visible property of the control.
your TextMode enumeration is wrong. there is no Age enumeration for Textbox.TextMode TextMode
<li>
<asp:Label runat="server" AssociatedControlID="age" id="lblAge">age</asp:Label>
<asp:TextBox runat="server" ID="age" TextMode="age" Width="240px" />
</li>
in code behind
protected void Button1_Click(object sender, EventArgs e)
{
lblAge.Visible=true;
age.Visible=true;
}
protected void Page_Load(object sender, EventArgs e)
{
NameLabel.Visible = false;
NameBox.Visible = false;
}
protected void Button1_Click(object sender, EventArgs e)
{
NameLabel.Visible = true;
NameBox.Visible = true;
}

Set innerHTML in javascript and get from C#

I have two labels:
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
and I set innerHTML by javascript:
document.getElementById('Label1').innerHTML = position.lat();
document.getElementById('Label2').innerHTML = position.lng();
How I can get those labels values in codebehind? I try:
TextBox2.Text = Label1.Text;
UPDATE:I need to get pushpin location:
<artem:GoogleMap ID="GoogleMap1" runat="server"
EnableMapTypeControl="False" MapType="Roadmap" >
</artem:GoogleMap>
<artem:GoogleMarkers ID="GoogleMarkers1" runat="server"
TargetControlID="GoogleMap1" onclientpositionchanged="handlePositionChanged">
</artem:GoogleMarkers>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
<script type="text/javascript">
var list = document.getElementById("Label1");
function handlePositionChanged(sender, e) {
printEvent("Position Changed", sender, e);
}
function printEvent(name, sender, e) {
var position = e.latLng || sender.markers[e.index].getPosition();
document.getElementById('Label1').innerHTML = position.lat();
document.getElementById('Label2').innerHTML = position.lng();
}
</script>
protected void Button1_Click(object sender, EventArgs e)
{
TextBox2.Text = Label1.Text;// return value: Label
}
You cannot access the value on server side. You will have to use a hidden field for that:
<asp:HiddenField ID="Hidden1" runat="server" />
The set the innerHtml value in the Hidden field by doing:
document.getElementById('<%= Hidden1.ClientID %>').value = position.lat();
You can then access it from server side by doing:
TextBox1.Text = Hidden1.Value;
You are not able to do that with the Label control as when the page is posted back the content of labels are not posted to the server. You would need to make use of an input control of sorts. Probably a hidden input would be your best bet.
Take a hidden field like below
<asp:HiddenField ID="hdnBody" ClientIDMode="Static" runat="server" />
Then set its value in Jquery like below
<script>
function GetEmailID() {
var bodyHtml = $("#editor").html();
$("#hdnBody").val(bodyHtml);
}
</script>
And in the code behind do this to get it
string body = hdnBody.Value;

Categories

Resources