الفريق العربي للبرمجةأرشيف المنتديات · 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

السلام عليكم ورحمة الله وبركاته

أحيّك على هذا الشرح البسيط في كلماته والمتين في فحواه

وأتوقع منك المزيد

وإلى الأمام دوما

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