混合jQuery和ASP.net

Question

这里是我的jQuery代码：

 $(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(); }); 
} 

这里是我的ASP.net代码：

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) 
    { 

    } 
} 

这里是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> 

我我对ASP.net非常陌生，我有客户端验证工作，以确保用户名或密码不是空白。我无能为力的是如何在服务器端进行验证。

我来自经典asp的强大背景，并且正在向ASP.net迈进。我知道像我需要检查用户名和密码是否为空的基本知识，如果它们返回错误。

我需要在我的but_login上使用runat = server吗？我如何附加一些后端asp.net代码，所以当它链接它点击它处理服务器代码？

在此先感谢。

Answer 1

我觉得你最好的办法是更换典型的HTML输入到ASP输入这样和使用客户端ID模式静态的，所以你不必取代IDS在你的jQuery

它可以是这样的

<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> 

和代码背后

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 
      { 

        //// 

      } 

    } 
} 

Answer 2

内置的ASP.NET验证控件自动提供客户端和服务器端功能。您可能需要考虑使用这些控件重写您的验证。

这里是一个教程/概述：

http://msdn.microsoft.com/en-us/library/debza5t0.aspx

编辑

如果您不能使用内置的验证，你基本上需要移植所有的JavaScript验证到Page_Load事件。

<script runat=server"> 
    void Page_Load(object sender, EventArgs e) 
    { 
     string error = ValidatePage(); 
     if(String.IsNullOrEmpty(error)) 
     { 
      //validation passed, do something 
     } 
     else 
     { 
      //validation failed. output error message 
      //via Response.Write or a Label control 

      //Response.Write(error); 
      //or 
      //Label1.Text = error; 
     } 
    } 

    string ValidatePage() 
    { 
     //validate your elements here. 
     string username = Request.Form["username"]; 
     if(String.IsNullOrEmpty(username)) 
     { 
      return "Username required"; 
     } 
     //etc... 
    } 
</script> 

Answer 3

为了访问服务器上的控件，控件需要具有runat =“server”属性。但是，如果你这样做，这将改变控件的客户端ID。有几种方法可以解决问题

• 通过id类的intead进行选择。
• 使用通过ID在JavaScript变量<％= control.ClientID％>并使用可变
• 设置控件ID模式以静态但请记住，如果你在使用数据绑定控件上THI可能会造成问题和它会在页面上重复多次。

另一种选择是使用ASP.NET验证器控件，如RegularExpressionValidator和RequiredFieldValidator。