جستجوی داده ها در جدول

در این مقاله با هم جستجوی داده ها در جدول با استفاده از AngularJs و ASP.Net Web API را پیاده سازی خواهیم کرد. با من همراه باشید …

امکان اتصال داده ها (Binding) با دو روش، در AngularJs اعلان آپدیت داده ها به model را زمانی که تغییری در UI اتفاق می افتد، فراهم می کند.

در این مقاله، با استفاده از $http service برای فراخوانی ASP.Net Web API یک جستجو را پیاده سازی می کنیم.

جستجوی داده ها در جدول

گام ۱: ویژوال استودیو را باز کرده و یک MVC empty application به نام “NG_MVC_Filtering” ایجاد می کنیم.

در فولدر App_Data یک SQL Server database با نام ApplicationDB.mdf ایجاد می کنیم.

در این دیتابیس، جدول جدیدی با عنوان EmployeeInfo به صورت زیر می سازیم:

جستجوی داده ها در جدول

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

برای وارد کردن داده از دستور SQL زیر استفاده نمایید.

INSERTINTO[dbo].[OrderManager] ([OrderId], [CustomerName], 
[CustomerMobileNo], [OrderedItem], [OrderedQuantity], [SalesAgentName]) 
VALUES(1, N'SRS Medicles', N'1122334455', N'Crocin', 1000, N'MS')
 
INSERTINTO[dbo].[OrderManager] ([OrderId], [CustomerName], 
[CustomerMobileNo], [OrderedItem], [OrderedQuantity], [SalesAgentName])
VALUES(2, N'SPR Medico', N'1223344556', N'Rosyday', 500, N'MS')
 
INSERTINTO[dbo].[OrderManager] ([OrderId], [CustomerName], 
[CustomerMobileNo], [OrderedItem], [OrderedQuantity], [SalesAgentName])
VALUES(3, N'MRT Healthcare', N'2121212112', N'Telma-AM', 784, N'LS')
 
INSERTINTO[dbo].[OrderManager] ([OrderId], [CustomerName], 
[CustomerMobileNo], [OrderedItem], [OrderedQuantity], [SalesAgentName])
VALUES(4, N'ABC Medi', N'1212121212', N'S-Numlo', 895, N'LS')
 
INSERTINTO[dbo].[OrderManager] ([OrderId], [CustomerName], 
[CustomerMobileNo], [OrderedItem], [OrderedQuantity], [SalesAgentName])
VALUES(5, N'PJ Health', N'4545454545', N'Crocin', 895, N'TS')
 
INSERTINTO[dbo].[OrderManager] ([OrderId], [CustomerName], 
[CustomerMobileNo], [OrderedItem], [OrderedQuantity], [SalesAgentName]) 
VALUES(7, N'SRS Medicles', N'1122334455', N'Rosyday', 7800, N'MS')
 
INSERTINTO[dbo].[OrderManager] ([OrderId], [CustomerName], 
[CustomerMobileNo], [OrderedItem], [OrderedQuantity], [SalesAgentName])
VALUES(10, N'MRT Healthcare', N'2121212112', N'Crocin', 950, N'MS')

در فولدر Models، یک ADO.Net Entity Data model جدیدبا نام ApplicationDBEMX.edmx اضافه می کنیم.

با انتخاب ApplicationDB.mdf و جدول EmployeeInfo پنجره Wizard را کامل می کنیم.

بعد از کامل کردن Wizard اتصال بین جدول و داده های برنامه ایجاد می شود. برنامه را Build می کنیم تا مطمئن شویم برنامه بدون خطاست.

گام ۳: در فولدر Controllers، یک empty ASP.Net Web API controller جدید با نام OrderManagerAPIController ایجاد می کنیم. کد زیر را در آن می نویسیم:

usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web.Http;
 
usingNG_MVC_FIltering.Models;
 
namespaceNG_MVC_FIltering.Controllers
{
    publicclassOrderManagerAPIController : ApiController
    {
 
        ApplicationDBEntitiesctx;
        publicOrderManagerAPIController()
        {
            ctx = newApplicationDBEntities(); 
        }
 
        // Get all orders
        [Route("Orders")]
        publicList<OrderManager>GetOrders()
        {
            returnctx.OrderManagers.ToList();
        }
 
        // Get Orders based on Criteria
        [Route("Orders/{filter}/{value}")]
        publicList<OrderManager>GetOrdersByCustName(stringfilter,stringvalue)
        {
            List<OrderManager> Res = newList<OrderManager>(); 
            switch(filter)
            {
                case"CustomerName":
                    Res = (from c inctx.OrderManagers
                           wherec.CustomerName.StartsWith(value)
                              select c).ToList();
                    break;
                case"MobileNo":
                    Res = (from c inctx.OrderManagers
                           wherec.CustomerMobileNo.StartsWith(value)
                          select c).ToList();
                    break;
                case"SalesAgentName":
                    Res = (from c inctx.OrderManagers
                           wherec.SalesAgentName.StartsWith(value)
                          select c).ToList();
                    break;
            }
            returnRes;
        }
    }
}

در کد بالا، متد GetOrders() تمامی سفارشات را برمی گرداند و متد GetOrderByName() پارامترهایی می گیرد که معیار و مقدار فیلتر را مشخص می کند.

براساس نام و مقدار فیلتر، کوئری موردنظر اجرا شده و سفارشات برگردانده می شوند.

گام ۴: برای پیاده سازی سمت کلاینت، باید کتابخانه های Angular.js، jQuery.js و Bootstrap.js را اضافه کنیم.

کتابخانه Bootstrap فقط برای استایل دهی به جدول موردنیاز است.

از آنجا که Bootstrap نیاز به jQuery دارد، بنابراین نیاز داریم که کتابخانه آن را نیز اضافه کنیم.

دستورات زیر از Package Manager Console را برای نصب NuGet Packages استفاده می کنیم.

  • Install-Package angularjs
  • Install-Package jQuery
  • Install-Package bootstrap

گام ۵: در فولدر Controllers، یک Empty MVC controller جدید با نام OrdersController اضافه می کنیم.

View مربوط به این کنترلر را ایجاد می کنیم. روی متد Index راست کلیک کرده و گزینه Add View را انتخاب می کنیم. به این ترتیب Index.cshtml اضافه می شود.

گام ۶: در فولدر Scripts، یک فولدر جدید به نام MyScripts اضافه می کنیم. یک فایل جاوا اسکریپت به نام Logic.js با کد زیر در این

فولدر اضافه می کنیم:

/// <reference path="../angular.intellisense.js" />
 
//The Module Declaration
varapp = angular.module('ngmodule', []);
 
//Declaring Service
app.service('ngservice', function($http) {
    //The function to read all Orders
    this.getOrders = function() {    
        varres = $http.get("/Orders");
        returnres;
    };
    //The function to read Orders based on filter and its value
    //The function reads all records if value is not entered
    //else based on the filter and its value, the Orders will be returned
    this.getfilteredData = function(filter, value) {
 varres;        
if(value.length == 0) {
            res  = $http.get("/Orders");
            returnres;
        } else{
            res = $http.get("/Orders/"+ filter + "/"+ value);
            returnres;
        }
         
    };
});
 
//Declaring the Controller
app.controller('ngcontroller', function($scope, ngservice) {
    $scope.Selectors = ["CustomerName", "SalesAgentName", "MobileNo"];
    $scope.SelectedCriteria = ""; //The Object used for selecting value from <option>
    $scope.filterValue = ""; //The object used to read value entered into textbox for filtering information from table
 
    loadOrders();
 
    //Function  to load all Orders
    functionloadOrders() {
        varpromise = ngservice.getOrders();
        promise.then(function(resp) {
            $scope.Orders = resp.data;
            $scope.Message = "Call is Completed Successfully";
        }, function(err) {
            $scope.Message = "Call Failed "+ err.status;
        });
    };
 
    //Function to load orders based on a criteria
    $scope.gerFilteredData = function() {
        varpromise = ngservice.getfilteredData($scope.SelectedCriteria, $scope.filterValue);
        promise.then(function(resp) {
            $scope.Orders = resp.data;
            $scope.Message = "Call is Completed Successfully";
        }, function(err) {
            $scope.Message = "Call Failed "+ err.status;
        });
    };
});

کد بالا کارهای زیر را انجام می دهد:

ماژول انگولاری با نام “ngmodule” تعریف می کند.

سرویس انگولاری به نام “ngservice” تعریف می کند.

این سرویس شامل توابع “getOrders()” و “getfilteredData()” می باشد.

این توابع Orders Web API را فراخوانی کرده و به ترتیب تمامی سفارشات و سفارشات براساس فیلترهای مشخص شده را دریافت می کنند.

کنترلر انگولار با نام “ngcontroller” را تعریف می کند. این کنترلر شامل آرایه ای از Selector می باشد که با مقادیر فیلتر ها مانند:CustomerName، SalesAgentName و… مقداردهی شده است.

تابع loadOrders()، تابع getOrders() را از سرویس فراخوانی کرده و تمامی سفارشات را دریافت می کند و آن ها را در حوزه شی Orders ذخیره می کند.

تابع getfilteredData() تابع getfilteredData() را از سرویس فراخوانی کرده و نام و مقدار فیلتری که از UI دریافت کرده ارسال می نماید.

گام ۷: در فایل Index.cshtml، کد زیر، رفرنس اسکریپت و دستورات اتصال model را اضافه می کنیم:

<linkhref="~/Content/bootstrap.min.css"rel="stylesheet"/>
<linkhref="~/Content/bootstrap-theme.min.css"rel="stylesheet"/>
<scriptsrc="~/Scripts/jquery-2.1.4.min.js"></script>
<scriptsrc="~/Scripts/bootstrap.min.js"></script>
<scriptsrc="~/Scripts/angular.min.js"></script>
<scriptsrc="~/Scripts/MyScripts/Logic.js"></script>
 
<h1>Orders View</h1>
<divng-app="ngmodule">
    <divng-controller="ngcontroller">
        <tableclass="table table-bordered table-condensed">
            <tr>
                <td>Search By:</td>
                <td>
<selectng-model="SelectedCriteria"ng-options="S for S in Selectors">
                    </select>                </td>
                <td>Enter Search Value:</td>
                <td>
                    <inputtype="text"ng-model="filterValue"class="form-control"ng-change="getFilteredData()"/>
                </td>
            </tr>
        </table>
        <tableclass="table table-bordered table-condensed table-striped">
            <thead>
                <tr>
                    <th>OrderId</th>
                    <th>Customer Name</th>
                    <th>Contact No</th>
                    <th>Ordered Item</th>
                    <th>Quantity</th>
                    <th>Sales Agent Name</th>
                </tr>
            </thead>
            <tbody>
                <trng-repeat="order in Orders">
                    <td>{{order.OrderId}}</td>
                    <td>{{order.CustomerName}}</td>
                    <td>{{order.CustomerMobileNo}}</td>
                    <td>{{order.OrderedItem}}</td>
                    <td>{{order.OrderedQuantity}}</td>
                    <td>{{order.SalesAgentName}}</td>
                </tr>
            </tbody>
        </table>
        <span>{{Message}}</span>
    </div>
     
</div>

در Markup بالا، نکات زیر را داریم:

ماژول ngmadule از کنترلر ngcontroller که در Logic.js تعریف شده استفاده می کند.

<table> با استفاده از استایل هایی که در Bootstrap تعریف شده، ظاهر می شود.

المنت <select> تگ <option> را با استفاده از آرایه جاوا اسکریپت Selectors که در کنترلر انگولار تعریف شده، تولید می کند.

المنت متنی <input> به filterValue متصل می شود که در کنترلر تعریف شده است. این المنت <input> با استفاده از تابع getfilteredData() که در کنترلر تعریف شده بود، متصل می شود.

<table> تگ های <tr> را براساس Orders که در کنترلر تعریف شده، تولید می کند.

گام ۸: برای اجرای Index.cshtml برای کنترلر OrderInfo، فایل RouteConfig.cs در فولدر App_Start را باز کرده و تغییرات زیر را اعمال می کنیم: (قسمت رنگی شده)

publicclassRouteConfig
{
    publicstaticvoidRegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
 
        routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new{ controller = "OrdersInfo", action = "Index", id = UrlParameter.Optional }
        );
    }
}

برنامه را اجرا کنید، خروجی زیر را مشاهده خواهید کرد:

چگونه با AngularJs جستجو کنیم

معیار فیلتر را از <select> انتخاب کرده و براساس آن مقدار جستجو را در textbox وارد نمایید.

برای مثال، “CustomerName” را انتخاب کرده و SRS را در textbox وارد می کنیم، رکوردهای زیر نمایش داده خواهد شد:

 جستجو توسط AngularJs

می توان براساس ستون های دیگر نیز جستجو کرد.

موفق باشید !

داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.