ASP.NET Login using Vb.net and Jquery

Question

Currently, I only know VB.NET; though, I'm studying ASP.NET, HTML, CSS and JQuery... My first few objectives are for my webform is:

• User inputs Username and Password
• User clicks on Login Button
• If Username and Password is in Database then
• Hide Username, Password Label and Textbox (LoginContainer) and show some content
• Else LabelError.Visible = true "Username / Password mismatches!"

So I've got the login thing working, but I have no idea on how will I be able to hide the elements and controls of my login form properly without ruining the styles I made in the CSS such as background-image. Is it possible to code in the vb code-behind and use some jQuery?

I tried adding

<div id="LoginContainer" runat="server">

and doing the LoginContainer.Visible=false But its destroying my design.

---

Page Code-Behind

'Page_Load
If Not IsPostBack Then
        LblError.Visible = False
        Contents.Visible = False
        Login_Container.Visible = True
End If

'Button1_Click
If dt.Rows.Count > 0 Then

        Session("ID") = dt.Rows(0).Item("Stud_ID").ToString
        Session("usertype") = dt.Rows(0).Item("usertype").ToString

        Contents.Visible = True
        Login_Container.Visible = False
Else
        LblError.Visible = True
End If

Page Markup

<div id = "Login_Container" runat="server">
<tr>
<td id = "LblError" runat="server"> Username / Password Mismatch. </td>
</tr>
</div>

<div id = "Contents" runat="server">
<p> Wrote or put something awesome right here</p>
<p> Also on this part</p>
<p> And this part too.</p>
</div>

My Login_Container and Contents div tags have background-image declarations associated via CSS.

My problem is when I set the visible property of my controls to false in the code-behind, the background-image styles are also not visible.

Answer 1

Take a look at the built-in ASP.NET login controls for security.

Here is a video describing the features you can use:

http://www.asp.net/web-forms/videos/building-35-applications/login-controls

Answer 2

Sorry I didn't have time to address this earlier, I was running off to work. The answer is actually quite simple; Though, it depends largely on project constraints.

wrap your runat=server controls in div tags, and apply your style declarations to them.

<div id="ContentWrapper">
    <div id="Contents" runat="server">
        <p> Wrote or put something awesome right here</p>
        <p> Also on this part</p>
        <p> And this part too.</p>
    </div>
 </div>

CSS

div#ContentWrapper {
    display:block;
    padding:0;
    margin:0 auto;
    border:0;
    background-image: url('<uri>');
    background-position: 100% auto;
    position:relative;
    overflow:visible;
  }

---

or,

you can turn the p tag markup into HtmlControls as well, by adding the `runat=server' attribute.

<div id="Contents" runat="server">
<p runat="server"> Wrote or put something awesome right here</p>
<p runat="server"> Also on this part</p>
<p runat="server"> And this part too.</p>
</div>

, then set all of the Visible Properties of the HtmlControls (aka the paragraph tags) within Content to false.

'Optionally: add a private function that takes a ByRef parameter
Private Sub DisableControl(ByRef ctrl as System.Web.UI.HtmlControls.HtmlControl) 'I'm specifying fully qualified namespace to class for reference purposes..
    ctrl.Visible = false
End Sub


'Replace: `Contents.Visible = True` Line in Button1_Click
For Each ctrl As HtmlControl In Contents.Controls.OfType(of HtmlControl)
    DisableControl(ctrl)
Next