Автор оригинала: Mark Adesina Omoniyi.
Рано или поздно у вас будет мастер и подробности операции CRUD в ASP.NET MVC в качестве требования в одном из ваших приложений. В этой статье я собираюсь пройти вас через то, как создать полные операции CRUD в ASP.NET MVC на одной странице, используя jQuery. Эта статья предполагает, что вы уже знаете, как создать приложение MVC ASP.NET MVC, используя Visual Studio, отсюда создание решения в Visual Studio не будет покрываться. Есть много учебных пособий в Интернете, которые показывают, как создать решение в Visual Studio. Приложение заказа клиентов будет построено в этой статье. Приложение сохранит данные на две таблицы – мастер и таблицу деталей. Давайте начнем с создания необходимых таблиц:
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[OrderMaster]( [MasterId] [uniqueidentifier] NOT NULL, [CustomerName] [nvarchar](150) NOT NULL, [Address] [nvarchar](250) NOT NULL, [OrderDate] [datetime] NOT NULL, CONSTRAINT [PK_OrderMaster] PRIMARY KEY CLUSTERED ( [MasterId] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY]
SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE TABLE [dbo].[OrderDetails]( [DetailId] [uniqueidentifier] NOT NULL, [MasterId] [uniqueidentifier] NOT NULL, [ProductName] [nvarchar](50) NOT NULL, [Quantity] [int] NOT NULL, [Amount] [decimal](18, 0) NOT NULL, CONSTRAINT [PK_OrderDetails] PRIMARY KEY CLUSTERED ( [DetailId] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY] ) ON [PRIMARY] GO ALTER TABLE [dbo].[OrderDetails] WITH CHECK ADD CONSTRAINT [FK_OrderDetails_OrderMaster] FOREIGN KEY([MasterId]) REFERENCES [dbo].[OrderMaster] ([MasterId]) GO ALTER TABLE [dbo].[OrderDetails] CHECK CONSTRAINT [FK_OrderDetails_OrderMaster] GO
Следующим шагом является добавление наших столов на нашу модель. Наша модель должна выглядеть как изображение ниже:
Мы будем писать весь наш код в нашем HomeController, поэтому давайте напишите код, который перечисляет все заказы на таблице нашего заказа:
private ordersEntities db = new ordersEntities(); public ActionResult getOrders() { var draw = Request.Form.GetValues("draw").FirstOrDefault(); var model = (db.OrderMasters.ToList() .Select(x => new { masterId = x.MasterId, customerName = x.CustomerName, address = x.Address, orderDate = x.OrderDate.ToString("D") })).ToList(); return Json(new { draw = draw, recordsFiltered = model.Count, recordsTotal = model.Count, data = model }, JsonRequestBehavior.AllowGet); }
Нет ничего особенного по поводу вышеуказанного кода, так как вы видите, мы будем использовать DataTable jQuery, чтобы отобразить заказы, поэтому мы включили некоторые параметры в нашем результате JSON. Теперь давайте изменим наш файл index.cshtml для перечисления всех наших заказов из таблицы ordermaster.
| Customer Name | Address | Date | | | --- | --- | --- | --- |
Поскольку мы будем использовать DataTable jQuery, мы должны включать ссылку в нашем файле _layout.cshtml.
//CSS //Script
Для заполнения нашего DataTable нам нужно написать какой-нибудь код jQuery:
$(function () { var orderUrl = '@Url.Action("getOrders", "Home")'; var table = $("#ordersTable").DataTable({ "processing": true, "serverSide": true, "filter": false, "orderMulti": false, "ajax": { "url": orderUrl, "type": "POST", "datatype": "json" }, "columns": [{ "data": "customerName", "name": "customerName", "autoWidth": true }, { "data": "address", "name": "address", "autoWidth": true }, { "data": "orderDate", "name": "orderDate", "autoWidth": true }, { "data": null, "name": "Action", "defaultContent": '[Edit Order](https://www.blogger.com/blogger.g?blogID=5042006714878717715#)', "autoWidth": true } ] }); };
В приведенном выше коде мы сделали запрос на почту AJAX к нашему методу Getorders для заполнения нашей DataTable DataTable. Если мы запустим наше приложение до сих пор мы (если вы заполните таблицу вашего заказа с примерными данными) должны иметь что-то подобное:
Следующая вещь, которую мы собираемся сделать, это создать форму, которая будет обрабатывать новое создание заказа с помощью модального модального мода, поскольку наше приложение будет приложением на одном странице.
Вышеуказанное выше форму информации о заказе выглядит: для добавления деталей заказа нам нужно создать другую модальную форму, которую мы будем использовать для сбора деталей заказа:
Из-за длины этого поста я нажал исходный код в моем Github Страница для загрузки