Search code examples
javascriptasp.netwebformsiui

Cannot talk to asp.net server

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.

  1. How do I hookup the whitebutton to go and verify the user and password on the database?
  2. How do I make the brower go to a different window if the password was good else...
  3. 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.

Solution

  • 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.
}