قبل از شروع آموزش بیایید ببینیم Ajax چیست؟ همانطور که همۀ ما می دانیم، Ajax به معنای Asynchronous JavaScript and XML (جاوا اسکریپت و xml به صورت غیر همزمان) می باشد. Ajax یک اسکریپت سمت کلاینت است که بدون اینکه صفحه رفرش شود، در واقع بدون اینکه پُست بک (postback) صورت پذیرد، با سرور یا دیتابیس در سرور، ارتباط برقرار می کند. Ajax زمان پاسخگویی را افزایش می دهد. به عبارت دیگر Ajax روشی برای تبادل داده با یک سرور است، بدون اینکه کل صفحه از نو لود شود، در روش استفاده از Ajax فقط بخش خاص یا بخش هایی خاص از صفحۀ وب را رفرش می کنیم. در این آموزش به این موضوع می پردازیم. اگر در این ارتباط نیاز به آموزش های بیشتری داشته باشید آموزش Ajax در MVC | راهنمای رایگان به کارگیری Ajax در ASP .NET MVC منبع آموزشی خوبی برای شما می باشد.

• آموزش Ajax در MVC | راهنمای رایگان به کارگیری Ajax در ASP .NET MVC — کلیک کنید

پیش نیازها و توضیح برخی واژگان به کار رفته در آموزش ajax در mvc

هر چند این آموزش گام به گام می باشد و حتی بدون دانستن برخی مفاهیم نیز می توانید آن را پیش ببرید اما برای انجام این آموزش بهتر آنست که یک سری واژگان و مفاهیم به کار رفته در آن را بشناسید.

شما باید در ابتدا درکی از MVC داشته باشید. MVC در واقع یک الگوی طراحی نرم افزار است که در آن سه عنصر اساسی مدل (Model) و ویو (View) و کنترلر (Controler) به کار رفته اند. در قسمت مدل، ساختار داده های برنامه مستقل از واسط کاربری قرار می گیرند. کلیۀ عملیات مرتبط با داده ها، منطق برنامه و قوانین مرتبط با برنامه در مدل صورت می پذیرد. در قسمت ویو، قسمت های ارائه برنامه مانند نمودارها، جدول ها، و از این قبیل قرار می گیرد. در واقع ویو آن چیزی است که کاربر می بیند. در قسمت کنترلر داده ها از ویو دریافت می شود و به مدل ارجاع داده می شود. در واقع کاربر با ویو و کنترلر سر و کار دارد و ویو و کنترلر نیز هر کدام با مدل ارتباط دارند. به نوعی در MVC به یک طراحی سه لایه سر و کار داریم.

مفهوم دیگری که در این آموزش بکار رفته است jQuery می باشد. jQuery در واقع یک کتابخانۀ مشهور از جاوا اسکریپت می باشد که به صورت رایگان نیز ارائه شده است. این کتابخانه به سرعت در بین برنامه نویسان وب مشهور شد و هم اکنون بخشی جدایی ناپذیر از بسیاری از برنامه های تحت وب و وب سایت ها می باشد. اگر یک برنامه نویس وب هستید چاره ای ندارید جز اینکه دیر یا زود با این کتابخانه درگیر شوید. jQuery علاوه بر امکانات فراوانی که در ارتباط با کارکردهای مختلف جاوا اسکریپت به شما می دهد، در حوزۀ کارهای ظاهری و زیبا سازی نیز قدرت فراوانی دارد. از این ها که بگذریم وقتی با Ajax کار می کنید، jQuery نسبت به جاوا اسکریپت خالی، بسیار ساده تر و در عین حال قدرتمندتر عمل می کند. برای همین اگر تا امروز با آن آشنا نبوده اید، دست بکار شوید و آن را آغاز کنید، خوشبختانه در ادامۀ همین مقاله یک منبع آموزشی جامع برای کار با آن نیز به شما معرفی کرده ایم.

مفهوم دیگر بکار رفته در این آموزش Bootstrap می باشد. بوت استرپ یک فریم ورک فرانت اند (front-end framework) می باشد که اولین بار توسط شرکت توییتر طراحی شد، اما بعدها به صورت رایگان در سطح جهانی منتشر شد و محبوبیت بسیاری در بین برنامه نویسان وب پیدا کرد. بوت استرپ در واقع یک فریم ورک CSS می باشد و شما به کمک آن و ساختار بی نظیر جدولی آن می توانید به سرعت ظاهری بسیار زیبا به برنامه های تحت وبتان بدهید. یکی از ویژگی های خاص دیگر بوت استرپ اینست که به کمک آن می توانید سایت هایی بسازید که هم برای موبایل و هم برای دسکتاپ بهینه شده اند، در واقع اندازۀ صفحه و عناصر موجود در آن حالتی انعطاف پذیر دارند که در بین برنامه نویسان به رسپانسیو مشهور است. اگر از آن دست برنامه نویسانی هستید که تسلط خیلی بالایی بر روی css دارند و ترجیح می دهند خودشان تمامی کارهای طراحی و زیبا سازی وبسایتشان را انجام دهند و از هیچ فریم ورکی برای این منظور استفاده نمی کنید، شاید با دیدن بوت استرپ و قدرت آن نظرتان کمی تغییر کند، شاید هم بخواهید از آن ایده بگیرید، به هر حال آشنایی با بوت استرپ از اوجب واجبات می باشد، چون ممکن است در مجموعه ای مشغول بکار شوید که در آن طراحی های مبتنی بر بوت استرپ باشند.

آموزش گام به گام استفاده از Ajax در MVC

مرحلۀ 1
ابتدا یک پروژۀ جدید بسازید و نوع آن را ASP.NET MVC web application انتخاب کنید.

مرحلۀ 2
سپس مدلی (model) با نام Students بسازید که دارای پراپرتی های (properties) با اسامی studentID و studentName و studentAddress باشد. این کلاس را در ادامه می بینید.

public class Student

    {

        [Key]

        public int studentID { get; set; }

        [Required]

        public string studentName { get; set; }

        [Required]

        public string studentAddress { get; set; }

    }

به ابتدای مدلتان "using System.ComponentModel.DataAnnotations" را بیفزایید و سپس یک بار پروژه را بیلد (build) کنید.

مرحلۀ 3
بیایید با ارث بری (inheriting) از DbContext یک مدل دیگر بسازیم. این کلاسی است که تمامی عملیات مرتبط با پایگاه داده را مدیریت خواهد کرد، عملیاتی از قبیل ایجاد کانکشن (connection) به پایگاه داده و مدیریت موجودیت های مختلف مدل موجودیت ما (Entity Model) در این کلاس صورت خواهد پذیرفت.

همچنین می گوییم که DbContext یک رَپر (wrapper) از کلاس ObjectContext می باشد. بنابراین DbContext یک نسخۀ سبک از ObjectContext می باشد و صرفاً ویژگی هایی از آن را که واقعاً در برنامه نویسی به آن نیاز داریم برای ما بیان می کند.

در اینجا مدلی با نام StudentContext می سازیم که در زیر می بنید.

public class StudentContext : DbContext

    {

        public DbSet Students { get; set; }

    }

به ابتدای این کلاس "using System.Data.Entity" را بیفزایید.

در این آموزش از کتابخانۀ jQuery استفاده شده است. اگر در ارتباط با آن نیاز به منبع آموزشی کاملی دارید مجموعه آموزش‌ jQuery (جی کوئری) سایت فرادرس را به شما پیشنهاد می کنیم.

• مجموعه آموزش‌ jQuery (جی کوئری) — کلیک کنید

مرحلۀ 4
حالا یک کنترلر (controller) بسازید که با آن داده ها را به دیتابیس بیفزایید، و همچنین داده های دیتابیس را در ویو (view) نشان دهید.

در ادامه کنترلر Student را می سازیم. در داخل این کنترلر شیئی از کلاس StudentContext ایجاد می کنیم که با آن داده ها را به دیتابیس اضافه کنیم یا از دیتابیس بازیابی کنیم. همچنین فضاهای نامی (namespace) مورد نیاز را نیز اضافه می کنیم.

StudentContext context = new StudentContext();

public ActionResult Index()

{

return View();

}

مرحلۀ 5
حالا یک متد اکشن (action methods) برای افزودن داده ها به دیتابیس و بازیابی داده ها از دیتابیس می سازیم.

در اینجا یک متد اکشن [HttpPost] با نام createStudent می سازیم تا داه های موجود در فرمت JSON را به دیتابیس اضافه کنیم. در ادامه این متد اکشن را می بینید.

[HttpPost]

        public ActionResult createStudent(Student std)

        {

            context.Students.Add(std);

            context.SaveChanges();

            string message = "SUCCESS";

            return Json(new { Message = message, JsonRequestBehavior.AllowGet });

        }

به طرز مشابهی، متد getStudent را برای بازیابی داده ها از دیتابیس و بازگرداندن آنها در شکل JSON می سازیم تا بعداً در جاوا اسکریپت از آن استفاده کنیم.

public JsonResult getStudent(string id)

        {

            Liststudents = new List();

            students = context.Students.ToList();

            return Json(students, JsonRequestBehavior.AllowGet);

        }

مرحلۀ 6
اکنون یک ویو (view) بسازید تا داده ها را نشان دهد و همینطور داده ها را برای افزودن دریافت کند. در اینجا یک ویو با نام Index.cshtml می سازیم سپس کد html ای برای دریافت فیلد های داده می سازیم و یک دکمۀ سابمیت (submit) در آن قرار می دهیم. شما می توانید برای طراحی این فرم از کلاس های بوت استرپ (bootstrap) نیز استفاده کنید. من ترجیح داده ام که از بوت استرپ استفاده کنم تا طراحی ساده تر گردد. کد طراحی شدۀ من به شکل زیر می باشد.

اگر تمایل دارید که دانشتان در حوزۀ MVC را توسعه دهید، یک پیشنهاد عالی برای شما داریم، آموزش چارچوب توسعه تحت وب ASP.NET MVC یک آموزش جامع در این ارتباط می باشد.

• آموزش چارچوب توسعه تحت وب ASP.NET MVC — کلیک کنید

<div class="col-md-12"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Please enter the details below.</h3> </div> <div class="panel-body"> <div class="form-group col-md-5"> <label>Student Name</label> <input type="text" name="StudentName" id="StudentName" class="form-control"<br /> placeholder="Enter Student Name" required="" /><br /> </div> <div class="form-group col-md-5"> <label>Student Address</label> <input type="text" name="StudentAddress" id="StudentAddress"<br /> class="form-control" placeholder="Enter Student Address" required="" /><br /> </div> <br /> <div class="form-group col-md-1"> <div style="float: right; display:inline-block;"> <input class="btn btn-primary" name="submitButton" id="btnSave"<br /> value="Save" type="button"><br /> </div> </div> </div> </div><hr /><br /> <table id="tblStudent" class="table table-bordered table-striped table-responsive table-hover"> <thead> <tr> <th align="left" class="productth">ID</th> <th align="left" class="productth">Student Name</th> <th align="left" class="productth">Student Address</th> </tr> </thead> <tbody></tbody> </table> </div>
توجه داشته باشید که ما به سادگی می توانیم از کلاس بوت استرپ (bootstrap) استفاده کنیم و همچنین به سادگی می توانیم توابع jQuery را نیز فراخوانی کنیم، زیرا هنگامی که یک پروژۀ ASP.NET MVC را می سازیم، به صورت پیش فرض این موارد در آن وجود دارند.

مرحلۀ 7
حالا نوبت به نوشتن کدهای مربوط به افزودن داده ها به پایگاه داده و همچنین بازیابی داده ها از پایگاه داده رسیده است. درست بعد از جاییکه کد html بالا را نوشتید، کدهای زیر را اضافه کنید.

اگر احساس می کنید در زمینۀ html هنوز خیلی چیزها هست که باید برایشان وقت بگذارید، توصیه می کنیم مجموعه آموزش طراحی سایت با HTML و CSS را ببینید و به واسطۀ آن دانشتان در زمینۀ تکنولوژی های پایه ای طراحی وب را ارتقاء دهید.

• مجموعه آموزش طراحی سایت با HTML و CSS — کلیک کنید

@section Scripts

{

    $(function () {

        LoadData();

        $("#btnSave").click(function () {

            //alert("");

            var std = {};

            std.studentName = $("#StudentName").val();

            std.studentAddress = $("#StudentAddress").val();

            $.ajax({

                type: "POST",

                url: '@Url.Action("createStudent")',

                data: '{std: ' + JSON.stringify(std) + '}',

                dataType: "json",

                contentType: "application/json; charset=utf-8",

                success: function () {

                   // alert("Data has been added successfully.");

                    LoadData();

                },

                error: function () {

                    alert("Error while inserting data");

                }

            });

            return false;

        });

    });



    function LoadData() {

        $("#tblStudent tbody tr").remove();

        $.ajax({

            type: 'POST',

            url: '@Url.Action("getStudent")',

            dataType: 'json',

            data: { id: '' },

            success: function (data) {

                var items = '';

                $.each(data, function (i, item) {

                    var rows = ""

                    + "" + item.studentID + ""

                    + "" + item.studentName + ""

                    + "" + item.studentAddress + ""

                    + "";

                    $('#tblStudent tbody').append(rows);

                });

            },

            error: function (ex) {

                var r = jQuery.parseJSON(response.responseText);

                alert("Message: " + r.Message);

                alert("StackTrace: " + r.StackTrace);

                alert("ExceptionType: " + r.ExceptionType);

            }

        });

        return false;

    }

}

در اینجا ما از Ajax برای رفرش کردن tblStudent استفاده می کنیم، بنابراین به جای اینکه کل صفحه را رفرش کند، فقط این جدول خاص را رفرش می کند. بعد از اینکه دکمۀ submitButton کلیک شود، داده ها از فیلدهای ورودی گرفته می شوند و در متغیرها قرار می گیرند و به اکشن createStudent از کنترلر StudentController ارسال می شوند تا در دیتابیس اضافه شوند. البته یک تابع بنام LoadData نیز نوشته ایم که داده ها را از دیتابیس بگیرد و هر بار که عمل افزودن انجام می شود داده ها در ویو نشان داده شوند. در داخل تابع LoadData متد getStudent فراخوانی شده است که نتایج را در فرمت JSON باز می گرداند.

در دنیای وب مدام با جیسون (JSON) سر و کار خواهید داشت، اگر می خواهید درک عمیق تری از JSON پیدا کنید توصیه می کنیم مقاله جیسون (JSON) چیست؟ - به زبان ساده از سایت فرادرس را بخوانید.

مرحلۀ 8
حالا رشتۀ اتصال (connectionStrings) را در فایل web.config تنظیم می کنیم.


در این رشتۀ اتصال (کانکشن استرینگ) StudentContext نام کلاس ارث بری شده از کلاس DbContext در فایل StudentContext.cs می باشد. RAVI-KANDEL نام سرور دیتابیس و Student نام خود دیتابیس می باشد. RAVI-KANDEL را متناسب با نام سرور خودتان تغییر دهید. در پایان برنامۀ تان را اجرا کنید و به کلاس کنترلر بروید.

بعد از اینکه کد نویسی تان تمام شد مشابه تصویر زیر می توانید داده ها را به دیتابیس اضافه کنید و همینطور داده های اضافه شده را نمایش دهید.

برای بزرگنمایی تصویر روی آن کلیک کنید