چگونه از وب سرویس ASP.NET در AngularJS استفاده کنیم؟
آیا با یک پروژه قدیمی مواجه شدهاید که از AngularJS در فرانتاند و وب سرویس ASP.NET (.asmx) در بکاند استفاده میکند؟ شاید هم در حال یادگیری نحوه تعامل این دو تکنولوژی کلاسیک هستید. گرچه امروزه ابزارهای مدرنتری مانند Angular و ASP.NET Core Web API جایگزین شدهاند، اما درک نحوه عملکرد سیستمهای قدیمی هنوز یک مهارت ارزشمند است. 🚀
در این مقاله جامع و قدم به قدم، به شما نشان میدهیم که چگونه یک وب سرویس ASP.NET بسازید. سپس یاد میگیرید چطور دادهها را از آن دریافت کرده و در یک برنامه AngularJS نمایش دهید. این راهنما به صورت کاملاً عملی و با توضیحات شفاف ارائه شده است. بنابراین، بیایید شروع کنیم!
چرا اتصال AngularJS به وب سرویس ASP.NET اهمیت دارد؟
پیش از ورود به کدنویسی، بهتر است بدانیم چرا این معماری در گذشته محبوب بود. AngularJS یک فریمورک قدرتمند سمت کلاینت (Client-Side) است. این فریمورک وظیفه مدیریت رابط کاربری (UI) را بر عهده دارد. از سوی دیگر، ASP.NET یک پلتفرم سمت سرور (Server-Side) برای ساخت منطق برنامه و اتصال به پایگاه داده است.
وب سرویس به عنوان یک پل ارتباطی عمل میکند. این پل به AngularJS اجازه میدهد تا درخواستهای خود را به سرور ارسال کند. سپس دادههای مورد نیاز را در فرمت JSON دریافت کرده و به کاربر نمایش دهد.
گام اول: ساخت و آمادهسازی وب سرویس ASP.NET
اولین قدم ما ساخت یک سرویس در سمت سرور است. این سرویس مسئول خواندن اطلاعات از پایگاه داده و ارسال آنها خواهد بود.
۱. ایجاد پایگاه داده و جدول
فرض میکنیم شما یک پایگاه داده SQL Server دارید. در این پایگاه داده، یک جدول به نام employees ایجاد کنید. این جدول میتواند شامل ستونهای زیر باشد:
EmpName(نام کارمند)EmpAddress(آدرس کارمند)EmpSalary(حقوق کارمند)
۲. ایجاد وب سرویس .asmx
حالا در پروژه Visual Studio خود، یک آیتم جدید از نوع Web Service (ASMX) اضافه کنید. نام آن را EmployeeService.asmx بگذارید. این فایل نقطه ورود درخواستهای ما خواهد بود.
۳. کدنویسی وب سرویس برای دریافت دادهها
برای شروع، باید فضاهای نام (namespaces) مورد نیاز را اضافه کنیم. این فضاها به ما در کار با پایگاه داده و تبدیل داده به JSON کمک میکنند.
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Collections.Generic; // برای کار با List
using System.Web.Services; // برای [WebMethod]
سپس، باید به سرویس خود اجازه دهیم تا از طریق اسکریپتها فراخوانی شود. این کار با افزودن [System.Web.Script.Services.ScriptService] بالای نام کلاس انجام میشود.
حالا متد اصلی را برای دریافت لیست کارمندان مینویسیم. این متد به پایگاه داده متصل میشود. سپس دادهها را خوانده و آنها را به فرمت JSON سریالایز (Serialize) میکند.
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[System.Web.Script.Services.ScriptService]
public class EmployeeService : System.Web.Services.WebService
{
[WebMethod]
public void GetAllEmployees()
{
List<Employee> listEmployees = new List<Employee>();
string cs = ConfigurationManager.ConnectionStrings["Test"].ConnectionString;
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("SELECT EmpName, EmpAddress, EmpSalary FROM employees", con);
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
Employee employee = new Employee();
employee.EmpName = sdr["EmpName"].ToString();
employee.EmpAddress = sdr["EmpAddress"].ToString();
employee.EmpSalary = Convert.ToInt32(sdr["EmpSalary"]);
listEmployees.Add(employee);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(listEmployees));
}
}
// یک کلاس ساده برای نگهداری اطلاعات کارمند
public class Employee
{
public string EmpName { get; set; }
public string EmpAddress { get; set; }
public int EmpSalary { get; set; }
}
نکته مهم: فراموش نکنید که Connection String خود را با نام Test در فایل Web.config تعریف کنید.
گام دوم: ساخت فرانتاند با AngularJS
اکنون که بکاند ما آماده است، نوبت به ساخت رابط کاربری میرسد. ما از AngularJS برای نمایش دادههای دریافت شده از وب سرویس استفاده خواهیم کرد.
۱. ایجاد فایل HTML
یک فایل HTML ساده به نام display.html بسازید. در این فایل، کتابخانه AngularJS را اضافه کنید. سپس ساختار اصلی برنامه انگولار را با ng-app و ng-controller مشخص کنید.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>نمایش کارمندان با AngularJS و ASP.NET</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myController">
<h1>لیست کارمندان 👥</h1>
<table>
<thead>
<tr>
<th>نام</th>
<th>آدرس</th>
<th>حقوق</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees">
<td>{{ employee.EmpName }}</td>
<td>{{ employee.EmpAddress }}</td>
<td>{{ employee.EmpSalary }}</td>
</tr>
</tbody>
</table>
</body>
</html>در کد بالا، دایرکتیو ng-repeat روی آرایه employees یک حلقه ایجاد میکند. این حلقه به ازای هر کارمند، یک سطر در جدول میسازد.
۲. ایجاد کنترلر AngularJS
یک فایل جاوااسکریپت به نام app.js بسازید. در این فایل، ماژول و کنترلر AngularJS را تعریف میکنیم. ما از سرویس $http برای ارسال درخواست به وب سرویس ASP.NET استفاده خواهیم کرد.
var app = angular.module("myApp", []);
app.controller("myController", function ($scope, $http) {
// ارسال درخواست POST به وب سرویس
$http.post('EmployeeService.asmx/GetAllEmployees')
.then(function (response) {
// در صورت موفقیت، دادهها را در متغیر employees قرار بده
$scope.employees = response.data;
}, function (error) {
// مدیریت خطا در صورت بروز مشکل
console.error('خطا در دریافت اطلاعات:', error);
});
});
نکته کلیدی: به طور پیشفرض، وب سرویسهای .asmx به درخواستهای POST پاسخ میدهند. به همین دلیل ما از $http.post استفاده کردهایم.
حل مشکل رایج: فعالسازی متد GET
اگر بخواهید از متد GET استفاده کنید، ممکن است با خطای 500 (Internal Server Error) مواجه شوید. برای حل این مشکل، باید پروتکل HttpGet را در فایل Web.config فعال کنید. قطعه کد زیر را درون تگ <system.web> قرار دهید.
<webServices>
<protocols>
<add name="HttpGet"/>
</protocols>
</webServices>
پس از این تغییر، میتوانید کد جاوااسکریپت خود را به $http.get تغییر دهید.
مزیتهای استفاده از وب سرویس ASP.NET در AngularJS
این معماری در زمان خود مزایای قابل توجهی داشت. درک این مزایا به ما کمک میکند تا دلایل استفاده از آن در پروژههای قدیمی را بهتر بفهمیم.
- ✅ یکپارچگی با اکوسیستم دات نت: برای توسعهدهندگانی که با C# و Visual Studio کار میکردند، ساخت وب سرویس بسیار ساده بود.
- ⚙️ سادگی در پیادهسازی: برای عملیات ساده CRUD (ساخت, خواندن, بهروزرسانی, حذف)، وب سرویسهای asmx راهکاری سریع و مستقیم بودند.
- 🔌 جداسازی منطق: این معماری به خوبی منطق سمت سرور را از منطق نمایش در سمت کلاینت جدا میکرد.
- 📄 پشتیبانی از SOAP و JSON: اگرچه در این مثال از JSON استفاده کردیم، این سرویسها به طور پیشفرض از پروتکل SOAP نیز پشتیبانی میکردند.
کاربردهای رایج این معماری
شما ممکن است هنوز هم با این ترکیب تکنولوژی در سیستمهای زیر روبرو شوید:
- 🏢 نرمافزارهای داخلی سازمانها: بسیاری از پنلهای ادمین و ابزارهای داخلی قدیمی بر پایه این معماری ساخته شدهاند.
- 📝 فرمهای ورود اطلاعات: وبسایتهایی با فرمهای پیچیده که نیاز به اعتبارسنجی سمت سرور داشتند.
- 📊 داشبوردهای گزارشگیری ساده: نمایش دادههای آماری از پایگاه داده به صورت نمودارها و جداول ساده.
- Legacy :systems برنامههایی که سالها پیش توسعه یافته و همچنان در حال استفاده هستند.
آینده را با APIهای مدرن بسازید
یادگیری تکنولوژیهای قدیمی ارزشمند است. اما برای پروژههای جدید، توصیه میشود از راهحلهای مدرن استفاده کنید. ASP.NET Core Web API به شما اجازه میدهد تا APIهای RESTful قدرتمند، سریع و چند-سکویی (Cross-Platform) بسازید.
اگر به دنبال مجموعهای از APIهای آماده و حرفهای برای پروژههای خود هستید، پلتفرم api.ir یک گزینه عالی است. این پلتفرم سرویسهای متنوعی را برای نیازهای مختلف ارائه میدهد.
مراحل ثبتنام در api.ir:
- به وبسایت
p.api.irمراجعه کنید. - روی دکمه ثبتنام کلیک کرده و اطلاعات خود را وارد نمایید.
- پس از تایید حساب، به پنل کاربری دسترسی خواهید داشت و میتوانید از APIهای موجود استفاده کنید.
جمعبندی نهایی
در این مقاله، ما به صورت کامل فرآیند استفاده از وب سرویس ASP.NET در AngularJS را بررسی کردیم. شما یاد گرفتید که چگونه یک وب سرویس برای خواندن داده از پایگاه داده بسازید. همچنین دیدید که چطور با استفاده از سرویس $http در AngularJS این دادهها را دریافت و در یک جدول نمایش دهید.
با اینکه این تکنولوژیها جای خود را به ابزارهای جدیدتر دادهاند، تسلط بر آنها برای نگهداری و توسعه سیستمهای موجود یک مزیت بزرگ محسوب میشود. 💡
آیا شما تجربهای در کار با AngularJS و وب سرویسهای ASP.NET دارید؟ نظرات و سوالات خود را در بخش دیدگاهها با ما به اشتراک بگذارید!