混合Jquery和ASP.net

时间:2012-04-12 19:59:25

标签: asp.net

这是我的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代码,以便在单击它链接时处理服务器代码?

提前致谢。

3 个答案:

答案 0 :(得分:1)

我认为最好的方法是将典型的html输入替换为这样的asp输入并使用客户端ID模式静态,这样你就不必在jquery中替换id

它可以像这样

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

                    ////

             }

    }
}

答案 1 :(得分:0)

内置的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>

答案 2 :(得分:0)

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

  • 按ID的类intead选择。
  • 使用&lt;%= control.ClientID%&gt;在javascript变量中传递id并使用变量
  • 将控件ID模式设置为静态,但请记住,如果在数据绑定中使用控件并且在页面上重复多次,则可能会导致问题。

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