I'm trying to create a custom login control that is wrapped with a div rather than a table. I found this (http://www.sidesofmarch.com/index.php/archive/2006/02/28/removing-tables-in-microsofts-aspnet-20-controls/) article in c# and have tried to recreate
it in vb but keep getting an error, so I'm probably doing something pretty obvious wrong! My code so far is:
Namespace WebControls
Public Class membershipLogin
Inherits Login
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
MyBase.Render(writer)
Dim myDiv As New WebControl(HtmlTextWriterTag.Div)
LayoutTemplate.InstantiateIn(myDiv)
Controls.Clear()
Controls.Add(myDiv)
myDiv.CopyBaseAttributes(Me)
myDiv.CssClass = Me.CssClass
myDiv.RenderControl(writer)
End Sub
End Class
End Namespace
Why don't you use the login control Layout Template. You need to drag and drop a Login control in a page. Right click on it and choose from the context menu 'Convert to Template'. You may customize it in any way you may want. It has also the advantage of
the design-time support. I add here the html markup of a one minute customized login control.
Even when removing MyBase.Render(writer) I still get the same error as in my original post,
MyBase.Render(writer) isn't the problem.
AFAIK my dear friend, u don't have a choice to call base class's render, you've to call it. Otherwise its like i'll Inherit from Textbox and create the datagrid.
I've made some tests, the Login control uses an internal LoginContainer as container for the login form. Been an internal / private class, we have no access to override the rendering TagKey of this container. So whatever you'll try, the login form will always
be wrapped by the html tags generated by this LoginContainer. Unfortunatelly the login container rendering tag is a Table.
I bring back the subject of CSS Friendly adapters. You can download the source code from here:
Check the LoginAdapter class, RenderContents method, to see how do they render the login control as div. Basically they rewrite the html tags for the entire controls collection.
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
I've made some tests, the Login control uses an internal LoginContainer as container for the login form. Been an internal / private class, we have no access to override the rendering TagKey of this container. So whatever you'll try, the login form will always
be wrapped by the html tags generated by this LoginContainer. Unfortunatelly the login container rendering tag is a Table.
I bring back the subject of CSS Friendly adapters. You can download the source code from here:
Check the LoginAdapter class, RenderContents method, to see how do they render the login control as div. Basically they rewrite the html tags for the entire controls collection.
Ok, thanks for the info.
What I still don't get is how someone has managed to do this is c# here:
Managed to do want I wanted by doing the following:
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
writer.WriteBeginTag("div")
writer.WriteAttribute("class", Me.CssClass)
writer.Write(HtmlTextWriter.TagRightChar)
Dim strB As New StringBuilder
Dim strW As New StringWriter(strB)
Dim htmlTW As New HtmlTextWriter(strW)
MyBase.Render(htmlTW)
Dim str As String
str = strB.ToString
str = Regex.Replace(str, "<table[^>]*>", "<div>")
str = Regex.Replace(str, "</table>", "</div>")
str = Regex.Replace(str, "<tr[^>]*>", "<div>")
str = Regex.Replace(str, "</tr>", "</div>")
str = Regex.Replace(str, "</?td[^>]*>", String.Empty)
str = Regex.Replace(str, "</?thead[^>]*>", String.Empty)
str = Regex.Replace(str, "</?tbody[^>]*>", String.Empty)
writer.Write(str)
writer.WriteEndTag("div")
End Sub
The first line will allow you to preserve all the attributes from the login control level to the div level. That include the class attribute and the login control ID attribute. Your code is removing now the login ID.
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
Member
23 Points
60 Posts
Custom login control
Oct 30, 2009 06:17 AM|m_b|LINK
Hi,
I'm trying to create a custom login control that is wrapped with a div rather than a table. I found this (http://www.sidesofmarch.com/index.php/archive/2006/02/28/removing-tables-in-microsofts-aspnet-20-controls/) article in c# and have tried to recreate it in vb but keep getting an error, so I'm probably doing something pretty obvious wrong! My code so far is:
Namespace WebControls Public Class membershipLogin Inherits Login Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) MyBase.Render(writer) Dim myDiv As New WebControl(HtmlTextWriterTag.Div) LayoutTemplate.InstantiateIn(myDiv) Controls.Clear() Controls.Add(myDiv) myDiv.CopyBaseAttributes(Me) myDiv.CssClass = Me.CssClass myDiv.RenderControl(writer) End Sub End Class End NamespaceContributor
2160 Points
496 Posts
Re: Custom login control
Oct 30, 2009 07:10 AM|florinlabou|LINK
Why don't you use the login control Layout Template. You need to drag and drop a Login control in a page. Right click on it and choose from the context menu 'Convert to Template'. You may customize it in any way you may want. It has also the advantage of the design-time support. I add here the html markup of a one minute customized login control.
<asp:Login ID="Login1" runat="server"> <LayoutTemplate> <div> <h3>Log In</h3> <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label> <asp:TextBox ID="UserName" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator> <br /> <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label> <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox> <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1">*</asp:RequiredFieldValidator> <br /> <asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time." /> <br /> <span style="color: red"> <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal> </span> <br /> <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1" /> </div> </LayoutTemplate> </asp:Login>I hope this will help.
Cheers,
Florin
Star
11864 Points
3618 Posts
Re: Custom login control
Oct 30, 2009 07:10 AM|shashankgwl|LINK
1. You'll not be able to override its UI generation code coz you've to give call to
MyBase.Render(writer), so it'll render a table for sure.
2. what is LayoutTemplate
3. You can create a control of your own from scratch, for e.g. i've ajaxed the same login control so that validation occurs on the client side
http://shashankbhide.blogspot.com/2009/03/ajaxing-login-control.html
blog
Member
23 Points
60 Posts
Re: Custom login control
Oct 30, 2009 07:17 AM|m_b|LINK
Hi, thanks for the reply.
Unfortunately this isn't an option for me, I need to create it as a custom control.
Contributor
2160 Points
496 Posts
Re: Custom login control
Oct 30, 2009 07:21 AM|florinlabou|LINK
You may try to use Adaptive rendering provided by CSS Friendly Adapters, see here the login control rendered as div:
http://www.asp.net/CSSAdapters/Membership/Login.aspx
Cheers,
Florin
Member
23 Points
60 Posts
Re: Custom login control
Oct 30, 2009 07:30 AM|m_b|LINK
Hi, thanks again for your reply.
I've looked at the cssadapters, the problem I'm having with thos is that I need to extend a couple and I'm struggling there too.
I can do everything I need to with the standard controls the only problem I have is the fact they render with tables rather than divs.
Star
11864 Points
3618 Posts
Re: Custom login control
Oct 30, 2009 08:05 AM|shashankgwl|LINK
You've to accept that when you call
MyBase.Render(writer), the framework renders the UI code and prepares a table, and this behaviour can't be overridden.
blog
Member
23 Points
60 Posts
Re: Custom login control
Oct 30, 2009 08:16 AM|m_b|LINK
Hi,
Even when removing MyBase.Render(writer) I still get the same error as in my original post, MyBase.Render(writer) isn't the problem.
Star
11864 Points
3618 Posts
Re: Custom login control
Oct 30, 2009 08:23 AM|shashankgwl|LINK
AFAIK my dear friend, u don't have a choice to call base class's render, you've to call it. Otherwise its like i'll Inherit from Textbox and create the datagrid.
blog
Contributor
2160 Points
496 Posts
Re: Custom login control
Oct 30, 2009 08:41 AM|florinlabou|LINK
I've made some tests, the Login control uses an internal LoginContainer as container for the login form. Been an internal / private class, we have no access to override the rendering TagKey of this container. So whatever you'll try, the login form will always be wrapped by the html tags generated by this LoginContainer. Unfortunatelly the login container rendering tag is a Table.
I bring back the subject of CSS Friendly adapters. You can download the source code from here:
http://cssfriendly.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=2159
Check the LoginAdapter class, RenderContents method, to see how do they render the login control as div. Basically they rewrite the html tags for the entire controls collection.
Member
23 Points
60 Posts
Re: Custom login control
Oct 30, 2009 09:39 AM|m_b|LINK
Ok, thanks for the info.
What I still don't get is how someone has managed to do this is c# here:
http://www.sidesofmarch.com/index.php/archive/2006/02/28/removing-tables-in-microsofts-aspnet-20-controls/
Contributor
2160 Points
496 Posts
Re: Custom login control
Oct 30, 2009 10:36 AM|florinlabou|LINK
The example
The example you gave works only when you use the LayoutTemplate. When you use the login control default rendering it is not working.
What they did is very simple. They instantiate the LayoutTemplate in a newly created Div.
WebControl div =newWebControl( HtmlTextWriterTag.Div );LayoutTemplate.InstantiateIn( div );That solution is incomplete. LayoutTemplate property is null when you use the default Login control template, so that code will fail.
Member
23 Points
60 Posts
Re: Custom login control
Oct 30, 2009 10:50 AM|m_b|LINK
I see.
Thanks for your help.
Member
23 Points
60 Posts
Re: Custom login control
Oct 30, 2009 11:28 AM|m_b|LINK
Managed to do want I wanted by doing the following:
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) writer.WriteBeginTag("div") writer.WriteAttribute("class", Me.CssClass) writer.Write(HtmlTextWriter.TagRightChar) Dim strB As New StringBuilder Dim strW As New StringWriter(strB) Dim htmlTW As New HtmlTextWriter(strW) MyBase.Render(htmlTW) Dim str As String str = strB.ToString str = Regex.Replace(str, "<table[^>]*>", "<div>") str = Regex.Replace(str, "</table>", "</div>") str = Regex.Replace(str, "<tr[^>]*>", "<div>") str = Regex.Replace(str, "</tr>", "</div>") str = Regex.Replace(str, "</?td[^>]*>", String.Empty) str = Regex.Replace(str, "</?thead[^>]*>", String.Empty) str = Regex.Replace(str, "</?tbody[^>]*>", String.Empty) writer.Write(str) writer.WriteEndTag("div") End SubContributor
2160 Points
496 Posts
Re: Custom login control
Oct 30, 2009 11:47 AM|florinlabou|LINK
One small remark. You should replace this code:
with:
The first line will allow you to preserve all the attributes from the login control level to the div level. That include the class attribute and the login control ID attribute. Your code is removing now the login ID.