Question

Here is my Jquery code:

      $(document).ready(function () {     
            onfocus();
            $(".on_off_checkbox").iphoneStyle();
            $('.tip a ').tipsy({gravity: 'sw'});
            $('#login').show().animate({   opacity: 1 }, 2000);
            $('.logo').show().animate({   opacity: 1,top: '30%'}, 800,function(){           
                $('.logo').show().delay(1200).animate({   opacity: 1,top: '0%' }, 300,function(){
                    $('.formLogin').animate({   opacity: 1,left: '0' }, 300);
                    $('.userbox').animate({ opacity: 0 }, 200).hide();
                 });        
            })  
        }); 

        $('.userload').click(function(e){
            $('.formLogin').animate({   opacity: 1,left: '0' }, 300);               
              $('.userbox').animate({ opacity: 0 }, 200,function(){
                  $('.userbox').hide();             
               });
        });

    $('#but_login').click(function(e){              
          if($('#username_id').val() == "" || $('#password').val() == "")
          {
              showError("Please Input Username / Password");
              $('.inner').jrumble({ x: 4,y: 0,rotation: 0 });   
              $('.inner').trigger('startRumble');
              setTimeout('$(".inner").trigger("stopRumble")',500);
              setTimeout('hideTop()',5000);
              return false;
          }     
         hideTop();
         loading('Checking',1);     
         setTimeout( "unloading()", 2000 );
         setTimeout( "Login()", 2500 );
    }); 

function Login(){
    $("#login").animate({   opacity: 1,top: '49%' }, 200,function(){
         $('.userbox').show().animate({ opacity: 1 }, 500);
            $("#login").animate({   opacity: 0,top: '60%' }, 500,function(){
                $(this).fadeOut(200,function(){
                  $(".text_success").slideDown();
                  $("#successLogin").animate({opacity: 1,height: "200px"},500);                  
                });                           
             }) 
     }) 
    //setTimeout( "window.location.href='dashboard.html'", 3000 );
}

$('#alertMessage').click(function(){
    hideTop();
});

function showError(str){
    $('#alertMessage').addClass('error').html(str).stop(true,true).show().animate({ opacity: 1,right: '0'}, 500);   

}

function showSuccess(str){
    $('#alertMessage').removeClass('error').html(str).stop(true,true).show().animate({ opacity: 1,right: '0'}, 500);    
}

function onfocus(){
                if($(window).width()>480) {                   
                        $('.tip input').tipsy({ trigger: 'focus', gravity: 'w' ,live: true});
                }else{
                      $('.tip input').tipsy("hide");
                }
}

function hideTop(){
    $('#alertMessage').animate({ opacity: 0,right: '-20'}, 500,function(){ $(this).hide(); });  
}   

function loading(name,overlay) {  
      $('body').append('<div id="overlay"></div><div id="preloader">'+name+'..</div>');
              if(overlay==1){
                $('#overlay').css('opacity',0.1).fadeIn(function(){  $('#preloader').fadeIn();  });
                return  false;
         }
      $('#preloader').fadeIn();   
 }

 function unloading() {  
        $('#preloader').fadeOut('fast',function(){ $('#overlay').fadeOut(); });
 }

Here is my ASP.net code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

Here is the HTML:

<div class="formLogin">


          <div class="tip">
                <input name="username" type="text"  id="username_id"  title="Username"   />
          </div>
          <div class="tip">
                <input name="password" type="password" id="password"   title="Password"  />
          </div>

          <div class="loginButton">
            <div style="float:left; margin-left:-9px;">
                <input type="checkbox" id="on_off" name="remember" class="on_off_checkbox"  value="1"   />
                <span class="f_help">Remember me</span>
            </div>
            <div style="float:right; padding:3px 0; margin-right:-12px;">
              <div> 
                <ul class="uibutton-group">
                   <li><a class="uibutton normal" href="#" id="but_login" >Login</a></li>
                   <li><a class="uibutton normal" href="#" id="forgetpass">forgetpass</a></li>
               </ul>
              </div>

            </div>
            <div class="clear"></div>
          </div>
  </div>

I am very new to ASP.net and I have the client side validation working to make sure the username or password are not blank. What I am clueless about is how to now add in the server side validation.

I come from a strong background in classic asp and am taking the leap to ASP.net. I know the basics like I need to check if username and password are blank, return error if they are.

Do I need runat=server on my but_login? How do I attach some backend asp.net code so when that link it clicked it processes the server code?

Thanks in advance.

Answer 1

I think the best way for you is to replace your typical html input to asp input like this and use client id mode static so you do not have to replace ids in your jquery

it can be like this

 <asp:TextBox  name="username" type="text"  id="username_id"  title="Username" ClientIDMode="Static" runat="server"></asp:TextBox>  
     <asp:TextBox   name="password" type="password" id="password"   title="Password" ClientIDMode="Static" runat="server"></asp:TextBox> 
    <asp:Label ID="Label1" runat="server" Text=""></asp:Label>

and code behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class index : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (username_id.Text == "" || password.Text == "")
            {

                Label1.Text = "Error";

            }
            else
            { 

                    ////

             }

    }
}