آموزش استفاده از Ajax در asp.net core بوسیله jquery

Ajax چیست؟

AJAX مخفف عبارت Asynchronous JavaScript And XML است.AJAX یک تکنیک جدید برای ایجاد بهتر،سریع و تعاملی تر برنامه های کاربردی وب با کمک XML، HTML، CSS و Java Script است.

AJAX دوام‌ پذیرترین فناوری Rich Internet Application (RIA) تاکنون است. اما در عین حال، AJAX دارای ناسازگاری مرورگر است و توسط جاوا اسکریپت پشتیبانی می شود که نگهداری و اشکال زدایی آن را سخت می کند.

چرا باید از Ajax استفاده کنیم؟

AJAX براساس استانداردهای وب مانند HTML و CSS عمل میکند. داده ها در XML واکشی شده از سرور، ارسال، بازیابی و ذخیره می شوند.
AJAX بدون لود کامل صفحه ،درخواست را به سمت سرور ارسال و سپس پاسخ را به کلاینت ارسال میکند.
AJAX یک فناوری مرورگر وب مستقل از نرم افزار وب سرور است.
با Ajax یک کاربر می تواند در حالی که client اطلاعاتی را از سرور در پس زمینه درخواست می کند به استفاده از برنامه ادامه دهد.
با AJAX، هنگامی که دکمه ارسال را فشار می دهید، جاوا اسکریپت درخواستی را به سرور ارسال ، نتایج را تفسیر و صفحه فعلی را بروز می کند. به معنای خالص، کاربر هرگز نمی داند که چه چیزی به سرور منتقل شده است.

برای کار با Ajax نیاز به یک کتابخانه جاوااسکریپتی است که ارسال ajax را ممکن سازد،از این رو در این آموزش از کتابخانه jquery جهت ارسال Ajax استفاده شده است.همچنین جهت نمایش نتایج از Bootstrap استفاده شده است.

در این آموزش کاربرد Ajax در asp.net core را با یه مثال ساده و کاربردی از یک پروژه استعلام تخلفات پلاک خودرو نشان خواهیم داد،به این صورت که کاربر یک شماره پلاک وارد و به صورت ajax به سمت سرور ارسال می شود و پاسخ آن را بعد از پردازش سرور، در کلاینت با بوت استرپ نشان خواهیم داد.

ایجاد جدول به صورت Code First در Asp

ابتدا بوسیله Visual Studio یا VsCode یک پروژه Asp.Net Core 6 بصورت Mvc ایجاد می نماییم و سپس entity های لازم ( شماره پلاک و لیست تخلفات آن) را طبق تکه کد زیر پیاده سازی خواهیم کرد.


    
      
        
  
    
    

        


  


  
        مرجع تخصصی آموزش برنامه نویسی-codecell.ir

          
            public class Plate
        
        
          
              {
        
        
          
                  public long Id { get; set; }
        
        
          
                  public string LicensePlate { get; set; }
        
        
          
                  public virtual ICollection<Infraction> Infractions { get; set; }
        
        
          
              }
        
        
          
          

        
        
          
              public class Infraction
        
        
          
              {
        
        
          
                  public long Id { get; set; }
        
        
          
                  public string Price { get; set; }
        
        
          
                  public string Description { get; set; }
        
        
          
                  public string DateTime { get; set; }
        
        
          
              }

ایجاد کنترلر و تزریق وابستگی در Asp Core Mvc

جهت دریافت شماره پلاک و استعلام آن یک کنترلر ایجاد و اکشن استعلام را بصورت زیر پیاده سازی خواهیم کرد. در این کنترلر جهت ارتباط با دیتابیس باید تزریق وابستگی مربوطه را انجام دهیم.


    
      
        
  
    
    

        


  


  
        مرجع تخصصی آموزش برنامه نویسی-codecell.ir

          
          namespace Inquiry.Controllers
        
        
          
          {
        
        
          
              public class InquiryPlateController : Controller
        
        
          
              {
        
        
          
                  private readonly AppDbContext _appDbContext;
        
        
          
          

        
        
          
                  public InquiryPlateController(AppDbContext appDbContext)
        
        
          
                  {
        
        
          
                      _appDbContext = appDbContext;
        
        
          
                  }
        
        
          
          

        
        
          
                  public async Task<IActionResult> GetInquiry(PlateModel model)
        
        
          
                  {
        
        
          
                      if (ModelState.IsValid)
        
        
          
                      {
        
        
          
                          var plate = await _appDbContext.Plates.Include(x => x.Infractions).FirstOrDefaultAsync(p => p.LicensePlate == model.LicensePlate);
        
        
          
                          if (plate!= null)
        
        
          
                              return new JsonResult(plate.Infractions);
        
        
          
                      }
        
        
          
                      return NotFound();
        
        
          
                  }
        
        
          
          

        
        
          
                  public class PlateModel
        
        
          
                  {
        
        
          
                      public string LicensePlate { get; set; }
        
        
          
                  }
        
        
          
              }
        
        
          
          }

در این آموزش از یک مدل PlateModel جهت دریافت پارامترهای ورودی اکشن استعلام شماره پلاک استفاده شده است.

ساخت View در Asp.Net Core Mvc و استفاده از Ajax

در گام سوم view مربوط به استعلام شماره خودرو با Ajax در asp core را به صورت زیر پیاده سازی خواهیم کرد.


    
      
        
  
    
    

        


  


  
        مرجع تخصصی آموزش برنامه نویسی-codecell.ir

          
          <!DOCTYPE html>
        
        
          
          <html lang="en">
        
        
          
          <head>
        
        
          
              <link href="bootstrap.css" rel="stylesheet" />
        
        
          
              <meta charset="UTF-8">
        
        
          
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        
          
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
          
              <title>Document</title>
        
        
          
              <script src="jquery.min.js"></script>
        
        
          
          </head>
        
        
          
          <body dir="rtl">
        
        
          
              <div class="container mt-3">
        
        
          
                  <div class="col-md-4">
        
        
          
                      <label for="LicensePlate">شماره پلاک</label>
        
        
          
                      <input class="form-control" type="text" id="LicensePlate">
        
        
          
                      <div class="float-start mt-3">
        
        
          
                          <button class="btn btn-primary" onclick="Inquiry()">استعلام</button>
        
        
          
                      </div>
        
        
          
                  </div>
        
        
          
                  <table class="table table-bordered d-none">
        
        
          
                      <thead>
        
        
          
                          <tr>
        
        
          
                              <td>تاریخ</td>
        
        
          
                              <td>مبلغ</td>
        
        
          
                              <td>شرح</td>
        
        
          
                          </tr>
        
        
          
                      </thead>
        
        
          
                      <tbody id="Content"></tbody>
        
        
          
                  </table>
        
        
          
              </div>
        
        
          
              <script>
        
        
          
                  function Inquiry() {
        
        
          
                      $("tbody tr").remove();
        
        
          
                      let myData = {
        
        
          
                          LicensePlate: $("#LicensePlate").val()
        
        
          
                      }
        
        
          
                      $.ajax({
        
        
          
                          url: "/InquiryPlate/GetInquiry",
        
        
          
                          type: "Get",
        
        
          
                          data: myData,
        
        
          
                          dataType: "Json",
        
        
          
                          beforeSend: function () {
        
        
          
                              console.log("Start Ajax");
        
        
          
                          },
        
        
          
                          success: function (response) {
        
        
          
                              if (response.length > 0) {
        
        
          
                                  $.each(response, function (index, item) {
        
        
          
                                      let templete = `<tr>
        
        
          
                                                       <td>${item.DateTime}</td>
        
        
          
                                                       <td>${item.Price}</td>
        
        
          
                                                       <td>${item.DateTime}</td>
        
        
          
                                                       </tr>`
        
        
          
                                      $("#Content").append(templete);
        
        
          
                                      $("table").removeClass("d-none")
        
        
          
                                  })
        
        
          
                              }
        
        
          
                              else
        
        
          
                                  alert("هیچ تخلفی برای این شماره پلاک ثبت نشده است");
        
        
          
                          },
        
        
          
                          complete: function () {
        
        
          
                              console.log("End Ajax");
        
        
          
                          },
        
        
          
                          error: function (jqXHR, textStatus) {
        
        
          
                              //textStatus: "success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror"
        
        
          
                              alert("خطا در عملیات");
        
        
          
                          }
        
        
          
                      })
        
        
          
                  }
        
        
          
              </script>
        
        
          
          </body>
        
        
          
          </html>

توضیح پارامترهای استفاده شده در Ajax

beforeSend: به وسیله این پارامتر می توان یک تابع را تعیین کرد تا قبل از ارسال درخواست به سرور اجرا شود .
complete: به وسیله این پارامتر می توان یک تابع را تعیین کرد که بعد از تمام شدن درخواست (بعد از error و success) اجرا شود.
error: این پارامتر تعیین کننده یک تابع است تا در صورتی که درخواست ناموفق بود ، اجرا شود .

جمع بندی

ما در این آموزش با استفاده از Ajax درasp.net core و با حداقل رساندن اطلاعات ارسالی و دریافتی از سرور، یک شماره پلاک را به سمت سرور ارسال و بعد از پردازش سرور، نتیجه را بدون رفرش شدن صفحه نمایش دادیم.

دانلود سورس پروژه استفاده از Ajax در asp core

استفاده از Ajax در Asp.Net Core

کلمات کلیدی:

نویسنده:

مقالات پیشنهادی:

آموزش های نویسنده:

آموزش استفاده از Kendo UI در Asp.net core

آموزش SignalR در Asp.Net Core

Ajax چیست؟

چرا باید از Ajax استفاده کنیم؟

ایجاد جدول به صورت Code First در Asp

ایجاد کنترلر و تزریق وابستگی در Asp Core Mvc

ساخت View در Asp.Net Core Mvc و استفاده از Ajax

توضیح پارامترهای استفاده شده در Ajax

جمع بندی

دیگر مقالات آموزش برنامه نویسی مدرس

دستورات اساسی زبان Sql

دستورات اساسی زبان Sql

دستورات اساسی زبان Sql

نظرات

	مرجع تخصصی آموزش برنامه نویسی-codecell.ir
	public class Plate
	{
	public long Id { get; set; }
	public string LicensePlate { get; set; }
	public virtual ICollection<Infraction> Infractions { get; set; }
	}

	public class Infraction
	{
	public long Id { get; set; }
	public string Price { get; set; }
	public string Description { get; set; }
	public string DateTime { get; set; }
	}

	مرجع تخصصی آموزش برنامه نویسی-codecell.ir
	namespace Inquiry.Controllers
	{
	public class InquiryPlateController : Controller
	{
	private readonly AppDbContext _appDbContext;

	public InquiryPlateController(AppDbContext appDbContext)
	{
	_appDbContext = appDbContext;
	}

	public async Task<IActionResult> GetInquiry(PlateModel model)
	{
	if (ModelState.IsValid)
	{
	var plate = await _appDbContext.Plates.Include(x => x.Infractions).FirstOrDefaultAsync(p => p.LicensePlate == model.LicensePlate);
	if (plate!= null)
	return new JsonResult(plate.Infractions);
	}
	return NotFound();
	}

	public class PlateModel
	{
	public string LicensePlate { get; set; }
	}
	}
	}

	مرجع تخصصی آموزش برنامه نویسی-codecell.ir
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<link href="bootstrap.css" rel="stylesheet" />
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="jquery.min.js"></script>
	</head>
	<body dir="rtl">
	<div class="container mt-3">
	<div class="col-md-4">
	<label for="LicensePlate">شماره پلاک</label>
	<input class="form-control" type="text" id="LicensePlate">
	<div class="float-start mt-3">
	<button class="btn btn-primary" onclick="Inquiry()">استعلام</button>
	</div>
	</div>
	<table class="table table-bordered d-none">
	<thead>
	<tr>
	<td>تاریخ</td>
	<td>مبلغ</td>
	<td>شرح</td>
	</tr>
	</thead>
	<tbody id="Content"></tbody>
	</table>
	</div>
	<script>
	function Inquiry() {
	$("tbody tr").remove();
	let myData = {
	LicensePlate: $("#LicensePlate").val()
	}
	$.ajax({
	url: "/InquiryPlate/GetInquiry",
	type: "Get",
	data: myData,
	dataType: "Json",
	beforeSend: function () {
	console.log("Start Ajax");
	},
	success: function (response) {
	if (response.length > 0) {
	$.each(response, function (index, item) {
	let templete = `<tr>
	<td>${item.DateTime}</td>
	<td>${item.Price}</td>
	<td>${item.DateTime}</td>
	</tr>`
	$("#Content").append(templete);
	$("table").removeClass("d-none")
	})
	}
	else
	alert("هیچ تخلفی برای این شماره پلاک ثبت نشده است");
	},
	complete: function () {
	console.log("End Ajax");
	},
	error: function (jqXHR, textStatus) {
	//textStatus: "success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror"
	alert("خطا در عملیات");
	}
	})
	}
	</script>
	</body>
	</html>

به اشتراک گذاری

کلمات کلیدی:

نویسنده:

مقالات پیشنهادی:

آموزش های نویسنده:

آموزش استفاده از Kendo UI در Asp.net core

آموزش SignalR در Asp.Net Core

Ajax چیست؟

چرا باید از Ajax استفاده کنیم؟

ایجاد جدول به صورت Code First در Asp

ایجاد کنترلر و تزریق وابستگی در Asp Core Mvc

ساخت View در Asp.Net Core Mvc و استفاده از Ajax

توضیح پارامترهای استفاده شده در Ajax

جمع بندی

دستورات اساسی زبان Sql

دستورات اساسی زبان Sql

دستورات اساسی زبان Sql

نظرات