Hello all how to use HTML text field instead of ASP.NET textbox.?
How to write C# code to make use of HTML forms instead of ASP.NET
EDIT:
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input id="Text1" type="text" runat="server" />
<asp:Button ID="Button5"
runat="server" Text="Button" OnClick="button5_click" />
<div>
<script runat="server">
protected void button5_click(object sender, EventArgs e)
{
Text1.Value = "Hello";
}
</script>
</form>
Instead of using or whatever server control, just type in the standard type tags or whichever HTML control you want.
If you want to be able to access them from your code-behind, then just include a runat="server" value with each HTML tag and make sure you give it an ID.
You need to retrieve the value from the HTTP request's Form collection:
<input type="text" name="MyTextField" />
Code behind:
string value = Request.Form["MyTextField"];
This question doesn't make much sense. You really should clarify and flesh out the question and explain what you are trying to do.
In some ways, an ASP.NET textbox is an HTML text field that C# code can make use of. So what's the problem with an ASP.NET textbox?
You can create an instance of a HtmlInput control in code, or alternatively add a runat="server" attribute to an <input> element in your aspx file, you can then access this from server-side code using it's ID.
As an alternative, you may wish to take a look at http://asp.net/mvc to get better control of your HTML markup.
Related
i have this code in my default aspx file :
<body>
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="holder1" runat="server">
<asp:Label ID="label1" runat="server" Text="Label">
</asp:Label>
<input type="text" ID="txt" runat="server"/>
<asp:TextBox ID="txt2" runat="server"></asp:TextBox>
<asp:Button Text="Ok" ID="btnOk" runat="server" onclick="btnOk_Click" />
</asp:PlaceHolder>
</div>
</form>
</body>
and my code behind is :
TextBox tb1 = holder1.FindControl("txt") as TextBox;
Response.Write(tb1.Text);
TextBox tb2 = holder1.FindControl("txt2") as TextBox;
Response.Write(tb2.Text);
my problem is here that findcontrol ("txt") return null value!!! because i used <input> ,how can i handle this control ?
Firstly, you don't need the holder1.FindControl as you can access the controls directly.
To get the input control, use the code;
HtmlInputText tb1 = this.txt;
Response.Write(tb1.Value);
You might need to import System.Web.UI.HtmlControls.
Using System.Web.UI.HtmlControls;
Edit
To find controls which have been dynamically added via Javascript, you will need to use the Request object.
string theValue = Request.Form["txt"].ToString();
An input type="text" is not a TextBox. So you either should cast it to HtmlInputText or use a TextBox instead.
var txt = (HtmlInputText)row.FindControl("txt");
Note that you need to add using System.Web.UI.HtmlControls,
MSDN :
Control.FindControl : Method Searches the current naming container for
the specified server control.
as is not server control it is not pissible to find it ! any Other Way to handle controls that are not server side ?
what happen if any one want to get text of text box that is not run at server .
In asp.net, if you use a custom attribute, usually it is rendered as-is.
Considering this markup (note: attributes such as id, name and for were removed in all examples as their generated id/names are verbose):
<asp:TextBox runat="server" data-foo="bar" />
Is rendered in asp.net as:
<input type="text" data-foo="bar" />
That is, asp.net keeps data-foo untouched.
Check box are usually rendered like this:
<asp:CheckBox runat="server" Text="Normal" />
Renders as:
<input type="checkbox" />
<label>Normal</label>
But if you add a custom attribute on a checkbox:
<asp:CheckBox runat="server" Text="Custom attribute" data-foo="bar" />
It renders as:
<span data-foo="bar">
<input type="checkbox" />
<label>Custom attribute</label>
</span>
As you can see, a span in rendered to hold the attribute. This also happens if you add the attribute in code behind. This does not happen with any other HtmlControl, AFAIK.
Does anyone know why this span is rendered to hold the attribute?
Is there anyway to render the attribute in the input tag?
I'm not sure why it's rendered with a span, but I suppose you can add the attribute directly to the input element of the CheckBox in code-behid like this:
myCheckBox.InputAttributes.Add(...)
Reference links:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.inputattributes.aspx
http://forums.asp.net/p/541142/541562.aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.attributecollection.add.aspx
Update
An additional parent element is used, so that the attributes you apply to a CheckBox can affect both the input and the text. I suppose it's a span (and not a div), because it's an inline element, making it more convenient to use in different scenarios.
Reference links:
http://en.wikipedia.org/wiki/Span_and_div#Differences_and_default_behavior
http://learnwebdesignonline.com/span-div
This is the way that render engine builds the CheckBox control, there isn't very much to do about it.
Something you could do is creating a runat="server" input.
<input id="myInput" runat="server" type="checkbox" data-foo="bar"/>
<label>Custom attribute</label>
Another option is adding the data-foo attribute using jquery on document load
$(function(){
$('span[data-foo]').each(function(){
var $span = $(this);
var value = $span.data('foo');
$span.find('input').data('foo',value);
});
})
Just to add another method that I use when all else fails, you can always use a literal control and make it render whatever you want. You need to do a bit more work when handling the postback, but sometimes this is the only way to get the html you need.
Markup:
<asp:Literal ID="myLiteral" runat="server"/>
Codebeside:
myLiteral.Text = string.Format("<input type=\"checkbox\" data-foo=\"{0}\" /><label>Normal</label>", value)
If you are trying to access that attribute on click event you can do that by casting the control. For example I have a check box and I assign it a custom attribute like you did
<asp:CheckBox runat="server" data-foo="bar" />
Now on OnCheckedChanged I need to get that value and in my method I got a sender object.
protected void chk1_CheckedChanged(object sender, EventArgs e)
{
CheckBox myControl = (CheckBox)sender;
string value = myControl.Attributes["data-foo"].ToString();
}
I hope this help someone
I have a website where i want to implement search functionality.So i added the below code to have a search box in my html page
<form id="search" method="post" action="Results.aspx">
<input id="txtSearchKey" type="text" name="txtSearchKey" />
<input id="Submit1" type="submit" value="submit" /><br />
<br />
</form>
In Results.aspx, I want to read the value user has entered in the txtSearchKey text box. What is the ideal way to do this ? I used
string strKey = Request.Form["txtSearchKey"].ToString();
But it throw a null reference exception.
I don't want to have all pages in ASP.NET.I want to have only the result page as ASP.NET
Could be because you do not have a NAME attribute on the textbox field. That's the value that is used as the key in the Request.Form collection. An input field without a name attribute will not be submitted, I think.
e.g.:
<input id="txtSearchKey" type="text" name="txtSearchKey" />
You can get your txtSearchKey field by this :
string strKey = PreviousPage.Request.Form["txtSearchKey"].ToString();
But, instead of using form action to forward your search to another page, you can use a button with PostBackUrl property like that :
<asp:Button runat="server" ID="btnSearch" PostBackUrl="Search.aspx" />
Because in ASP.NET, to have more then one form is not allowed.
Is there any reason you don't use
form runat="server"
and then drag a TextField and a Button in this form. Then doubleclick the button and write code you want.
If you want to do it your way you need to give your s a name="txtMySearchKey" for it to work
The way you are going about things is not really the way you work in ASP.NET web forms. The preferred way is to use asp.net server controls and events to abstract the process you are trying to achieve. For instance, your form should really be something like this (note the runat="server" attribute that enables you to reference the controls programmatically):
<form id="form1" runat="server">
<div>
<asp:Panel ID="PanelSearch" runat="server" DefaultButton="ButtonSubmit">
<asp:TextBox ID="TxtSearchKey" runat="server" /><br />
<asp:Button ID="ButtonSubmit" Text="Submit" runat="server"
onclick="ButtonSubmit_Click" /><br />
</asp:Panel>
</div>
</form>
Then, in your code behind you would handle the ButtonSubmit_Click event like this to enable you to get the value from the TxtSearchKey textbox:
protected void ButtonSubmit_Click(object sender, EventArgs e)
{
string strKey = TxtSearchKey.Text;
}
See the Quickstart example for the TextBox control for more info.
Just do not use .toString() after the Request.form... it will not give a null reference after that.
is there any good free/open source time picker control that goes well with ASP.NET Calendar control?
The answer to your question is that Yes there are good free/open source time picker controls that go well with ASP.NET Calendar controls.
ASP.NET calendar controls just write an HTML table.
If you are using HTML5 and .NET Framework 4.5, you can instead use an ASP.NET TextBox control and set the TextMode property to "Date", "Month", "Week", "Time", or "DateTimeLocal" -- or if you your browser doesn't support this, you can set this property to "DateTime".
You can then read the Text property to get the date, or time, or month, or week as a string from the TextBox.
If you are using .NET Framework 4.0 or an older version, then you can use HTML5's <input type="[month, week, etc.]">; if your browser doesn't support this, use <input type="datetime">.
If you need the server-side code (written in either C# or Visual Basic) for the information that the user inputs in the date field, then you can try to run the element on the server by writing runat="server" inside the input tag.
As with all things ASP, make sure to give this element an ID so you can access it on the server side.
Now you can read the Value property to get the input date, time, month, or week as a string.
If you cannot run this element on the server, then you will need a hidden field in addition to the <input type="[date/time/month/week/etc.]".
In the submit function (written in JavaScript), set the value of the hidden field to the value of the input type="date", or "time", or "month", or "week" -- then on the server-side code, read the Value property of that hidden field as string too.
Make sure that the hidden field element of the HTML can run on the server.
In the textbox add this:
textmode="Date"
It gives you nice looking Datepicker like this:
Other variations of this are:
textmode="DateTime"
It gives you this look:
textmode="DateTimeLocal"
JQuery has the best datepicker IMHO. While it's not specific to .Net is still works great.
HTML:
<input type="text" value="9/23/2009" style="width: 100px;" readonly="readonly" name="Date" id="Date" class="hasDatepicker"/>
In head element:
<script src="../../Scripts/jquery-1.3.2.min.js" language="javascript" type="text/javascript"/>
<script src="../../Scripts/jquery-ui-1.7.1.custom.min.js" type="text/javascript"/>
Simple as that!
Since it's the only one I've used, I would suggest the CalendarExtender from http://www.ajaxcontroltoolkit.com/
This is solution without jquery.
Add Calendar and TextBox in WebForm -> Source of WebForm has this:
<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="DateChange">
</asp:Calendar>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
Create methods in cs file of WebForm:
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = DateTime.Today.ToShortDateString()+'.';
}
protected void DateChange(object sender, EventArgs e)
{
TextBox1.Text = Calendar1.SelectedDate.ToShortDateString() + '.';
}
Method DateChange is connected with Calendar event SelectionChanged. It looks like this:
DatePicker Image
<asp:TextBox ID="TextBox1" runat="server" placeholder="mm/dd/yyyy" Textmode="Date" ReadOnly = "false"></asp:TextBox>
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
Basic Date Picker Lite
This is the free version of their flagship product, but it contains a date and time picker native for asp.net.
Try bootstrap-datepicker if you are using bootstrap.
There is an easy, out of the box implementation: the HTML 5 input type="date" and the other date-related input types.
Okay, you can't style the controls that much and it doesn't work on every browser, but still it can be a very good option in the long term if all modern browsers support it and don't want to include heavy libraries that don't always work that good on mobile devices.
#Html.EditorFor(model => model.Date, new { htmlAttributes = new { #class = "form-control", #type = "date" } })
this works well
If you would like to work with a textbox, be aware that setting the TextMode property to "Date" will not work on Internet Explorer 11, because it does not currently support the "Date", "DateTime", nor "Time" values.
This example illustrates how to implement it using a textbox, including validation of the dates (since the user could enter just numbers). It will work on Internet Explorer 11 as well other web browsers.
<asp:Content ID="Content"
ContentPlaceHolderID="MainContent"
runat="server">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#
<%= txtBoxDate.ClientID %>").datepicker();
});
</script>
<asp:TextBox ID="txtBoxDate"
runat="server"
Width="135px"
AutoPostBack="False"
TabIndex="1"
placeholder="mm/dd/yyyy"
autocomplete="off"
MaxLength="10"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1"
runat="server"
ControlToValidate="txtBoxDate"
Operator="DataTypeCheck"
Type="Date">Date invalid, please check format.
</asp:CompareValidator>
</asp:Content>
is it possible to display, with a click of a button an entirely different form on the same aspx page? please take note that although i have experience with vb.net, i have almost none with asp.net. thank you very much for your responses
I would use and in your code behind, load up the page and then place it in the placeHolder. And then hide the old form using javascript. The idea the other person said would also work, but I like using the placeholder, myself.
I think it's all really determinate on what you want to do with the forms and how badly you would want the code for the other form laying on the page, or not.
If I understand, what you need is, on the click event:
response.redirect "newpage.aspx"
Create each of the forms on the same page, one with visible=true and the other visible=false, and when the user clicks on the appropriate button, switch the visibilities.
<form id="Form1" runat="server" visible="true">
<div>
<asp:Button ID="Button1" runat="server" Text="Show Form 2" onclick="Button1_Click" />
</div>
</form>
<form id="Form2" runat="server" visible="false">
<div>
<asp:Button ID="Button2" runat="server" Text="Show Form 1" onclick="Button2_Click" />
</div>
</form>
And in the code behind:
protected void Button1_Click(object sender, EventArgs e)
{
this.form2.Visible = true;
this.form1.Visible = false;
}
protected void Button2_Click(object sender, EventArgs e)
{
this.form2.Visible = false;
this.form1.Visible = true;
}
Probably not the most "Ajaxy" solution, but you could use an iframe, with the src set to the forms location.
You should be aware of ASP.NET's MultiView control. It does require a postback to change views, and it is kinda heavy on the ViewState, but its an option to consider.
Well, there's several ways to go about that I suppose. Riffing off tekBlues, you can do a Server.Transfer "yourpage.aspx". You can then use the PreviousPage property to get to data from the old page.
You can use user controls and a placeholder on the main page. Of course dynamically loaded controls holds extra complexity.
You could use a MultiView control. Asp.Net will maintain all vars for you. Useful for the quick and dirty.
These are all webform solutions though. If you're looking for an AJAX solution, might need to keep on looking for answers.
It is NOT allowed to have more then 1 form runat="server" on an asp.net page. What you could do, is create 2 panels on your page, 1 with the Visible property set to false. Then when a button is clicked in the event handler you set the Visisble property to true, while setting the other 1 to false. Wrap the Panel in an UpdatePanel to get rid of the postback.
<asp:UpdatePanel><ContentTemplate>
<asp:Panel ID="pnl1" runat="server">
<asp:Button OnClick="Button_CLick" />
</asp:Panel>
<asp:Panel ID="pnl2" runat="server" Visible="false">
</asp:Panel></ContentTemplate></asp:UpdatePanel>
the code in the Button_CLick handler would then be pnl1.Visible = false; pnl2.Visible = true;
You could do it with CSS/Javascript, here is what I would do first:
1) code up two forms, place them in a separate divs
2) using CSS hide one div on page load
3) then place a button on the page, in the onlick button event unhide the second form and hide the first one.
Make sure that you only have ONE form tag, but 2 divs inside it which you will hide/unhide. Keep in Mind that that the form can only be submitted to its own page, that's asp.net.
in your HTML:
<form runat="server" id="myForm">
<div id="myForm1">
<! -- form 1 code goes here -- !>
</div>
<div id="myForm2">
<! -- form 2 code goes here -- !>
</div>
<input type="button" onclick="toggleVisibility();" />
</form>
Then in your CSS
#myForm1 {
display: none;
}
Then ToggleVisibility() will change the display attribute of divs.
Use AJAX to load the content of another page into the same page.
Use Response.Redirect or Server.Transfer to move to the next page.