jQuery Ajax ASP.NET MVC GET/Post Part 2 عربي

by

مره اخرى مع JQuery AJAX ASP.NET MVC   .

اليوم سوف نتحدث في المقالة التالية عن POST  . 

وكيف يتم استخدامها في ASP.NET MVC  .

POST

الشكل العام :

.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

هي على عكس Get  التي كانت تجلب البيانات من مكتن معين (قاعدة بيانات الخ..).

Post  ترسل البيانات إلى مكان محدد من صفحة الويب . 

الكوج التالي هو كود ارسال Name and Address  بشكل وهمي من ادارء إلى اخرى , عبر التابع التالي .

[HttpPost]
public string Submit(string Name, string Address)
{
    if (!String.IsNullOrEmpty(Name) && !String.IsNullOrEmpty(Address))
        //TODO: Save the data in database
        return "Thank you " + Name + ". Record Saved.";
    else
        return "Please complete the form.";
}

بعد التاكد من عدم ارسال بيانات فارغه . يتم اظهار الرسالة التالية :

Thank you   Name  . Record Saved.

وفي حال كان لا يوجد بيانات , تظهر رساله تطلب بادخالها :

Please complete the form.

 

الكود التالي من اجل صفحة الويب :

 

<p>
    Enter your name
    <br />
    @Html.TextBox("Name")
</p>
<p>
    Enter your address
    <br />
    @Html.TextBox("Address")
</p>
 
<input type="button" value="Save" id="Save" />
<span id="msg" style="color:red;"/>
 
<script type="text/javascript">
    $('#Save').click(function () {
        var url = "Subscription";
        var name = $("#Name").val();
        var address = $("#Address").val();
        $.post(url, { Name: name, Address: address }, function (data) {
            $("#msg").html(data);
        });
    })
</script>

لنحاول هذا المره , ان يكون الكود اكثر احترافيه .

ونستخدم Form  . كما في الشمل التالي : 

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

public class Subscription
{
    public string Name { get; set; }
    public string Address { get; set; }
}

 

والتعديل على الكود , ليستقبل من كلاس Subscrption  , .

[HttpPost]
public string SubmitSubscription(Subscription subs)
{
    if (!String.IsNullOrEmpty(subs.Name) && !String.IsNullOrEmpty(subs.Address))
        //TODO: Save the data in database
        return "Thank you " + subs.Name + ". Record Saved.";
    else
        return "Please complete the form.";
}

 

كود الويب سكون مختلف قليلا , حيث انه سيتم استخدام From  كما في الشكل التالي :

<form id="subscriptionForm" action="/Home/SubmitSubscription" method="post">
<p>
    Enter your name
    <br />
    @Html.TextBox("Name")
</p>
<p>
    Enter your address
    <br />
    @Html.TextBox("Address")
</p>
 
<input type="button" value="Save" id="Save" />
<span id="msg" style="color:red;"/>
</form>
 
@section Scripts{
    <script type="text/javascript">
        $('#Save').click(function () {
 
            var form = $("#subscriptionForm");
            var url = form.attr("action");
            var formData = form.serialize();
            $.post(url, formData, function (data) {
                $("#msg").html(data);
            });
        })
    </script>
}
 

تم اعطاء الفورم اسم subscriptionForm   حتى يسهل قراءة البيلنات منه في كود الجافا سكريبت .

لن يختلف شي عندي في وقت التنفيذ والناتج كما في الكود السابق . 

لكن هذه الطريقه جيدة من اجل قواعد البيانات ....

 

وشكرا ...

jQuery Ajax ASP.NET MVC GET/Post Part 1 عربي

by

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