Как получить и отобразить данные таблицы из базы данных с помощью AngularJs в Asp.net MVC

Здесь я объясню, как получать и отображать табличные данные из базы данных с помощью AngularJs в Asp.net MVC. В этом примере я использую AngularJs для извлечения данных из базы данных и отображения в таблице.

Введение:

Сегодня в этой статье я объясню, как получать и отображать табличные данные из базы данных с помощью AngularJs в приложении Asp.net MVC. В этом примере я использовал Ado.Net для работы с базой данных и AngularJs2.

В этом примере мы будем извлекать запись таблицы из базы данных MS SQL и отображать ее в табличной форме.

Хорошо, давайте начнем извлекать данные из базы данных, используя AngularJs в asp.net MVC.

Выполните следующие шаги, чтобы реализовать «Получить и отобразить данные из базы данных с помощью AngularJs в Asp.net MVC».

Шаг 1. Создайте новый проект.

Перейдите в меню «Файл» > «Создать» > «Проект» > «Веб» > «Веб-проект Asp.net MVC» > «Введите имя приложения» > «Выберите местоположение проекта» > нажмите кнопку «Добавить» > Появится новое диалоговое окно для выбора шаблона > здесь мы выберем пустой проект > затем нажмите взял

Шаг 2. Создайте таблицу и хранимую процедуру в базе данных.

В этом примере я использовал следующую таблицу для отображения записи в табличной форме.

CREATE TABLE [dbo].[tbl_registration] ( [Sr_no] INT IDENTITY (1, 1) NOT NULL, [Email] NVARCHAR (100) NULL, [Password] NVARCHAR (MAX) NULL, [Name] VARCHAR (MAX) NULL, [Address] NVARCHAR (MAX) NULL, [City] NVARCHAR (MAX) NULL, CONSTRAINT [PK_tbl_registration] PRIMARY KEY CLUSTERED ([Sr_no] ASC) );

Теперь создайте хранимую процедуру для извлечения всех записей из таблицы.

Create proc Sp_Get_registration as begin Select * from tbl_registration end

Запустите приведенный выше скрипт в MS SQL Server и нажмите кнопку «Выполнить».

Шаг 3. Добавьте строку подключения в файл web.config

Здесь я добавил строку подключения в файл «web.config» в разделе «Конфигурация» следующим образом.

<connectionStrings> <add name="con" connectionString="Data Source=.;Initial Catalog=test;Integrated Security=True" providerName="System.Data.SqlClient"/> </connectionStrings>

Шаг 4. Создайте контроллер.

Перейдите в обозреватель решений › щелкните правой кнопкой мыши папку контроллера › Добавить контроллер › Введите имя контроллера › Выберите шаблон «пустой контроллер MVC» › Добавить.

Здесь я создал имя контроллера как «HomeController».

Шаг 5. Создайте уровень доступа к базе данных.

Здесь, в этом примере, я использовал Ado.net в качестве операции с базой данных, поэтому нам нужно создать класс для всех операций с базой данных. Здесь я создал класс «db.cs».

Перейдите в обозреватель решений › щелкните правой кнопкой мыши решение проекта › Добавить новую папку › Введите имя папки (здесь я переименовываю его в «database_access_layer») › щелкните правой кнопкой мыши папку › Добавить новый класс.

Теперь добавьте следующий метод в класс доступа к базе данных, который обращается ко всем записям из таблицы базы данных.

public class db { SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString); public DataSet Getrecord() { SqlCommand com = new SqlCommand("Sp_Get_registration", con); com.CommandType = CommandType.StoredProcedure; SqlDataAdapter da = new SqlDataAdapter(com); DataSet ds = new DataSet(); da.Fill(ds); return ds; } }

Весь класс db.cs будет паровым

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Configuration; using System.Data.SqlClient; namespace Angulartable.database_Access_layer { public class db { SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString); public DataSet Getrecord() { SqlCommand com = new SqlCommand("Sp_Get_registration", con); com.CommandType = CommandType.StoredProcedure; SqlDataAdapter da = new SqlDataAdapter(com); DataSet ds = new DataSet(); da.Fill(ds); return ds; } } }

Шаг 6. Добавьте новый метод действия в контроллер для извлечения данных из базы данных и возврата записи в виде результата JSON.

Здесь я создал метод действия «getrecord» в HomeController, который выглядит как пара

public JsonResult getrecord() { DataSet ds = dblayer.Getrecord(); List<registration> listreg = new List<registration>(); foreach (DataRow dr in ds.Tables[0].Rows) { listreg.Add(new registration { Sr_no=Convert.ToInt32(dr["Sr_no"]), Email=dr["Email"].ToString(), Password=dr["Password"].ToString(), Name=dr["Name"].ToString(), Address=dr["Address"].ToString(), City=dr["City"].ToString() }); } return Json(listreg, JsonRequestBehavior.AllowGet); }

Весь HomeController выглядит следующим образом:

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Angulartable.Models; using System.Data; using System.Data.SqlClient; namespace Angulartable.Controllers { public class HomeController : Controller { // // GET: /Home/ database_Access_layer.db dblayer = new database_Access_layer.db(); public JsonResult getrecord() { DataSet ds = dblayer.Getrecord(); List<registration> listreg = new List<registration>(); foreach (DataRow dr in ds.Tables[0].Rows) { listreg.Add(new registration { Sr_no=Convert.ToInt32(dr["Sr_no"]), Email=dr["Email"].ToString(), Password=dr["Password"].ToString(), Name=dr["Name"].ToString(), Address=dr["Address"].ToString(), City=dr["City"].ToString() }); } return Json(listreg, JsonRequestBehavior.AllowGet); } } }

Шаг 7. Добавьте класс модели для таблицы

Перейдите в папку с моделью ›› Щелкните правой кнопкой мыши на модели ›› Добавить новый класс

Здесь я добавил класс «registration.cs». Он содержит следующий код

public class registration { public int Sr_no { get; set; } public string Email { get; set; } public string Password { get; set; } public string Name { get; set; } public string Address { get; set; } public string City { get; set; } }

Шаг 8. Добавьте новый файл JS для контроллера AngularJS и файл библиотеки AngullarJS

Перейдите в обозреватель решений › Щелкните правой кнопкой мыши папку (где вы хотите сохранить файлы JS контроллера AngularJS, здесь я создал папку с именем «AngularController» в папке сценариев) › Добавить › Выберите файл Javascript › Введите имя › Добавить.

Мы пишем следующий код в этот файл

var app = angular.module('Homeapp', []); app.controller('HomeController', function ($scope, $http) { $http.get('/Home/getrecord').then(function (d) { $scope.regdata = d.data; }, function (error) { alert('failed'); }); });

Здесь я создал угловой контроллер с именем «HomeController» с параметрами $http и $scope.

$http:$http — это служба AngularJS для чтения данных с удаленных серверов. Он делает запрос на сервер и возвращает ответ.

$Scope:$Scope — это связующая часть между HTML (представление) и JavaScript (контроллер). Это объект с доступными свойствами и методами. $Scope доступен как для представления, так и для контроллера.

Шаг 9. Добавьте новое действие в контроллер для отображения данных из базы данных.

Здесь я добавил «Индекс» в «HomeController». Пожалуйста, напишите следующий код.

public ActionResult Index() { return View(); }

Шаг 10. Добавьте представление для действий в контроллере и дизайне.

Щелкните правой кнопкой мыши метод действия > Добавить представление > Введите имя представления > Выберите View Engine (Razor) > Добавить.

Он имеет следующий код и дизайн:

@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <style> .tableData { border-left: solid 1px #D8C3C3; border-top: solid 1px #D8C3C3; } .tableData tr { } .tableData td, .tableData th { border-right: solid 1px #D8C3C3; border-bottom: solid 1px #D8C3C3; text-align: left; padding: 5px; } .tableData td { } .tableData th { background-color: #FAFAFA; padding: 7px 5px; border-bottom-color: #9C9C9C; } .odd { background-color: #f3f3f3; } .even { background-color: #ffffff; } </style> </head> <body ng-app="Homeapp"> <div ng-controller="HomeController"> <table class="tableData"> <tr> <th>Sr no</th> <th>Email</th> <th>Password</th> <th>Name</th> <th>Address</th> <th>City</th> </tr> <tr ng-repeat="e in regdata" ng-class-even="'even'" ng-class-odd="'odd'"> <td>{{e.Sr_no}}</td> <td>{{e.Email}}</td> <td>{{e.Password}}</td> <td>{{e.Name}}</td> <td>{{e.Address}}</td> <td>{{e.City}}</td> </tr> </table> </div> <script src="~/Script/angular.min.js"></script> <script src="~/Script/AngularController/Homejs.js"></script> </body> </html>

Шаг 11. Запустите приложение.

Мы сделали все шаги, теперь пришло время запустить приложение

Первоначально опубликовано на tutorialslink.com.