asp.net - 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コードを添付して、そのリンクをクリックしたときにサーバーコードを処理するにはどうすればよいですか？

前もって感謝します。

score 1 · Accepted Answer

私はあなたにとって最良の方法は、このような典型的な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
            { 

                    ////

             }

    }
}

score 0 · Accepted Answer

組み込みの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>

score 0 · Accepted Answer

サーバー上のコントロールにアクセスするには、コントロールにrunat="server"属性が必要です。ただし、これを行うと、コントロールのクライアントIDが変更されます。この問題を回避する方法はいくつかあります

idの代わりにクラスで選択します。
<％= control.ClientID％>を使用してjavascript変数でIDを渡し、変数を使用します
コントロールIDモードを静的に設定しますが、データバインディングでコントロールを使用し、ページ上で複数回繰り返されると、問題が発生する可能性があることに注意してください。

もう1つのオプションは、RegularExpressionValidatorやRequiredFieldValidatorなどのASP.NETバリデーターコントロールを使用することです。

asp.net - JqueryとASP.netの混合

3 に答える 3

Related

Reference