What is the step to get example text to show up in an asp.net textbox.
For example, textbox w/ ID = "textboxDate" has [mm/dd/yyyy] inside it for the user to reference.
I believe you want a placeholder attribute:
<asp:TextBox ID="placeholderTextBox" runat="server" placeholder="mm/dd/yyyy"></asp:TextBox>
but placeholder doenst work for many IE browser because placeholder is html5 thing.
try to use modernizr framework. it works for all browsers including all IE
here is a sample code for you.
if(modernizr.input.placeholder) {
//insert placeholder polyfill script here.
}
Visual Studio maybe not knowing the attribute. Attributes which are not registered with ASP.net are passed through and rendered as is.
<asp:TextBox ID="TextBox1" runat="server" Width="187px" placeholder="mm/dd/yyyy"></asp:TextBox>
So the above code (basically) renders to:
<input type="text" placeholder="mm/dd/yyyy"/>
You can allways use:
<input ID="placeholderTextBox" type="text" runat="server" placeholder="mm/dd/yyyy" />
and on code behind you can get or set the value using
Dim myValue As String = placeholderTextBox.value or placeholderTextBox.value = "whatsoever"
Related
I want to use a textbox that shows a text.
For example : Someone#example.com. When the user clicks on it, the textbox is cleared and ready for the user to type.
If you are working on newer browsers then you can use placeholder property which is new in HTML 5
<asp:TextBox ID="textBox1" runat="server" placeholder="Someone#exmaple.com"></asp:TextBox>
otherwise you can also use onfocus and onblur event to do this as described here
you can use this, is so easy
<input class="status" type="text" size="5" placeholder="started" />
placeholder show you the text you want
hope it helps you!
You can do the following:
Add textbox to your webpage.
Set the default text in the obj.Text property.
Add properties ( focus & blur events).
On focus event, check if the value = Someone#exmaple.com , then empty the text box.
On blur, check if the textbox is empty, then set the text : Someone#exmaple.com
Hope that helps
You can use like this
<TextBox ID="txtone" runat="server" tooltip="Enter comments"
onblur="if(this.value=='') this.value='Someone#exmaple.com';"
onfocus="if(this.value == 'Someone#exmaple.com') this.value='';"
Text="Someone#exmaple.com"></TextBox>
Try this for a server control:
<asp:TextBox ID="textBox1" runat="server" placeholder="Someone#exmaple.com"></asp:TextBox>
For an HTML control:
<input Type="Text" ID="textBox1" placeholder="Someone#exmaple.com" />
You can use this ajax if you want a cross browser compatible version.
<ajaxToolkit:TextBoxWatermarkExtender ID="EmailClear" runat="server" TargetControlID="EmailAddress" WatermarkText="Someone#example.com" />
You just have to add this under each field.
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 want to set the "name" attribute for HiddenField control of ASP.NET from code behind, but I cannot find the "Attributes" property. Is it not there for a purpose? How do I add the attribute?
thanks
The name attribute is automatically computed from the ID properties of the hidden field and its ancestors in the naming container chain. You don't get to set it yourself. You can only access it through the UniqueID of the control.
A possible solution, without knowing a bit more about your code, is to use a server side Html control rather than an ASP.NET web control by adding the runat="server" attribute to the Html markup:
<input type="hidden" id="myHiddenField" runat="server" />
You can then specify the id dynamically in the code behind at runtime from which the name attribute is inferred from:
myHiddenField.ID = "CodebehindName";
myHiddenField.Value = "myValue";
This will result in the following output:
<input name="CodebehindName" type="hidden" id="CodebehindName" value="myValue" />
Another unorthodox method to deal with it is to set the name attribute client side. This is useful if you are posting to a third party such as PayPal.
jQuery EG:
<script type="text/javascript">
$(function () {
$('#BusinessHid').prop('name', 'business')
$('#CurrencyHid').prop('name', 'currency_code')
$('#InvoiceHid').prop('name', 'invoice')
$('#AmountHid').prop('name', 'amount')
})
</script>
<asp:HiddenField ID="BusinessHid" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="CurrencyHid" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="InvoiceHid" runat="server" ClientIDMode="Static" />
<asp:HiddenField ID="AmountHid" runat="server" ClientIDMode="Static" />
Forget about the HiddenField control and use a Label instead, give it a name (an id), make it invisible, and store your text into it:
label = new System.Web.UI.WebControls.Label() {
Text = "Here my hidden text",
};
label.Attributes.Add("id", "MyHiddenFieldID");
label.Attributes.Add("style", "display:none;");
myParentControl.Controls.Add(label);
Get your hidden field in your javascript with:
var myHiddenField = document.getElementById("MyHiddenFieldID");
The way I ended up doing this was to set ClientIDMode="Static" on the HiddenField and then set the ID to what I want my name to be.
I ended up with ugly IDs but this was a small price to pay to get this to work.
I would like to set the focus on a textbox and/or control after clicking an asp label? Can some explain to me how to do this? Similar to doing a
<label for="txtBoxID">Blah</label>
You can also do this
<label for="<%=txtName.ClientID%>">Name:</label>
<asp:TextBox runat="server" ID="txtName"></asp:TextBox>
or on dot 4.
<label for="txtName">Name: </label>
<asp:TextBox runat="server" ID="txtName" ClientIDMode="Static"></asp:TextBox>
and avoid JavaScript.
This is the Best way to write and avoid javascript
<p>
<asp:Label ID="lblName" runat="server" AssociatedControlID="txtFirstName" Text="First Name: " />
<asp:TextBox ID="txtFirstName" runat="server" />
</p>
You can do it using Javascript or jQuery.
<label for="txtBoxID" onClientClick="SetMyFocus()">Blah</label>
<javascript>
function SetMyFocus()
{
document.getElementById("MyTextBox").focus();
}
</javascript>
If you have a specific need of doing something in the server side on the click of the label, you shall have to handle the same in code behind and then set the client side script to fire up after reloading the page. Use RegisterStartupScript for the same.
I'm assuming you want to do it completely on the client side to avoid a postback?
You can use jQuery to set focus. After adding a script reference to the jQuery library, you can use the following JavaScript in your page:
$(document).ready(function() {
$("#labelId").click(function() {
$("*[id$='txtBoxID']").focus()
});
});
The "*[id$='txtBoxID']" selector allows you to select the ASP.NET server side ID of your textbox without any additional code. Basically, it's saying "select any DOM element whose ID ends with txtBoxId."
You can add jQuery to your page with the following CDN script reference:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
A more generalized solution using jQuery:
$(document).ready(function() {
$("label[for]").click(function() {
var inputid = '#' + $(this).attr('for');
$(inputid).focus();
});
});
Should handle all labels, as long as you correctly define the for attribute.
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>