asp.net login and register user controls formatting - asp.net

I have a VS2010 C# web application with standard login and register controls.
The login/register template is generated as below.The problem with this is that the label and the text field are displayed in 2 lines. But I would like to display them in single line with proper alignment . All label text right aligned with each other etc. I tried by CSS but I cannot assign length to inline elements. I can try converting everything to block elements and assigning width,float. But I am wondering if there is any option to generate table layout without too much CSS fiddling.
<p>
<asp:Label ID="UserNameLabel" runat="server"
AssociatedControlID="UserName">User Name:</asp:Label>
<asp:TextBox ID="UserName" runat="server" CssClass="texdtEntry"></asp:TextBox>
</p>

Just Convert to Template and change it:
How to: Use Advanced Features of the ASP.NET Login Control

Related

ASP.NET closing tag

When I use autocompletion in VisualStudio 2010 within my .aspx application, there are different default completions at closing control tags:
<asp:CheckBox />
<asp:Label></asp:Label>
Is there a explaination for this behaviour?
<asp:CheckBox></asp:CheckBox>
<asp:Label />
Wouldn't be invalid.
This is because ASP.NET's Label control is decorated with the ParseChildrenAttribute, with ParseChildren(false) while CheckBox isn't.
You can support the same behavior whith your custom controls, for example, with the following code, Visual Studio will behave like Label if you use MyControl in the web form editor:
[ParseChildren(false)]
public class MyControl : WebControl
{
...
}
The label closing is like that
<asp:Label runat="server"></asp:Label>
because usually we type something between
<asp:Label runat="server" ID="lblOne">better start programming now</asp:Label>
that is not the case for checkbox, that we type inside of it
<asp:CheckBox runat="server" Text="enable" ID="cbOne" />
We have on both elements the Text field, why on the one we prefer to write out side... Look at this example, on Label, or On other similar controls the text that we may have to write may include characters that are not allowed inside the Text Property, maybe a complex css style or what ever... The check box from the other side is only include a small text (yes, not, something like that)
<asp:Label ID="lblLabel" runat="server">
This is a <b>"label"</b>
<br />And one more line
</asp:Label>
and more example that compiles
<asp:Label ID="lblLabel" runat="server">
This is a <b>"label"</b>
<br />And one more line
<asp:Literal runat="server" ID="ltrOneMore">One more Control Inside</asp:Literal>
</asp:Label>
---but this is not compile--
<asp:Label ID="lblLabel2" runat="server"
Text="This is a <b>"label"</b>
<br /> and one more line"
/>
At the final end is a decision that the makes make - maybe we need to ask them for the real real reason.
Now this is also not compile
<asp:CheckBox runat="server" ID="cbMyChbx">one<asp:CheckBox>
check box when is render on page is use two controls, one input and one label, so they maybe need to help user to understand that the text is not going on the input control.
<asp:CheckBox />
Because the element has no content, you can close the tag with /> instead of using a separate closing tag
<asp:Label></asp:Label> or <asp:Label />
Displays static text on a Web Forms page and allows you to manipulate it programmatically.
Learn more about it Web Server Control
All the answers above are valid, but something additional. All the asp controls are eventually rendered as HTML controls and that also defines how the asp controls behave. For e.g. it is not necessary that text in a label is always set as
<asp:Label runat="server" ID="lblOne">better start programming now</asp:Label>
it can be also done as follows
<asp:Label runat="server" ID="lblOne" Text="better start programming"></asp:Label>
now both are correct format, so it is not valid to say that any control which needs content will have a separate closing tag. It also depends on how it rendered in HTML. for e.g by default asp Label is rendered as a span and doesnt conform to XHTML standards. Hope this makes it clear, always think of how it will be rendered and ASP tries to adhere to what eventually will be rendered.
cheers

How do I make my website prompt the iphone's equivalent of a dropdown menu?

I have a website that uses the AjaxControlToolkit. I'm making some parallel iPhone-friendly pages for the site, and since Ajax isn't very good-looking in a mobile browser, I'm trying to phase it out. One such Ajax tool is the CalendarExtender, which I replaced with the iPhone's Date Picker using this method.
The second tool I need to replace is the AutoCompleteExtender. It functions as a simple dropdown menu when the user types text into a text box. The purpose is for searching functionality; I have a large list of contacts, and when the user starts to type in a name or company name the extender appears with a list of suggestions based on what the user typed in so far.
Here's what it looks like in Ajax:
<asp:TextBox ID="NameTextBox" runat="server" AutoComplete="off" AutoPostBack="True"
OnTextChanged="NameTextBox_TextChanged" Width="95%" Font-Size="Medium"></asp:TextBox>
<cc1:AutoCompleteExtender ID="NameTextBox_AutoCompleteExtender" runat="server" CompletionInterval="250"
CompletionListCssClass="autocomplete_completionListElement" CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
CompletionListItemCssClass="autocomplete_listItem" DelimiterCharacters="" Enabled="True"
MinimumPrefixLength="2" ServiceMethod="GetCompletionList" ServicePath="" TargetControlID="NameTextBox"
UseContextKey="True">
</cc1:AutoCompleteExtender>
What is a good way to replace this with either a common piece of iPhone UI (such as the UIPickerView), or a more general mobile-friendly piece of HTML?
I would use a standard HTML element to maintain user experience.
For the autocomplete part I would use some javascript or an jQuery plugin. You could also choose to use Autocomplete from jQuery UI: http://jqueryui.com/demos/autocomplete/.

Integrating MarkitUp and MarkdownSharp with asp.net forms website

I'm using markdownsharp with my asp.net forms website.
I want to use MarkItUp as my editor and have found a straight forward article on how to integrate with MVC which seems straight forward enough: http://rsolberg.com/2010/09/asp-net-mvc-markitup-rich-text-editor/
However, how do I do this with a forms website?
How do I get the MarkItDown Textarea on a postback and get the preview to work as well?
Place the Javascript and CSS file links in the head portion of the page just as you would with MVC. Then in your form, place a TextArea control. Set the rows and columns as needed.
<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine" Columns="40" Rows="5" Text="" />
Then use JQuery to enable to functionality.
$(document).ready(function() {
$('<%=txtEditor.ClientID%>').markItUp(mySettings); });
Then on PostBack the contents of the editor will be available in the Text property of the TextBox control.
txtEditor.Text
This is not the only way to do this, you could also use a HTML TextArea control with a runat="server" attribute. Use whatever your personal preference is.

ASP:Login <LayoutTemplate> always generates a <table>, how can I make it stop?

I've just started tinkering with the ASP:Login control, and want to edit its appearance. So I did the following:
<asp:login ID="login" runat="server" onauthenticate="Authenticate">
<LayoutTemplate>
<asp:TextBox ID="UserName" runat="server"></asp:TextBox>
<asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
</LayoutTemplate>
</asp:login>
Despite the fact that I have no <table> tag anywhere in the document, once I preview the page and view the source, it very clearly shows a <table> there. Ah! How in the world do I prevent this crazy behavior, or am I forced to use tables for layout instead of CSS?
You can set it not to use tables without third party extensions, just make sure you use the
<LayoutTemplate>
</LayoutTemplate>
For laying out your HTML/form inside the control, then set the attribute on the Login that controls the outer table to false.
RenderOuterTable="false"
That's it, no tables :)
You can use the CSS Friendly control adapter for the login control to change it.
http://www.asp.net/CSSAdapters/Membership/Login.aspx
There's a number of things you can do.
The easiest would be to use the Css Control Adapters toolkit's version of the Login control, although it hasn't been updated in a while and I haven't used it recently, so maybe it's not a great option anymore, I'm not sure.
Otherwise you could try creating your own ITemplate and setting it as the property of the LayoutTemplate for the Login control.
Alternately you could rewrite the generated HTML with an IHttpHandler, or even redo it on the client with something like jQuery dom replacement.

Multi language: asp:label aganist html:label with asp:Literal

I'm adding multi language support to a prototype web site. The site was developed using html lables which I could multilanguage using asp:literal or I could change them all to asp:labels as shown below.
<asp:label ID="lblAddress1" runat="server" Text='<%$ Resources:lblAddress1 %>' /></br>
<label><asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:lblAddress1 %>"></asp:Literal></label>
Web stuff isn't my area of expertise and the guys here don't think there is any advantage one way or the other. What would you choose and why?
<asp:Literal>
Use this control as a placeholder for any text you wish to insert in the page. The output will not be wrapped in any html markup tags (simplest).
<asp:Label>
Use this control in the same way as the , however, This control will wrap the text in html tags. These span tags allow the control to have additional properties (css styling etc.) which can be leveraged.
<label>
This html tag has semantic value in a page and is used to associate form elements with their description.
<label for="SaveLoginName">Remember Me:</label>
<input type="checkbox" id="SaveLoginName" />
A browser can use this info to provide additional accessibility features such as enabling clicking text to toggle checkbox value.
Each of these have appropriate usage scenarios.
Seems to be a matter of taste. Although I think the second option may add a little weight to the page because literals are usually wrapped in <span>

Resources