Введение:
В моей предыдущей статье я объяснил Как получить и отобразить табличные данные из базы данных с помощью AngularJs в Asp.net MVC. Сегодня в этой статье я объясню, как вставлять данные в базу данных с помощью Angularjs в приложении Asp.net MVC. В этом примере я использовал Ado.Net для работы с базой данных и Angular2.
В этом примере мы вставим запись в базу данных MS SQL, используя AngularJs.
Хорошо, давайте начнем вставлять данные в базу данных, используя 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_register @Email NVARCHAR (100) , @Password NVARCHAR (MAX) , @Name VARCHAR (MAX) , @Address NVARCHAR (MAX) , @City NVARCHAR (MAX) as begin insert into tbl_registration values(@Email,@Password,@Name , @Address,@City ) 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».
Теперь мы добавим представление для действия Index, где мы будем вставлять запись в таблицу базы данных.
Шаг 5. Добавьте класс модели для таблицы
Перейдите в папку с моделью ›› Щелкните правой кнопкой мыши на модели ›› Добавить новый класс
Здесь я добавил класс «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; } }Шаг 6. Создайте уровень доступа к базе данных.
Здесь, в этом примере, я использовал Ado.net в качестве операции с базой данных, поэтому нам нужно создать класс для всех операций с базой данных. Здесь я создал класс «db.cs».
Перейдите в обозреватель решений › щелкните правой кнопкой мыши решение проекта › Добавить новую папку › Введите имя папки (здесь я переименовываю ее в «database_access_layer») › щелкните правой кнопкой мыши папку › Добавить новый класс.
Теперь добавьте следующий метод в класс доступа к базе данных, который вставляет все записи в таблицу базы данных.
public class db { SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString); public void Add_register(registration rs) { SqlCommand com = new SqlCommand("Sp_register", con); com.CommandType = CommandType.StoredProcedure; com.Parameters.AddWithValue("@Email",rs.Email); com.Parameters.AddWithValue("@Password",rs.Password); com.Parameters.AddWithValue("@Name",rs.Name); com.Parameters.AddWithValue("@Address",rs.Address); com.Parameters.AddWithValue("@City",rs.City); con.Open(); com.ExecuteNonQuery(); con.Close(); } }Весь класс db.cs будет паровым
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; using System.Configuration; using AngularInsert.Models; namespace AngularInsert.Database_Access_Layer { public class db { SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString); public void Add_register(registration rs) { SqlCommand com = new SqlCommand("Sp_register", con); com.CommandType = CommandType.StoredProcedure; com.Parameters.AddWithValue("@Email",rs.Email); com.Parameters.AddWithValue("@Password",rs.Password); com.Parameters.AddWithValue("@Name",rs.Name); com.Parameters.AddWithValue("@Address",rs.Address); com.Parameters.AddWithValue("@City",rs.City); con.Open(); com.ExecuteNonQuery(); con.Close(); } } }Шаг 7. Добавьте новый метод действия в контроллер для вставки данных в базу данных.
Здесь я создал метод действия «Регистрация» в HomeController, который выглядит следующим образом.
[HttpPost] public JsonResult Register(registration rs) { string res = string.Empty; try { dblayer.Add_register(rs); res = "Successfully Inserted...!"; } catch (Exception) { res = "Failed"; } return Json(res, JsonRequestBehavior.AllowGet); }Весь HomeController выглядит следующим образом:
using AngularInsert.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace AngularInsert.Controllers { public class HomeController : Controller { // // GET: /Home/ Database_Access_Layer.db dblayer = new Database_Access_Layer.db(); public ActionResult Index() { return View(); } [HttpPost] public JsonResult Register(registration rs) { string res = string.Empty; try { dblayer.Add_register(rs); res = "Successfully Inserted...!"; } catch (Exception) { res = "Failed"; } return Json(res, JsonRequestBehavior.AllowGet); } } }Шаг 8. Добавьте новый файл JS для контроллера AngularJS и файл библиотеки AngularJS
Перейдите в обозреватель решений › Щелкните правой кнопкой мыши папку (где вы хотите сохранить файлы JS контроллера AngularJS, здесь я создал папку с именем «AngularController» в папке сценариев) › Добавить › Выберите файл Javascript › Введите имя › Добавить.
Мы пишем следующий код в этот файл
var app = angular.module('homeapp', []); app.controller('HomeController', function ($scope, $http) { $scope.btntext = "Save"; $scope.savedata = function () { $scope.btntext = "Please wait...!"; $http({ method: 'POST', url: '/Home/Register', data: $scope.registration }).success(function () { $scope.btntext = "Save"; $scope.registration = null; alert('Data Submitted...!'); }).error(function () { 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> <link href="~/css/bootstrap.min.css" rel="stylesheet" /> </head> <body ng-app="homeapp"> <div ng-controller="HomeController"> <form> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right">Email</label> <div class="col-sm-9"> <input type="text" name="title" ng-model="registration.Email" placeholder="Eg. Email" class="col-xs-10 col-sm-8" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right">Passowrd</label> <div class="col-sm-9"> <input type="password" name="title" ng-model="registration.Password" placeholder="Eg. Company Secretary" class="col-xs-10 col-sm-8" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right">Name</label> <div class="col-sm-9"> <input type="text" name="title" ng-model="registration.Name" placeholder="Eg. Company Secretary" class="col-xs-10 col-sm-8" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right">Address</label> <div class="col-sm-9"> <input type="text" name="title" ng-model="registration.Address" placeholder="Eg. Company Secretary" class="col-xs-10 col-sm-8" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right">City</label> <div class="col-sm-9"> <select class="col-xs-10 col-sm-8" ng-model="registration.City"> <option value="New Delhi">New Delhi</option> <option value="Noida">Noida</option> <option value="Ghaziabad">Ghaziabad</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-9"> <input type="button" value="{{btntext}}" ng-click="savedata()" class="btn btn-primary" /> </div> </div> </form> </div> <script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/AngularController/HomeAngular.js"></script> </body> </html>Шаг 11. Запустите приложение.
Мы сделали все шаги, теперь пришло время запустить приложение
Первоначально опубликовано на tutorialslink.com.
