با سلام خدمت تمامی کاربران فکر بکر
در این مقاله سعی نمودم تا با ارائه مثال عملی به آموزش کامل Web Api بپردازم. قبل از هرچیز باید با مفاهیم Get ، Post ، Put و Delete آشنا شویم.
همانطور که می دانیم درخواستها در پروتکل http ارسال و دریافت میشود بناراین برای عملیات حذف از متد Delete و برای عملیات درج از متد Post و برای عملیات بروزرسانی از متد Put و برای عملیات انتخاب یا دریافت داده ها از متد Get استفاده میکنیم.
برای شروع پروژه از نوع MVC ایجاد نمایید.باتووجه به شکلهای زیر.
تذکر : تیکهای MVC وWeb API فراموش نشود.
کلاس زیر را در پوشه Model برنامه ایجاد نمایید.
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public string Price { get; set; }
}
البته شما میتوانید نوع price را بصورت عدد انتخاب نمایید.
در sql دیتابیسی با نام DBApi ایجاد نمایید و جدولی با مشخصات زیر برای دیتابیس بسازید. فیلد ID را بصورت Identity در نظر بگیرید;
این برنامه را با استفاده ار روش Database First انجام خواهیم داد لذا برای اینکار مراحل زیر را انجام دهید.
پوشه ای با نام Entity درون پوشه Model بسازید . و سپس بر روی آن کلیک راست و سپس گزینه ی Add – NewItem را انتخاب نمایید و در صفحه باز شده از قسمت Data گزینه Ado .Net Entity Data Model را انتخاب نمایید و بر روی Add کلیک نمایید.
مراحل را بصورت زیر دنبال کنید.
در شکل بالا به دیتابیس خود متصل میشویم.
در این قسمت تیک pluralize را بردارید و از قسمت Table جدول خود را انتخاب نمایید. در پایان مدل برنامه شما بصورت زیر ایجاد میگردد آنرا ذخیره نمایید.
به قسمت references بروید و ببنید در صورتی که EntityFrameWork به برنامه اضافه نشده است آنرا از طریق nugget اضافه نمایید.
اکنون وقت آن رسیده است تا یک WebApi به برنامه اضافه نماییم و توابع مورد نظر را در آن برای عملیات CRUD بنویسیم.
برای اینکار مراحل زیر را انجام دهید.
بر روی پوشه Controller کلیک راست کنید سپس گزینه های Add -> Controller را انتخاب نمایید و در صفحه باز شده گزینه ی Web API Controller Empty را انتخاب نمایید و پس از تایید در صفحه بعد نام آنرا ProductsController قرار دهید.
محتویات ProductsController را بصورت زیر ویرایش نمایید.
Models.Entity.DBApiEntities db = new Models.Entity.DBApiEntities();
public IEnumerable<Models.Entity.Products> GetAllProducts()
{
return db.Products.ToList();
}
public Models.Entity.Products GetProducts(int Id)
{
var product = db.Products.FirstOrDefault((p) => p.ID==Id);
if (product == null)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
return product;
}
// post
public HttpResponseMessage PostProducts(Product p)
{
Models.Entity.Products p2 = new Models.Entity.Products();
p2.Name = p.Name;
p2.Category = p.Category;
p2.Price = int.Parse(p.Price);
p2 = db.Products.Add(p2);
db.SaveChanges();
var response = Request.CreateResponse<Models.Entity.Products>(HttpStatusCode.Created, p2);
string uri = Url.Link("DefaultApi", new { id = p2.ID });
response.Headers.Location = new Uri(uri);
return response;
}
// PUT
public void PutProducts(int Id,Product p)
{
if(1==2)
{
throw new HttpResponseException(HttpStatusCode.NotFound);
}
var q=db.Products.Where(s => s.ID == Id).Single();
if (q != null)
{
q.Name = p.Name;
q.Price =int.Parse(p.Price);
q.Category =p.Category;
db.SaveChanges();
}
}
// DELETE
public void DeleteProducts(int Id)
{
var q = db.Products.Where(s => s.ID == Id).Single();
db.Products.Remove(q);
db.SaveChanges();
}
فضای نام using WebApiSample.Models; را جهت شناخت کلاس Product به این قسمت اضافه نمایید.
نکته مهمی که در این قسمت باید به آن توجه نمایید شروع شدن نام توابع با کلمات Post ، Put ، Get و Delete میباشد چرا که در حین ارسال درخواست ار برنامه به این کنترلر از طریق ایجکس باتوجه به مقدار قرار داده شده در قسمت type توابع مورد نظر از web api برای عملیات CRUD مورد نظر انتخاب میشوند.
در مرحله بعدی به ایجاد صفحه و قرار دادن اسکریپتهای مورد نیاز جهت برقراری ارتباط با Web Api ایجاد شده خواهیم پرداخت.
ما در این مثال از یک صفحه HTML استفاده خواهیم کرد و شما میتوانید در صورت تمایل از کنترلر استفاده نمایید.
صفحه html در روت برنامه خود با نام دلخواه ایجاد نمایید و کدهای زیر را درون آن قرار دهید.
نکته : فایل jquery را به برنامه اضافه نمایید در این برنامه از نسخه 3 آن استفاده شده است.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Product App</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="scripts/jquery-3.0.0.min.js"></script>
<script src="scripts/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="panel panel-success">
<div class="panel-heading">
<h2 class="success">مشاهده تمام محصولات</h2>
</div>
<div class="panel-body">
<ul id="products" class="list-unstyled " />
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h2>جستجو بر اساس کد محصول</h2>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="Id">کد را درج کنید</label>
<input type="text" id="Id" size="5" class="form-control" />
</div>
<input class="btn btn-default" type="button" value="Search" onclick="find();" />
<div class="well">
<p id="product" />
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4 col-md-ofsset-2">
<div class="form">
<div class="form-group">
<label for="Name">نام محصول</label>
<input class="form-control" type="text" title="Name" id="Name" name="Name" />
</div>
<div class="form-group">
<label for="category">گروه محصولات</label>
<input class="form-control" type="text" title="Category" id="Category" name="Category" />
</div>
<div class="form-group">
<label for="price">قیمت</label>
<input class="form-control" type="text" title="Price" id="Price" name="Price" />
</div>
<input type="button" class="btn btn-primary" value="بروز رسانی" id="btnupdate" />
<input type="button" value="اضافه نمودن" class="btn btn-success" id="btnAdd" />
<input type="button" value="حذف " class="btn btn-danger" id="btnDelete" />
</div>
</div>
</div>
</div>
<script>
var uri = '/api/products';
$(document).ready(function () {
selectAll();
});
function selectAll()
{
$.getJSON(uri)
.done(function (data) {
$("#products").html('');
// On success, 'data' contains a list of products.
$.each(data, function (key, item) {
$("#products").append("<li> کد محصول " + item.ID + " <<نام محصول = " + item.Name + ">> <<گروه = " + item.Category + ">> << قیمت = " + item.Price + ">></li>");
});
});
}
function find() {
alert('find');
var Id = $('#Id').val();
$.getJSON(uri + '/' + Id)
.done(function (data) {
$('#product').text(data.Name+" "+data.Category+" " + data.Price);
})
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);
});
}
$("#btnupdate").click(function () {
var Id = $('#Id').val();
// var id = $('#productId').val();
var Product = {
Name: $('#Name').val(),
Price: $('#Price').val(),
Category: $('#Category').val()
};
$.ajax({
url: 'api/Products/' + Id,
//url: 'api/Products' ,
cache: false,
type: 'PUT',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(Product)
//data: {Name:Name1,Category:Category1,Price:Price1}
}).done(function ()
{
alert('ok');
selectAll();
})
.fail(
function (xhr, textStatus, err) {
//self.status(err);
alert('fail');
});
//
});
$("#btnAdd").click(function () {
var Product = {
Name: $('#Name').val(),
Price: $('#Price').val(),
Category: $('#Category').val()
};
$.ajax({
url: 'api/Products',
//url: 'api/Products' ,
cache: false,
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(Product)
//data: {Name:Name1,Category:Category1,Price:Price1}
}).done(function (data) {
alert('inserted');
// alert(data.Name);
selectAll();
})
.fail(
function (xhr, textStatus, err) {
//self.status(err);
alert('fail for insert');
});
//
});
$("#btnDelete").click(function () {
var Id = $('#Id').val();
$.ajax({
url: 'api/Products/'+Id,
cache: false,
type: 'DELETE',
contentType: 'application/json; charset=utf-8',
data: {}
}).done(function (data) {
alert('deleted');
selectAll();
})
.fail(
function (xhr, textStatus, err) {
alert('fail for delete');
});
});
</script>
</body>
</html>
دقت نمایید برای عملیات حذف و بروزرسانی داده ها برای اینکه مقدار ID رکورد مورد نظر انتخاب شود از فیلد متنی با نام Id که برای جستجو در نظر گرفته شده است استفاده نمایید.
توضیحاتی از توابع نوشته شده :
selectAll :دریافت تمامی محصولات و نمایش آن زمانیکه صفحه لود شد.
find() : عملیات جستجو محصول بر اساس کد آن
$("#btnupdate").click(function () : زمانیکه بر روی دکمه با آیدی btnupdate کلیک شود دستورات آن اجرا شده و محصول مورد نظر حذف خواهد شد .
لطفا به بدنه این دستورات دقت نمایید . با قرار داد Type:DELETE پس از ارسال درخواست به ProductsController دستورات تابع DeleteProducts اجرا خواهند شد . این موارد برای عملیات درج و بروزرسانی و جستجو نیز انجام خواهد شد بنابراین نیازی به توضیحات اضافی در این قسمت نخواهد بود.
اکنون برنامه را اجرا نمایید.
صفحه html و فایل ProductsController و کلاس Product را میتوانید از قسمت فایلهای ضمیمه شده دانلود نمایید.