Cannot talk to asp.net server

Question

Totally n00b question, Im making my first ASP.NET website, with the added twist of using IUI framework that makes things look nice on the iPhone.

How do I hookup the whitebutton to go and verify the user and password on the database?
How do I make the brower go to a different window if the password was good else...
How do I append a message like "password incorrect" on the current page?

I am a c# programmer by default and totally lost in this new field. Please not I cannot make an it doesnt seem to work with IUI.

Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Cover_Plus.SiteMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <meta name="viewport" id="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0" />
    <link href="iui/iui.css" rel="stylesheet" type="text/css" />
    <link title="default" href="iui/t/default/default-theme.css" rel="stylesheet" type="text/css" />
    <script type="application/x-javascript" src="iui/iui.js"></script>

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="apple-touch-icon" href="img/touch-icon-iphone.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="img/touch-icon-ipad.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="img/touch-icon-iphone4.png" />
    <link rel="apple-touch-startup-image" href="img/startup.png" />

    <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder>
</head>
<body>
    <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</body>
</html>

Default.aspx

<%@ Page Title="Cover Plus" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Cover_Plus._Default" %>

<%--Header--%>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">

    </script>
</asp:Content>

<%--Body--%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<div class="toolbar">
    <h1 id="pageTitle">System Login</h1>
</div>
<div class="panel" selected="true" id="loginPanel"> 

    <h2>Login to Cover Plus</h2>
    <fieldset>
        <div class="row">
            <label>Name</label>
            <input type="text" name="ident" text="hhh" placeholder="Your login" />
        </div>
        <div class="row">
            <label>Password</label>
            <input type="password" name="password" placeholder="Your password" />
        </div>
    </fieldset>

    <form id="Form1" title="Index" name="formname" method="POST">
        <a class="whiteButton" type="submit" href="javascript:formname.submit()">Login me in!</a>
   </form>
</div>


</asp:Content>

UPDATE :

I think a screenshot may be helpful.

enter image description here

The problem is that "whitebutton" seems to be what I have to use, its not like an asp.net server side button, thus I cannot simply double click to hookup the click event.

I tried Humpty Dumptys method, but it doesnt call the Verify() method in my .CS file at all. I tried with just onclick="Login();" instead of Javascript:Login(); both dont work.

UPDATE 2:

The works at the bottom, but as soon as I replace the Input to Textbox see what happens ...

enter image description here

Many Thanks In Advance

Final Solution :

<div class="toolbar">
    <h1 id="pageTitle">Login</h1>
</div>

<div id="pnlLogin" class="panel" selected="true" >
    <h2>Login Details</h2>
    <form ID="fLogin" runat="server" class="panel" selected="true" > 
        <fieldset>
            <div class="row">
                <label>Name</label>
                <asp:TextBox id="txtUserName" runat="server" placeholder="Your username" />
            </div>
            <div class="row">
                <label>Password</label>
                <asp:TextBox id="txtPassword" textmode="Password" runat="server" placeholder="Your password" />
            </div>
        </fieldset>
        <asp:LinkButton id="btnLogin" class="whiteButton" text="Log me in!" runat="server" onclick="Login_Clicked" />
    </form> 
</div>

Basically the form was decorated with "class=panel" and the asp: style controls were used to connect to the backend.

do you want to verify the user against your database?? And are you using asp.net membership provider?? — huMpty duMpty, Mar 22 '12 at 16:27
Hi yes I am, the db is on the server, I can handle all that fine, I just dont know how to go back and forth from the client to the server and to access the username and password from the server. — sprocket12, Mar 22 '12 at 16:30
Have you read the tutorials on http://www.asp.net/web-forms? — jrummell, Mar 22 '12 at 16:43
jrummel : I tried to read through many websites for a couple of hours before I asked here. But thanks Ill have a look at ur link it may help me later. — sprocket12, Mar 22 '12 at 17:09
@MuhammadA : you should use asp.net controls in your code. eg **** seems like you are trying to validate user in client side — huMpty duMpty, Mar 22 '12 at 17:14

huMpty duMpty · Answer 1 · 2012-03-22T17:27:07.030

You have to validate the user details on your buttonclick event.

If you have a database fields to username and password you can create a function which accept username and password and verify against the database.

eg. in your button click event you can do something similar

var status = verifyUser(username,password);//might return Boolean value 
if(!status)
      somelable.text = "username or password incorrect";
else
     // do something - redirect to some page may be

also have a read at this article about Validating ASP.NET Server Controls and if you willing to use asp.net membership provider,Use Membership in ASP.NET and Validating User Credentials Against the Membership User

if use still not understand ...

modify your code something similar to this

your fronted

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
   <fieldset>
        <div class="row">
            <label>Name :</label>            
            <asp:TextBox ID="txbUserName" runat="server"></asp:TextBox>
        </div>
        <div class="row">
            <label>Password :</label>
            <asp:TextBox ID="txbPassword" runat="server"></asp:TextBox>
        </div>
        <div class="row">
            <asp:Button ID="btnLogin" runat="server" Text="Button" CssClass ="whiteButton" 
                onclick="btnLogin_Click" />
            <asp:Label ID="lblError" runat="server" Text="Label"></asp:Label>
        </div>
    </fieldset>

</asp:Content>

Your Backend

protected void btnLogin_Click(object sender, EventArgs e)
    {
        var username = txbUserName.Text;
        var password = txbPassword.Text;
        if(!string.IsNullOrEmpty(username) && !string.IsNullOrEmpty(password))
        {
            if(!VerifyUser(username,password))
            {
                lblError.Text = "username or password incorrect";
            }
        }
    }
    // I recommend this function to be in a separate class but for example 
    public static Boolean VerifyUser(string username,string password)
    {
        //
        return true or false
    }

Do I put this code into the script part at the top of the page? And the verifyUser() should be in the backend cs file? — sprocket12, Mar 22 '12 at 16:36
it is better if you create a separate class to access the data where you can create your **validateuser** and you can call it in your backend — huMpty duMpty, Mar 22 '12 at 16:40

Jonathan Lonowski · Accepted Answer · 2012-03-22T17:41:37.973

WebForms, as it appears you're using, generally has a page-wide <form runat="server">. This will usually be defined as part of the MasterPage (~/Site.master in your case) and can usually be found just a few lines after the <body> tag.

If your site has this form, communication with the server is then handled through server-side Controls (marked with runat="server"):

<asp:TextBox ID="Username" Text="hhh" runat="server"
    placeholder="Your Login" />

<asp:TextBox ID="Password" TextMode="Password" runat="server"
    placeholder="Your password" />

<asp:LinkButton ID="Login" Text="Login me in!" runat="server"
    CssClass="whitebutton" OnClick="Login_Clicked" />

Each server-side control represents regular HTML that it generates during rendering, so the above would become something like this:
<input id="ct100_Username" name="ct100$Username" type="text" value="hhh" placeholder="Your Login" />

<input id="ct100_Password" name="ct100$Password" type="password" placeholder="Your password" />

<a id="ct100_Login" class="whitebutton" href="javascript:__doPostBack('ct100$Login','')">Login me in!</a>
(Note: The actual client-side IDs and names may be a lot different than the examples here.)

The ID attributes of these server-side controls are generally mapped to properties/fields of the Page class, so this.Username will return the TextBox instance representing the 1st <asp:TextBox />.

With AutoEventWireup="True", as you have, you would then define the method that was specified in the OnClick of the <asp:LinkButton /> as part of the Page class:

protected void Login_Clicked(object sender, EventArgs e)
{
    var user = Username.Text;
    var pass = Password.Text;

    if (ValidateUser(user, pass))
    // etc.
}

Unfortunatly when I add an to the page it messes the whole thing up, as per IUI tutorial Im using that "whitebutton" code. — sprocket12, Mar 22 '12 at 17:18
@MuhammadA You can set that on the button with the `CssClass` attribute -- `CssClass="whitebutton"`. But, you may also want to use a `` specifically -- this will be sent to the browser as an `` rather than an ``. — Jonathan Lonowski, Mar 22 '12 at 17:30
@MuhammadA Also, make sure that the `
` isn't already defined within the `~/Site.master` MasterPage. If it is, having it within the current page (as your "Update 2" shows) would be redundant and possibly breaking -- the HTML spec doesn't support forms within forms and WebForms isn't designed for that either. — Jonathan Lonowski, Mar 22 '12 at 17:47
I added the master file. Please see it does not contain any form tag. I think this may be to do with the css/js file from the IUI Framework http://www.iui-js.org/documentation/latest/getting-started.html ... They may not be coded to apply styles to the textbox control. — sprocket12, Mar 22 '12 at 19:05

Cannot talk to asp.net server

2 Answers2