آموزش دریافت اطلاعات توسط Ajax در ASP.NET Core

آموزش دریافت اطلاعات توسط Ajax در ASP.NET Core

چه کاری قرار است انجام دهیم؟
در این مقاله می خواهیم اطلاعاتی را از بانک اطلاعاتی واکشی کنیم و در صفحه نمایش دهیم، البته با این تفاوت که می خواهیم دریافت اطلاعات توسط Ajax انجام شود.

شروع کار:
1. در مرحله اول ابتدا یک پروژه خالی با ASP.NET Core می سازیم و تنظیمات مربوط به فایل Startup.cs را انجام می دهیم.
برای این کار ابتدا در خط فرمان دستور زیر را اجرا می کنیم:
dotnet new empty
همانطور که می دانید با اجرای این دستور یک پروژه خالی در پوشه جاری ساخته می شود.
حالا فایل Startup.cs را باز می کنیم و تغییرات زیر را اعمال می کنیم:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

namespace Project
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddMvc();
        }
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Demo}/{action=Index}/{id?}");
            });
        }
    }
}

تغییری که دادیم مربوط به سیستم Routing بود.

2. در مرحله دوم مدل های مورد نیاز را می سازیم (در این پروژه تمرکز ما روی ساخت مدل و پروژه نبوده و به همین دلیل توضیح زیادی در رابطه با مدلها و بانک اطلاعاتی نمی دهیم و همینطور دقت داشته باشید که برای انجام سریع تر پروژه از بانک اطلاعاتی استفاده نمی کنیم)
در ریشه پروژه پوشه ای با نام Models می سازیم
در این پوشه کلاسی با نام Product.cs ساخته و کدهای زیر را به این کلاس اضافه می کنیم:

namespace Project
{
    public class Product
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Photo { get; set; }
    }
}

3. در مرحله سوم کنترلر مورد نیاز را ساخته و متدهایی را به آن اضافه می کنیم:
در ریشه پروژه پوشه ای با نام Controllers ساخته و فایلی با نام DemoController.cs به آن اضافه می کنیم و در نهایت کدهای این کنترلر را به صورت زیر می نویسیم:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Project.Models;
using Microsoft.AspNetCore.Mvc;

namespace Project.Controllers
{
    [Route("demo")]
    public class DemoController : Controller
    {
        [Route("")]
        [Route("index")]
        [Route("~/")]
        public IActionResult Index()
        {
            return View();
        }

        [Route("demo1")]
        public IActionResult Demo1()
        {
            return new JsonResult("Hello");
        }

        [Route("demo2/{fullName}")]
        public IActionResult Demo2(string fullName)
        {
            return new JsonResult("Hello " + fullName);
        }

        [Route("demo3")]
        public IActionResult Demo3()
        {
            var product = new Product()
            {
                Id = "p01",
                Name = "name 1",
                Price = 123
            };
            return new JsonResult(product);
        }

        [Route("demo4")]
        public IActionResult Demo4()
        {
            var products = new List<Product>()
            {
                new Product() {
                    Id = "p01",
                    Name = "name 1",
                    Price = 123
                },
                new Product() {
                    Id = "p02",
                    Name = "name 2",
                    Price = 456
                },
                new Product() {
                    Id = "p03",
                    Name = "name 3",
                    Price = 789
                }
            };
            return new JsonResult(products);
        }

    }
}

. در این مرحله ویو های مورد نیاز را می سازیم:
پوشه ای با نام Views در ریشه پروژه ایجاد کرده و در این پوشه پوشه جدیدی با نام Demo ایجاد می کنیم و سپس فایل ویو با نام Index.cshtml در این پوشه می سازیم و کدهای زیر را در آن قرار می دهیم:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            $('#buttonDemo1').click(function () {
                $.ajax({
                    type: 'GET',
                    url: '/demo/demo1',
                    success: function (result) {
                        $('#result1').html(result);
                    }
                });
            });

            $('#buttonDemo2').click(function () {
                var fullName = $('#fullName').val();
                $.ajax({
                    type: 'GET',
                    url: '/demo/demo2/' + fullName,
                    success: function (result) {
                        $('#result2').html(result);
                    }
                });
            });

            $('#buttonDemo3').click(function () {
                $.ajax({
                    type: 'GET',
                    url: '/demo/demo3',
                    success: function (result) {
                        var s = 'Id: ' + result.id;
                        s += '<br>Name: ' + result.name;
                        s += '<br>Price: ' + result.price;
                        $('#result3').html(s);
                    }
                });
            });

            $('#buttonDemo4').click(function () {
                $.ajax({
                    type: 'GET',
                    url: '/demo/demo4',
                    success: function (result) {
                        var s = '';
                        for (var i = 0; i < result.length; i++) {
                            s += '<br>Id: ' + result[i].id;
                            s += '<br>Name: ' + result[i].name;
                            s += '<br>Price: ' + result[i].price;
                            s += '<br>------------------';
                        }
                        $('#result4').html(s);
                    }
                });
            });

        });
    </script>
</head>
<body>

    <fieldset>
        <legend>Demo 1</legend>
        <input type="button" value="Demo 1" id="buttonDemo1" />
        <br />
        <span id="result1"></span>
    </fieldset>

    <fieldset>
        <legend>Demo 2</legend>
        Full Name <input type="text" id="fullName" />
        <input type="button" value="Demo 2" id="buttonDemo2" />
        <br />
        <span id="result2"></span>
    </fieldset>

    <fieldset>
        <legend>Demo 3</legend>
        <input type="button" value="Demo 3" id="buttonDemo3" />
        <br />
        <span id="result3"></span>
    </fieldset>

    <fieldset>
        <legend>Demo 4</legend>
        <input type="button" value="Demo 4" id="buttonDemo4" />
        <br />
        <span id="result4"></span>
    </fieldset>

</body>
</html>

همانطور که می بینید در صفحه چهار بخش قرار داده این که هرکدام با کلیک شدن دکمه ای که در آن قرار دارد یک درخواست Ajax ارسال می کند.
اگر در مرحله 3 به خاطر داشته باشید بعد از ساخت کنترلر اکشن متدهایی را به این فایل اضافه کریدم، اجازه بدهیم کمی مرور کنیم:
اکشن متد Demo1 را با کدهای زیر ساختیم :

        [Route("demo1")]
        public IActionResult Demo1()
        {
            return new JsonResult("Hello");
        }

این اکشن متد کار خاصی برای ما انجام نمی دهد، تنها یک رشته با متن Hello را به صورت JSON برمی گرداند.
حالا برگردیم به کدهای ویو:
به کدهای جاوا اسکریپت زیر دقت کنید:

$('#buttonDemo1').click(function () {
    $.ajax({
        type: 'GET',
        url: '/demo/demo1',
        success: function (result) {
            $('#result1').html(result);
        }
    });
});

می بینید که با کلیک شدن روی دکمه buttonDemo1 یک درخواست Ajax به آدرس /demo/demo1 ارسال می شود و نتیجه را در المنت result1 نمایش می دهد.
آدرس /demo/demo1 همان اکشن متدی است که بالاتر بررسی کردیم.

اکشن متد بعدی که در کنترلر قرار داده ایم:

[Route("demo2/{fullName}")]
public IActionResult Demo2(string fullName)
{
    return new JsonResult("Hello " + fullName);
}

تقریبا همان کار اشکن متد اول را انجام می دهد با این تفاوت که یک رشته به عنوان ورودی گرفته و با کلمه Hello ترکیب میکند و در نهایت به صورت JSON بر می گرداند.
در کدهای جاوا اسکریپت هم به همان روش بالا درخواست Ajax به آدرس /demo/demo2 ارسال می شود با این تفاوت که این بار رشته ای را در آدرس ارسال می کنیم و در نهایت نتیجه برگشت داده شده را نمایش می دهیم.

در اکشن متد سوم کدهای زیر را نوشتیم :

[Route("demo3")]
public IActionResult Demo3()
{
    var product = new Product()
    {
        Id = "p01",
        Name = "name 1",
        Price = 123
    };
    return new JsonResult(product);
}

دقیقا مثل اکشن متد اول اما این بار بجای رشته یک موجودیت Product را به صورت JSON بر می گرداند.
در کدهای جاوا اسکریپت مربوط به این متد هم به همان صورت اول درخواست اطلاعات را انجام داده ایم و نتیجه که یک (در اینجا) یک JSON حاوی موجودیت Product است را در صفحه نمایش می دهیم.

آخرین اکشن متدی که در کنترلر Demo نوشته ایم مانند دیگر اشکن متدها عمل می کند و در نتهایت یک لیست از موجودیت Product را به صورت JSON به عنوان پاسخ ارسال می کند:

[Route("demo4")]
public IActionResult Demo4()
{
    var products = new List<Product>()
    {
        new Product() {
            Id = "p01",
            Name = "name 1",
            Price = 123
        },
        new Product() {
            Id = "p02",
            Name = "name 2",
            Price = 456
        },
        new Product() {
            Id = "p03",
            Name = "name 3",
            Price = 789
        }
    };
    return new JsonResult(products);
}

اگر به کدهای جاوا اسکریت مربوط به این اکشن متد دقت کنید می بینید که به همان روش قبل درخواست Ajax به آدرس /demo/demo4 ارسال می شود و نتیجه که یک JSON حاوی لیستی از موجودیت Product می باشد را دریافت کرده و با استفاده از یک حلقه for اطلاعات لیست را در صفحه نمایش می دهد.

جمع بندی:
در این مقاله تمرکز ما روی متد GET بود و تمام ارسال های Ajax که داشتیم به صورت GET انجام شد.
چهار حالت مختلف برای دریافت اطلاعات توسط Ajax در ASP.NET Core را برسی کردیم که می توانید روش ها را با هم ترکیب کرده و یا به همین صورت استفاده کنید.

موفق و پیروز باشید. 

نظرات (0)

نظرسنجی
میزان رضایت شما از امکانات و مقالات سایت