في هذه المقالة سوف نتحدث عن JQuery  ومميزاتها في ASP.NET MVC  .

من اهم المميزا تالرائعه في JQuery Ajax  هي عند عمل تحميل (GET,POST ) للبيانات من السيرفر , لا تحتاج لعمل تحديث لكامل الصفحة , فقط الجزء المستخدم للكود (على سبيل المثال DIV  معينه ) .

GET

تستخدم GET  عند الحاجة لجلب بيانات من السيرفر على سبيل المثال تحميل بيانات مستخدم من قاعدة البيانات .

الشكل العام ل GET  :

.get( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] ).done/.fail

لنقوم بعمل مثال يوضح كيف يمكننا الاستفادة من GET  في MVC App  .

في الكود التالي شوف يتم ارجاع الوقت من التابع GetTime  .

public string GetTime()
{
    return DateTime.Today.ToString();
}

 

لنقم باضافة السكريبت التالي في صفحة الويب .

 

<p id="DisplayHere">
</p>

 

<script type="text/jscript">
    var url = "GetTime";
    $.get(url, null, function (data) {
        $("#DisplayHere").html(data);
    });
</script>

 

 

 الناتج كما في الصوره السابقة . 

لو اردنا ان يكون التنفيذ عند النقر على Button  .

يتم تعديل الكود السابق كما التالي :

<script type="text/jscript">
    $('#btnID').click(function () {
        var url = "GetTime";
        $.get(url, null, function (data) {
            $("#Displayhere").html(data);
        });
    })
</script>

لنتعمق اكثر في استخدام Get  , ولنقوم بارسال بيانات من صفحة الويب إلى كود ال C#  ويتم ارجاعه ليظهر في اداة اخرى .

الكود التالي يقوم بانشاء صندوق نص باسم txtName  (الاسم هذا مهم جدا لانه وقف التنقيذ Razor  سيحول الاسم اي ID ) .

input  هي عباره عن button  من نوع Submit  . 

<p>
    Enter you name @Html.TextBox("TXTName")
    <input type="submit" id="SubmitName" value="Submit"/>
</p>
 
<script type="text/jscript">
    $('#SubmitName').click(function () {
        var url = "MsgFromRazro";
        var name = $('#TXTName').val();
        $.get(url, { input: name }, function (data) {
            $("#Displayhere").html(data);
        });
    })
</script>

كود ال C# , تابع يستقبل متحول من نوع string  يتاكد من انه غير فارع او NULL  .

يتم ارجاع نص  Please Welcome Name 

public string MsgFromRazro(string input)
{
    if (!String.IsNullOrEmpty(input))
        return "Please welcome " + input + ".";
    else
        return "Please enter your name.";
}

لنتعمق اكثر في JQuery AJAX   . 

هذه المره مع DataBase  , جلب البيانات من قاعدة بياانات واظهارها في صفحة الويب .

اضافة الكود التالي في C#  .

يتم ارسال اسم البلد  من صفحة الويب , والتابع بدوه يقوم بجلبه كل العملاء من DataBase  وارساله على شكل JSON  .

يتم ارجاع البيانات على انها JSON  .

public JsonResult Customer(string Id)
{
    NorthwindEntities db = new NorthwindEntities();
    var result = from r in db.Customers
                    where r.Country == Id
                    select new { r.ContactName, r.Address };
    return Json(result, JsonRequestBehavior.AllowGet);
}

 

كود صفحة الويب , 

 

<p id="DisplayHere">
</p>
 
<p>
    Enter country name @Html.TextBox("Country")
    <input type="submit" id="Get" value="Submit"/>
</p>
 
<script type="text/jscript">
    $('#GetCustomers').click(function () {
        $.getJSON('Customer' + $('#Country').val(), function (data) {
 
            var items = '<table><tr><th>Name</th><th>Address</th></tr>';
            $.each(data, function (i, country) {
                items += "<tr><td>" + country.ContactName + "</td><td>" + country.Address + "</td></tr>";
            });
            items += "</table>";
 
            $('#DisplayHere').html(items);
        });
    })
</script>
 

 

باختصار هذه  احدا ميزات Jquery AJAX wtih ASP.NET MVC 

ساحاول تسجيل فيديو ونشره على Youtube  , ليكون الامر ممتع اكثر وسهل بنفس الوقت .

 



Share

Comments