في هذه المقالة سوف نتحدث عن 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 , ليكون الامر ممتع اكثر وسهل بنفس الوقت .
