I'm fairly new in asp.net, and I am more proficient at building html/php websites.I am trying to add twitter bootstrap to my textboxes. My current textbox shows:
<asp:TextBox ID="UserName" runat="server" Width="250px" TabIndex="1"></asp:TextBox>
And the input that I designed using html is:
<input type="text" class="form-control input-lg" placeholder="Username">
How do I put all the classes of my textbox to my asp textbox, and would it take effect in a similar way html elements work?
You can put these classes in asp textbox using CssClass as follows
<asp:TextBox ID="UserName" runat="server" CssClass="form-control input-lg"
Width="250px" TabIndex="1"></asp:TextBox>
Basically when you create a control asp control it render as a html control on the browser.
So in the browser you will see the same.
There may be difference in the id and the name of the control. As they are generated depending on the controls like master page and user controls.
Though you have different ClientIdMode in asp.net to overcome this issue.
MSDN for the same is http://msdn.microsoft.com/en-us/library/system.web.ui.clientidmode.aspx
<asp:TextBox ID="UserName" runat="server" CssClass="form-control input-lg"
Width="250px" TabIndex="1" placeholder="Username"></asp:TextBox>
Related
I´m using kendo UI Jquery for my web, and I used some components like the Kendo Multiselect it has clear icon on the right and its provided by the control by default.
<div>
<label for="simple-input">Input</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 100%;" />
</div>
My question is does this functionality exists for a normal text box? or should I implement it :V
Yes, with kendo css, you will get an x icon at the far right of the input box when the box has focus.
https://dojo.telerik.com/#RichardAD/otUrArax
<p>
<label for="simple-input">Input</label>
<input id="simple-input" type="text" class="k-textbox" style="width: 100%;" />
</p>
<p>
<label for="simple-search">Search</label>
<input id="simple-search" type="search" class="k-textbox" style="width: 100%;" />
</p>
In case anyone stumbles upon this question, it seems that input type="search" will do the trick.
Example
<input type="search" placeholder="test">
Works regardless of whether the Kendo-UI library is used. In my case, I was using it with Kendo-Angular.
For simple html input we use:
<input type="date" placeholder="From" />
How can we use this method for asp field:
<asp:TextBox ID="from_date" runat="server" placeholder="From"></asp:TextBox>
when user clicks the field, calendar should appear.
Question still unanswered:
Here is even more detail to back up my answer:
From Microsoft: https://support.microsoft.com/en-us/kb/2468871
"New syntax lets you define a TextBox control that is HTML5 compatible. For example, the following code defines a TextBox control that is HTML5 compatible":
<asp:TextBox runat="server" type="some-HTML5-type" />
-
Original:
I use asp.net and you can just use it like normal. An asp.net textbox ends up as a normal input element once processed by the server.
If you are using 4.0 or above you can just do :
<asp:TextBox ID="from_date" runat="server" placeholder="From" type="date"></asp:TextBox>
If you try this and it does not work, it is probably the browser you are using, type="date" is not supported by any IE, or any Firefox browsers, chrome is one of the only browsers that support type="date" right now.
See can i use for browser support: http://caniuse.com/#feat=input-datetime
I recommend that you find another option if you need browser support.
You can also use AJAX Calender Extender
<asp:TextBox ID="from_date" runat="server" />
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server"
TargetControlID="from_date" PopupButtonID="from_date">
</ajaxToolkit:CalendarExtender>
I have an asp Textbox for a username and a HTML input for a password, these are both server controls and are contained in the master page (in a modal popup).
<input runat="server" Class="login-input" id="txtPassword" placeholder="Password" type="password"
<asp:Textbox style="float:left; margin-right:25px;" runat="server" id="txtUsername" Class="login-input" Placeholder="Username" name="txtUserName"/>
I also have a login button hooked up to a handler in the code behind. However the value of the 2 input boxes is always empty.
I had to include UseSubmitBehavior="False" on my button as this was the only way i could get my click event to
<asp:Button UseSubmitBehavior="False" runat="server" Class="login-button" ID="btnLogin" Text="Login" />
Not sure what's going on here, i have checked my code and definitely only have 1 form tag, which i heard can cause this.
It turned out that at runtime my modal was not contained within the tags.
Therefore i had to use
$('#divname').parent().appendTo($("form:first"));
within my script to move the elements back within the form tags.
(There were 2 modal elements outside) I found this out by using f12 dev tools/firebug.
I am trying to simply bind a HTML Input radio button inside a repeater :
<asp:Repeater ID="Outlets" runat="server" >
<ItemTemplate>
<input type="radio" name="Proposal" value="Test1" id="Radio1" checked="
<%#`GetSelectedValue(DataBinder.Eval(Container.DataItem,"IsDefaultSelection"))%>" />`
<label for="Test1">
<%#DataBinder.Eval(Container.DataItem, "Label")%>
</label>
</ItemTemplate>
</asp:Repeater>
The GetSelectedValue method simply returns a string "checked" for the radio button to be selected, lets say the repeater had 3 items to loop and when the markup renders and If I inspect the element I see the correct value for the first radio button i.e. checked="checked" but on the UI the 3rd radio button gets selected even though its checked value="false", can someone guide me as to what i am doing wrong?
Give this a try
<%# (bool)Eval("IsDefaultSelection") ? " checked=\"checked\" " : string.Empty %>
Basically the inclusion on the checked attribute is causing the RadioButton to be checked. You want to pull it out so the entire thing is rendered or the entire thing is absent.
Also keep in mind all your RadioButtons are going to be named Test1 It might be a good idea to use a server side RadioButton.
The CHECKED attribute in HTML has no value associated with it. You should only use this attribute if you want to select it.
You want something like:
<asp:Repeater ID="Outlets" runat="server" >
<ItemTemplate>
<input type="radio" name="Proposal" value="Test1" id="Radio1" <%
if (GetSelectedValue(DataBinder.Eval(Container.DataItem,"IsDefaultSelection"))
response.write("CHECKED");
%> />
<label for="Test1">
<%#DataBinder.Eval(Container.DataItem, "Label")%>
</label>
</ItemTemplate>
</asp:Repeater>
Otherwise you could simply use the ASP.NET INPUT controls.
I want to render a <label> tag. But want to set some of it's properties while it's rendering like for and text value.
Actually my real problem is I want to associate a label with a radio button and this is the code so far I have:
<asp:RadioButton ID="Option4" GroupName="A" runat="server" />
<label for='<%=Option4.ClientID %>' id="lblOption4" runat="server">4</label>
But the problem with this code is that it is not working and rendering the for attibute's value as it is i.e. <%=Option4.ClientID %>. :-(
Is their any asp net server control which would render tag?
I don't want to set the Text property of the radio button due to some CSS limitations so plz do not give answers like why don't you set the Text property of the radio button.
if this is .NET 2.0 or later, then use the ASP.NET LABEL control.
<asp:RadioButton ID="Option4" GroupName="A" runat="server" />
<asp:Label AssociatedControlId="Option4" Text="4" runat="server" />
If this is to ultimately handle accessiblity issues you could try the following tutorial: Creating an Accessible LABEL control in ASP.NET