"Converting" asp.net form to html form - c#

i have an asp.net webform. the users enter data into the textboxes and i do OnClick="SubmitData" with a button:
now i would like to use jquery and make my form look much better and i do not know if i can keep the asp.net controls or whether i have to convert to html controls.
question do i need to convert
<asp:TextBox ID="section_c_issue_error_identified_byTextBox" width="500" runat="server"
/>
to something like this:
<textarea name="comments" id="comments" rows="5" cols="60"></textarea>
and if so, how would i grab the user input from these new html textboxes?
can you tell me exactly how would i pass these values into my c# code?

You don't need to convert anything as it gets converted to html anyway on clientside.
There are few ways to grab the value of the text box such as,
If the following is my textbox,
<asp:TextBox ID="txtCountry" Width="500" runat="server" CssClass="countryText" />
I can use,
$('#<%= txtCountry.ClientID%>').val()
$('.countryText').val()

You don't need to convert anything, simply adding the property clientID the type static
ClientIDMode="Static"
That's warranted that the id asp component doesn't change the name of the id
<asp:TextBox ID="txtCountry" Width="500" runat="server" CssClass="countryText" ClientIDMode="Static" />
$('#txtCountry').val();

question do i need to convert
<asp:TextBox ID="section_c_issue_error_identified_byTextBox"
width="500" runat="server"
/>
to something like this:
<textarea name="comments" id="comments" rows="5"
cols="60">
Yes, you need to do that.
To capture input from those controls using JQuery, you need to do:
var elementValue = $('#elementid').val();
elementid is the id you assigned to the element in your markup. In your example above, it would be "comments".
elementValue will have the text entered in your text area.

Related

How do I display an image within the HiddenField asp.NET field?

Note: I'm just an lowly intern here, so be nice :) I've spent some time researching before asking but didn't find the answer I'm looking for.
Suppose I have a line in my .aspx file like so:
<asp:HiddenField runat="server" ID="hiddenfield" Value=??? >
What should I put for the value if I would like this hidden field to display a .png image when shown?
Sorry I can't give much more detail, I don't want to violate my company's policies. If you need any more information, let me know and I'll try to give an example.
If you want to display an image, you should use the Image control.
If you want to hide it, wrap it in a div and set the visibility to hidden. For example:
<div id="divHidden" style="visibility: hidden">
<asp:Image runat="server" AlternateText="this is an image" ImageUrl="/img/myimage.gif"/>
</div>
May be you can save image path only in hidden field using this.
<asp:HiddenField runat="server" ID="hiddenfield" Value="/img/myimage.png" >
And later retrieve that using javscript document.getElementById("hiddenfield").value , and set that path to actual img element if needed.
You probably want to use:
<asp:Image ID="myImage" ImageUrl="myimage.png" Visible="false" AlternateText="foo" />
And when you need to show it from your codeBehind:
myImage.Visible=true;

Find input value and associated html label text in asp.net

I have the following setup:
<label for="<%= inpUserName.ClientID%>">Email</label>
<asp:TextBox id="inpUserName" runat="server" />
As you may noticed the label is not asp's label. How do I get the value of the input and the text of the label?
Edit
I am trying to loop through the posted form keys and get associated labels.
You could use <asp:Label> directly, just need to specify AssociatedControlID
<asp:Label ID="UsernameLabel"
Text="Email"
AssociatedControlID="inpUserName"
runat="server">
<asp:TextBox id="inpUserName" runat="server" />
Make the label server-side:
<label runat="server" id="lblEmail" for="<%= inpUserName.ClientID%>">Email</label>
Then you can access its text in code behind like this:
// label text
string labelText = lblEmail.InnerText;
// input value
string inputValue = inpUserName.Text;
change to:
<label runat="server" id="ClientID" for="<%= inpUserName.ClientID%>">Email</label>
You can find the textbox using the Id var txt = inpUserName.Text; for the label you can't, since its not a server side control and its not a request variable (input with value for instance) then you can't, unless you make it server side too and access in the same manner.

How to solve the following compilation error in C#?

My .aspx looks like the following:
<div id="valueIntroduction" type="text" class="labelarea" runat="server">
<input name="$labeluniversityid" type="text" id="labeluniversityid" style="color:#7D110C;border:0;background-color:#C0D5F2;width:100%" />
</div>
.cs File looks like:
if (results.Read())
{
labeluniversityid.value = results["TEXT_CONTENT"].ToString();
}
Exactly what am trying do is am getting the data from the database and displaying it in the valueIntroduction div. That is workiing fine. Now i added a text box with readonly mode. So that in my page if I press EDIT button, the value could be edited.
Use a TexBox component:
<asp:TextBox ID="labeluniversityid" runat="server" CssClass="yourcssclass"></asp:TextBox>
As for the styling:
.yourcssclass
{
color:#7D110C;
border:0;
background-color:#C0D5F2;
width:100%
}
Then, in your code behind you can easily use it like this:
labeluniversityid.Text = results["TEXT_CONTENT"].ToString();
Keep in mind that ASP.NET Controls are translated into common HTML tags, so you can wrap it and style it as you would with any other normal input of type text.
Also: type="text" is not valid for div
Try putting runat="server" attribute in <input id="labeluniversityid"> tag.
Or use a <asp:TextBox> control as areks suggests.
You need to add -
runat="server"
to your input field
Or, even better, use an
<asp:textBox ..>

Getting data from an Input control in to code behind

I am using asp.net C#
I am also using the jQuery UI Calendar control.
calendar control
It appears the calendar control wants to work with an input control with an ID of "datepicker".
<input type="text" id="datepicker" />
I want to use value of the input control in my code behind but seeing how it is not an asp.net control I am not sure how I can reference it in the code behind.
Does anyone know how to get the value of the input control in the code behind?
use
<input type="text" id="datepicker" name="datepicker" />
and in the code behind:
Request.Form["datepicker"]
In fact, Form property of Request is populated with form values.
Here you have to mention your form name which contains input tag
<input name="txtemail" id="txtemail" runat="server" type="text" class="cssspa" form="form"/>
in C#
string email = txtemail.Value.ToString();
now u can get data from textbox
If you want to use basic form pulling, you need to add a name attribute:
<input type="text" id="datepicker" name="datepicker" />
if(Page.IsPostBack)
{
string value = Request.Form["datepicker"];
}
Alternatively, you can mark is as an HtmlInputControl
<input type="text" id="datepicker" runat="server" />
System.Web.UI.HtmlControls.HtmlInputControl datepickerControl = this.FindControl("datepicker") as System.Web.UI.HtmlControls.HtmlInputControl;
if(datepickerControl != null)
string value = datepickerControl.Value;
You can access the value via the Request object like onof wrote, or you can turn every html tag into a server control by adding the attribute runat:
<input type="text" id="datepicker" runat="server" ClientIdMode="static" />
The attribute ClientIdMode="static" ensures that the tags ID is not changed by the ASP.NET runtime.
Then you can access the input by the autogenerated member datePicker.
Since you explicitly say code-behind, I assume you probably want to stay with the WebForms/Controls model? With clientidmode you can do that while also having a determinite id value for the calendar.
<asp:TextBox id="datepicker" ClientIDMode="Static" runat="server" />
Then you can interact directly with the control from the code-behind as normal.
But, the calendar control does not require a specific ID. You can initialize it with whatever ID you want
<asp:TextBox id="DateTextBox" runat="server" />
<script>
$(function() {
$( "#<%=DateTextBox.ClientID%>" ).datepicker();
});
</script>

get asp:textbox value in client side using javascript function doesn't work

This code doesn't display the value, I don't know why?
I have server control:
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
in javascript function:
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
I enter text then click on button that call the javascript function, but the alert box doesn't display the entered text.
EDIT: when I initialize the text with Text="some text", it is displayed in alert, I want to enter text in client side and get the value of it in the Javascript function.
Thanks
Using label or textbox visible set false so it can access the value in JavaScript
Sol
1)
Make a div and set style="display:none;" so label is not display at UI(browser) but value can access in JavaScript.
This is because you server Control is called "txtTest" not "txtEventDescription"
change your javascript function to :
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
EDIT: ok, I see you've now changed the post to show the code and renamed the js control, so above is no longer relevant (for those who are confused by my answer) :-)
The problem is the Visible="false" - this control will not render into the client and will therefore not be accessible via javascript (as the HTML element does not exist client side)
So, hide the element using CSS and then call alert on it. Sample snippet
CSS
.hide-element {
display: none;
}
HTML Markup
<asp:TextBox ID="txtTest" runat="server"
Columns="23"
CssClass="white-scroll hide-element"
Rows="3"
TextMode="MultiLine"/>
JavaScript
var eventText = document.getElementById('<%=txtTest.ClientID%>').value;
alert (eventText);
This way you will definitely get an alert.
You alert is empty because you have not set the property Text for your asp:Textbox
Make it Visible="true" to your textbox and than test.
<asp:TextBox ID="txtTest" runat="server" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll" />
if "txtTest" textbox has visible="false" in that case its not render on html code on client machine and if it hasn't on client's html code then how javascript calls this textbox. Because when javascript search this textbox by its id it doesn't find and it gives an error.
you can assign any other custom attribute to the control i.e.
<asp:TextBox ID="txtTest" runat="server" Visible="false" TextMode="MultiLine"
Rows="3" Columns="23" CssClass="white-scroll"
clientID="myClientID" />
and then access control using jquery like
var txtVal = $('textbox[clientID=myClientID]').val();
hope it helps.

Categories