Рубрики
Без рубрики

Создайте основные детали CRUD в ASP.NET MVC и jQuery и Bootstrap

Мастер Детали операции CRUD в ASP.NET MVC и jQuery

Автор оригинала: Mark Adesina Omoniyi.

Рано или поздно у вас будет мастер и подробности операции CRUD в ASP.NET MVC в качестве требования в одном из ваших приложений. В этой статье я собираюсь пройти вас через то, как создать полные операции CRUD в ASP.NET MVC на одной странице, используя jQuery. Эта статья предполагает, что вы уже знаете, как создать приложение MVC ASP.NET MVC, используя Visual Studio, отсюда создание решения в Visual Studio не будет покрываться. Есть много учебных пособий в Интернете, которые показывают, как создать решение в Visual Studio. Приложение заказа клиентов будет построено в этой статье. Приложение сохранит данные на две таблицы – мастер и таблицу деталей. Давайте начнем с создания необходимых таблиц:

Master-Detail-Crud-Operations-In-ASP-Net-MVC
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 Страница для загрузки