الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

Check UserName Avilablity

بدأه yaser.net في 12 أكتوبر 2010 · 6 رد · 1,276 مشاهدة · في ASP.NET
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

بسم الله الرحمن الرحيم

هذا الدرس مهتم بالتحقق السريع ما إذا كان اسم المستخدم المراد التسجيل به موجود مسبقا أم لا .

متطلبات هذا الدرس:

معرفة بسيطة بال Asp.net , C#.net , JavaScript , Jqaury, css

بعض التوضيحات :

كيف يتم أخذ قيمة من <asp:TextBox> عن طريق ال JavaScript ؟

يعني تخيل عندك هذا ال Body

 
<body>
    <form id="form1" runat="server">
   <div>
      <asp:TextBox ID="txt" runat="server" /> <br />     
     <button id="btn"  onclick="GET()" >Get</button>
     </div>
   </form>

</body>

ستكون ال ()Function كالتالي :

<script type="text/javascript">
        function GET() {
            var name = document.getElementById("<%= txt.ClientID %>").value;
            alert(name);

        }
    </script>

طيب , كيف تتم عن طريق ال JQuary ؟

بعد استدعاء مكتية ال Jquary سيكون كالتالي:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
    <script type="text/javascript">
        function GET() {
            var name = $("#<%= txt.ClientID %>").val();
            alert(name);

        }
    </script>

مع إضافة property لل <asp:TextBox> هي ClientID="txt"

حيث يصبح الكونترول بهذا الشكل:

<asp:TextBox ID="txt" runat="server" ClientID="txt" />

الأن نكتب كود ال C#.net في صفحة نسميها Ajax.aspx

نضيف Function ترجع string حيث سنجعلها ترجع إما 0 او 1

وفي هذه الدالة ستقوم بالبحث عن اسم المستخدم المدخل في الداتا بيس , فإذا كان موجود سترجع الدالة 1 وإلا سترجع 0 .

انا في هذا المثال البسيط قمت بجعل الدالة تختبر الاسم المدخل فإذا كان "yaser.net" فسوف يرجع 1 وإلا سترجع الدالة 0 .

مع مراعاة إضافة هذا الكود فوق الدالة مباشرة : [system.Web.Services.WebMethod]

وستكون الدالة كالتالي:

[System.Web.Services.WebMethod]
        public static string CheckUserName(string userName)
        {
            string result = string.Empty;
            if (userName == "yaser.net")
                 result = "1";
            else
                 result = "0";

            return result;

        }

حيث لابد أن تكون الدالة من االنوع public static

للحديث بقية مع الكود السحري لل Jqaury و Ajax ...........................................

1
#2

والأن نأتي للكود السحري لل Jquary لكن في البداية دعوني اوضح كيف ستكون الصفحة التي سيكون فيها فورم التسجيل :

<body>
    <form id="form2" runat="server">

     <asp:TextBox ID="textbox1" runat="server"  ClientID="textbox1" ></asp:TextBox>
     <a id="a1" href="#"  onclick="CheckUserExist()" style="color:blue ;font-weight:bold;">Available? </a> <br />
     <span id="msg"></span>

    </form>

ستلاحظون في الكود أعلاه وجود لينك اسمه ?Available حيث يستدعي الدالة ()CheckUserExist , والذي سوف نقوم بكشفه الأن

كود الـ Jquaru

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
    <script type="text/javascript">
 function CheckUserExist() {
            var name = $("#<%=textbox1.ClientID %>").val();
            var msg = $("#msg")[0];      
                $.ajax({
                    type: "POST",
                    url: "Ajax.aspx/CheckUserName",
                    data: '{userName : "' + name + '"}',
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function(response) { alert(response); }
                });
            }

 </script>

شرح الكود :

مايهمنا هنا هو : url , data , success

في ال url نضع اسم الصفحة (Ajax.aspx) / اسم الدالة التي أنشأناها داخل هذه الصفحة (CheckUserName) بدون أقواس .

في ال data نضع الباراميتر المرسل .

في ال success نضع دالة تنفذ عند نجاح العملية وهي OnSuccess 

والأن نكتب دالة OnSuccess مع تمرير باراميتر خاص اسمه response حيث سنقوم بفحص هذا الباراميتر بالخاصية d

function OnSuccess(response) {
                var nameBox = $("#<%=textbox1.ClientID %>");
                var msg = $("#msg")[0];
                switch (response.d) {
                    case "1":
                        msg.innerHTML = nameBox.val() + " " + "is not available .";
                        break;
                    default:
                        msg.innerHTML = nameBox.val() + " " + "is available .";

                }

            }

فإذا قمنا بإدخال yaser.net سيكتب في الصفحة ان هذا الاسم غير متاح yaser.net is not available , أما إذا أدخلنا أي إسم أخر (majdi) مثلا فسيكتب لك في الصفحة ان هذا الاسم متاح majdi is available

ما ذا لو اردنا التحقق من المستخدم بدون ضغط اللينك , أو عن طريق ال tap او اذا اشرت الماوس على اي شي أخر غير ال textbox

بإضافة هذا الكود في بداية السكربت

$(document).ready(function() {
            $("#<%=textbox1.ClientID %>").change(function() {
                CheckUserExist();
            });
        });

للحديث بقية مع اضافات css.................


      
      
1

      
    

  

    
    

      
#3
        
        

      
بسم الله الرحمن الرحيم
ماذا لو أردنا إضافة some style على الاكشن تبعنا
مثلا نريد أن يظهر الإسم المدخل على شكل Bold في الرسالة الناتجة 
بسيطة جدا  :   
في جملة ال switch case  السابقة  كتبنا الكود التالي :
msg.innerHTML = nameBox.val() + " " + "is not available .";
الأن نضيف <span> بحيث يحوي ال username ويكون  style='font-weight:bold
سيصبح الكود بهذا الشكل :
 msg.innerHTML = "  <span style='font-weight:bold;'>" + nameBox.val() + "</span>" + " " + "is not available ." />";
ماذا لو أردنا أن تكون لون الرسالة الناتجة عن الأكشن أخضر في حالة  Available  و  أحمرفي حالة Not Available
سنقوم  بإضافة الكود التالي في حالة  not available   :  
   ;"msg.style.color = "red
وفي حالة  Available  :
 ;"msg.style.color = "green
طيب كيف لو أردنا إضافة صورة تتغير مع الرسالة الناتجة عن الأكشن  ,  بحيث تكون علامة صح في حالة Available  و علامة خطأ في حالة Not Available
في البداية نضيف <iimg>  في ال Body تبعنا ولنسميها "img"
سوف يكون ال Body  بهذا الشكل
<body>
    <form id="form1" runat="server">

     <asp:TextBox ID="textbox1" runat="server"  ClientID="textbox1" ></asp:TextBox>
     <a id="a1" href="#"  onclick="CheckUserExist()" style="color:blue ;font-weight:bold;">Available? </a> <br />
     <span id="msg"></span>
     <img id="img"  />
    </form>
</body>
 والأن ماعلينا سوى إضافة هذا الكود 
<img src='Images/wrong.png' />
في حالة Not Available
وإلا 
<img src='Images/correct.png' />
في أخر سطر   = msg.innerHTML 
الأن سيكون كود ال switch case بهذا الشكل
switch (response.d)
            {
                case "1":
                    msg.style.color = "red";
                    msg.innerHTML = "  <span style='font-weight:bold;'>" + nameBox.val() + "</span>" + " " + "is not available ." + " " + "<img src='Images/wrong.png' />";

                    break;
                default:
                    msg.style.color = "green";
                    msg.innerHTML = " <span style='font-weight:bold;'>" + nameBox.val() + "</span>" + " " + "is available ." + " " + "<img src='Images/correct.png' />";

            }
 

      
      
1

      
    

  

    
    

      
#4
        
        

      
الأن نريد إضافة ستايل خاص بال <asp:TextBox>  والذي يمثله المتغير nameBox   شكلكم نسيتوا صح ؟ :wink:
أولا نحدد ماهو الستايل المناسب في حالة Available  و NotAvailable ؟
انا حددت اللون الأخضر لل Available  والأحمر لل Not Available  ,  يعني اذا كان  userName موجود يتحول ال TextBox الى اللون الأحمروالا سيتحول اللون الأحضر
الأن حضيف كلاسات css بالشكل التالي :
.availablecss
  {
    background-color:#CEFFCE;
    border:1px solid green;
  }
  .notavailablecss
  {
      background-color:#FFD9D9;
      border:1px solid red;
  }
طبعا أنا أضفتها داخل StyleSheet  و أضفت اللينك الخاص بها في أعلى الصفحة  
والأن نضيف الكود التالي في حالة Not Available
nameBox.removeClass("availablecss");
nameBox.addClass("notavailablecss"); 
 
وهذا الكود في حالة Available
 nameBox.removeClass("notavailablecss");
nameBox.addClass("availablecss");
وألأن نأتي للكود النهائي لل Switch Case :
function OnSuccess(response) {
                var nameBox = $("#<%=textbox1.ClientID %>");
                var msg = $("#msg")[0];

            switch (response.d)
            {
                case "1":
                    msg.style.color = "red";
                    msg.innerHTML = "  <span style='font-weight:bold;'>" + nameBox.val() + "</span>" + " " + "is not available ." + " " + "<img src='Images/wrong.png' />";
                    nameBox.removeClass("availablecss");
                    nameBox.addClass("notavailablecss");
                    break;
                default:
                    msg.style.color = "green";
                    msg.innerHTML = " <span style='font-weight:bold;'>" + nameBox.val() + "</span>" + " " + "is available ." + " " + "<img src='Images/correct.png' />";
                    nameBox.removeClass("notavailablecss");
                    nameBox.addClass("availablecss");
            }

        }
بإمكانك أن تقوم بأكثر من هذا  , مثلا تقوم بتعيين Validation معين في كود ال C#.net  ( دالة ()CheckUserName)
فإذا كانت ال false  validation  تقوم الدالة بإرسال "2"  , فتقوم بمعالجتها داخل ال  JavaScript  في الSwitch case statment في source code .
ونكتب مثلا  : username is not correct.
وهكذا دواليك.
هنا نكون قد وصلنا الى النهاية , أمل ان ينال الدرس استحسانكم , فان أحسنت فمن الله , وان قصرت فمن نفسي و الشيطان
المشروع في المرفقات
قم بتشغيل الصفحة WebForm1.aspx
ajax test.zip

      
تم تعديل هذه المشاركة بواسطة yaser.net في 13 أكتوبر 2010 في 18:46

      
1

      
    

  

    
    

      
#5
        
        

      
 خطأ بسيط جدا 
وهو اني اضفت <img> , وسط ال <body>   حيث اننا لم نستعملها نهائيا 
وضعتها فقط لحاجة في نفس يعقوب .
حيث نسيت مالغاية التي من أجلها وضعت هذا الكونترول
فأرجو عندم إعتبارها جزء من الرنامج .

      
      

      
    

  

    
    

      
#6
        
        

      
الأخ العزيز yaser.net 
السلام عليكم ورحمة الله وبركاته
أحيّك على هذا الشرح البسيط في كلماته والمتين في فحواه
وأتوقع منك المزيد
وإلى الأمام دوما

      
      

      
    

  

    
    
    
 مواضيع مشابهة





  

    
عدد الزوار حالياً
المتواجدون خلال آخر ساعة · يتحدّث كل ٣٠ ثانية

    
—الإجمالي—أعضاء مسجّلون—زوار بدون تسجيل

    
جارٍ التحقق من المتواجدين…