Updating label using jquery and code behind - c#

I have a label on a page and I'm updating the text property of the label (with a calculated value) when text is changed in a textbox.
I'm updating the label like so:
$myLabel.text("123");
The text is being displayed correctly on the screen butwhen I try to save the text value to an object in the code behind (When I press a button) the text property of the label is "" and not "123".
Code behind:
var myLabel = myLabel.Text;
//the var myLabel is "" when it should be "123"
Any ideas as to why this would be?
Thanks in advance,
Zaps

Not sure if this is the correct way to do it but I got around the problem by using a hidden field.
I updated the label text as above:
$myLabel.text("hello");
but then I updated the hidden field value:
$('#<%= hiddenField.ClientID %>').val("hello");
I was then able to use the hidden field in the code behind:
var myLabel = hiddenField.Value.ToString();
This seems to work fine.

Why don't you check the value that was entered in the textbox. based on your description, that should be the same and it will be available. Otherwise, I think you need to post some more code to clarify what you are doing.
The value of the label text needs to be stored in ViewState, otherwise it will be overwritten on the postback triggered by the button click.
One option would be to also change the value of a hidden control. Any changes to this value will be available in the code behind on postback.
<asp:Hidden id="hiddenLabel" runat="server" />

Html controls like labels, spans, divs don't post their values to the server - while inputs do. ASP.NET maintains changes in controls by using ViewState.
When you change the value of a server control, it's state is often persisted there. If you change the value on the client side via JavaScript, the ViewState isn't changed, and this is why on PostBack you get the original Empty value.

In what function are you putting var myLabel = myLabel.Text;?
It won't work in the init function -- you need to give the page time to load from the viewstate. Best in the button push event handler.
Update:
You need to use an form input control (eg TextBox) not label. Labels are readonly.

Related

preserve UI state of asp.net controls after button click

I have an ASP.NET web app with a dropdown list and a number of ASP.NET textboxes/labels. when the user chooses a particular item from the dropdownlist the labels change text and some of them are hidden etc using jquery. However after clicking on a button the controls are being changed back as when the page is first loaded.
Please suggest
How i Can preserve the new labels name etc?
Should i put the same jquery code i wrote for the dropdownlist on change event also in the on document load event?
Should i use hidden fields to store the value?
1: How i Can preserve the new labels name etc?
Yes,
You can use hidden field to store.
2: Should i put the same jquery code i wrote for the dropdownlist on change event also in the on document load event?
No,
On page_load access hidden field, extract and use values.
3: Should i use hidden fields to store the value?
Yes,
You can use hidden field to store changes you made in GUI control using jQuery. Make that hidden field server accessible by making it runat server. On server end when you get postback access the hidden field, extract and assign values to respective controls. You can see how it would work in this post.
As you might be knowing , after clicking the button if it is submit type it will do the postback to the server , as HTTP is stateless , it is your responsbility to generate the label text and value again. Generally ASP.NET viewstate take care of doing so for input texts, but for labels you have to do by yourself. I can suggest the solution like this
1) Have a javascript method which will have the logic to change the value of label and hidden field based on the selected value of the dropdown
function MyFunction ( ddlSelectedValue)
{
if(ddlSelectedValue == "1")
{
$("#LABELID").html('YOUR VALUE');
// rest other logics
}
}
2) ASP.NET viewstate will help you to preserve the dropdown state after button click . So on add this jquery script on the page top
$(document).ready(function(){
var ddlSelectedValue = $("#DDLID").val();
MyFunction(ddlSelectedValue);
});
3) attach the the point 1 method to onchange of the dropdown also.
4) Using the hidden field is Ok , because hidden fields will serve your requirement in using in the server side as they will also be posted back.

Changing a user created control based on content of input from JS tied textbox

I want to change a user created control based on content of the input inside of textbox tied to JS.
My user control has an attribute field titled "userInput" where I pass the content of the textbox.
My page looks like this:
The textbox has an autocompleteextender and a Javascript function runs when an item from the dropdown is selected.
How do I pass the selected value back to the server so that my ascx user control can be updated with the appropriate data. (corresponding to what is in the textbox)
Assume that updatepanels/scriptmanagers are set up correctly (they are :-) )
Assuming you have an update panel around your custom ascx. Set up a trigger on that update panel that comes from the TextChanged event of your text box then set AutoPostback = true on the textbox. On the server, you can subscribe to the text changed event of the text box and write the code there to change the contents of the user control.

ASP.NET Get Original Text of Label

Is there any way to get the original text from a Asp:Label on a page, after the text has been altered?
with the orginal text i mean the text that is hard coded into the asp.net markup.
There is no standard way to get it back after some chages, but you could do that in some your ways, for example add custom attributes to label
textLabel.Attributes.Add("data", textLabel.Text);
and then use it on your page.
Or cache label value using js code on page startup or statically.
Create a property that wraps the text assignment. Before the assignment take the current value and assign it to a hidden input or stick it in the session or viewstate.
Create a property that retrieves the previous value from the hidden input or session or viewstate.
Could get fancy and extend the label to add a PreviousValue property. Not sure how this would work in practice though.

How to pull PostBack data into a dynamically added UserControl (.NET)?

I have a Panel on my Page:
<asp:Panel ID="pnlTest" runat="server" />
Then I dynamically add a TextBox to it on Page_Load:
TextBox simpleTextBox = new TextBox();
pnlTest.Controls.Add(simpleTextBox);
simpleTextBox.ID = "SimpleTextBox-1";
Is there a way to pull in the information typed in this TextBox without pulling it directly from Request.Form? I thought I could do something like this after I added it again:
lblPresentResults.Text = myTextBox.Text;
I know this example seems contrived, but I figured I'd try to eliminate all the other variables in my specific application, especially to ask a question here.
You need to add the textbox before viewstate loads, such as in Page_Init, and you should be able to do this.
Just create the text box on Init or PreInit rather than Load, so that it exists in the page before ViewState is restored. Then ASP.Net will update it for you automatically.

ImageUrl lost on postback with dynamic controls, but textboxes keep their value

I have a button that adds an already defined usercontrol programtically. I am rebuilding each control on Postback and they show up fine. If I put text in the textbox it shows up fine, however my images are losing their url. Any idea why or how I can fix this?
I tried adding AJAX updatepanel to see if that would help, but it does not.
To further explain - I have a button that after clicks set the url of the image - I also put this value in the textbox just to see if the same thing happens - after postback, my textbox still has the value, but the image does not - and all of my other ASP.Net images lose their image and they are defined right on the controls (ie: ImageUrl)
--- update
OK, I have found some more insight to my issue - some solutions but still one problem remains.
The reason the images were loosing their url is because they were and not ASP.Net images - ASP.Net remembers the values when they are recreated on postback - however the Main image that im changing via javascript looses its value - I'm very certain this is because of using javascript to change it, on post back it reverts back to the previous value... so for a solution I will try to stuff it in a hidden value, then use that value on postback to define the ImageUrl of the image...
You are correct <img> is an html control, while <asp:Image> is a server control. As long as server controls have viewstate enabled they will keep their values during postbacks.
You are correct that changing an image's URL via JavaScript will not get it returned during the postback as this is not a form value. Therefore, it will be lost forever if you do not save it into a form field, such as the hidden field that you suggested.
Image is not form field. That is why it's value is never posted back to server.
The reason your asp:Image controls retain value during postback is because they are stored in viewstate (which is stored in hidden field). When you click button this viewstate is posted back to server, and asp.net sets the ImageUrl property of image control from viewstate in early events of page lifecycle.
In short the server side form controls values are available after postback. Same way if you have normal html form fields (https://www.w3schools.com/html/html_form_elements.asp), you will get it's value using Request.Form collection.
You are setting your Image's src using javascript (and which is obviously not in original viewstate), that is why you are not getting it's value in postback. You should use Hidden Field to set value using javascript, which can be available after postback.

Categories