ASP.NET MVC Основная форма ввода

Я пытаюсь реализовать форму ввода заказа с помощью ASP.NET MVC, но сталкиваюсь с множеством трудностей. Все образцы, которые я нашел, связаны с просмотром форм основных деталей, и ни один из них для добавления или редактирования.

Предположим, у меня есть две таблицы: Order and OrderLines, которые связаны друг с другом с отношением "один ко многим". В главном представлении у меня была кнопка "Создать" при щелчке, она должна отображать новое представление заказа, состоящее из полей порядка, сетки, которая показывает строки порядка, и кнопки "Сохранить", которая при нажатии будет сохраняться весь порядок вместе с его строки в базу данных. Сетка должна иметь три кнопки: "Добавить линию", "Изменить линию" и "Удалить линию". При щелчке по "Add Line" необходимо отобразить новое представление, которое позволяет пользователю добавить строку в строки сетки вида заказа - на этом этапе база данных не будет затронута. Когда пользователь нажимает "Редактировать линию", будет показано представление, которое позволяет пользователю отредактировать выбранную строку и, когда это будет сделано, обновить строки сетки заказа.

Наиболее трудные проблемы:

Как передать порядок и его коллекцию линий между видом заказа и представлениями строки заказа?

Как обновить представление заказа на основе изменений в виде строки заказа?

И как сохранить изменения между представлениями без участия базы данных?

Есть ли конкретный пример, показывающий, как реализовать это с помощью MVC?

Ваша помощь и отзывы приветствуются.

Ответ 1

Просьба взглянуть на мой пост в блоге о создании формы основной детали в asp.net mvc. он также содержит демонстрационный проект, который вы можете скачать

Ответ 2

В отличие от WebForms, ASP.NET MVC не пытается скрыть характер отсутствия состояния HTTP. Для работы со сложным объектом через несколько форм у вас есть несколько вариантов:

Сохраните объект на сервере с каждым изменением, чтобы обновленный объект был доступен с использованием только id
Используйте jquery для заполнения формы строки заказа и сохранения сведений в основной форме.

Обычно я обычно использую вариант клиентской стороны, причем основная форма имеет скрытые поля для данных, которые будут редактироваться в подчиненной форме. Вы можете найти вариант на стороне сервера, но если вы действительно не хотите включать базу данных, вы можете сохранить частично обновленный объект в сеансе.

Ответ 3

Шаг 1. Создание модели представления

public class OrderVM
{
    public string OrderNo { get; set; }
    public DateTime OrderDate { get; set; }
    public string Description { get; set; }
    public List<OrderDetail> OrderDetails {get;set;}
}

Шаг 2: добавьте javascript для добавления строк заказа

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    $(function () {
        $('#orderDate').datepicker({
            dateFormat : 'mm-dd-yy'
        });
    });

    $(document).ready(function () {
        var orderItems = [];
        //Add button click function
        $('#add').click(function () {
            //Check validation of order item
            var isValidItem = true;
            if ($('#itemName').val().trim() == '') {
                isValidItem = false;
                $('#itemName').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#itemName').siblings('span.error').css('visibility', 'hidden');
            }

            if (!($('#quantity').val().trim() != '' &amp;&amp; !isNaN($('#quantity').val().trim()))) {
                isValidItem = false;
                $('#quantity').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#quantity').siblings('span.error').css('visibility', 'hidden');
            }

            if (!($('#rate').val().trim() != '' &amp;&amp; !isNaN($('#rate').val().trim()))) {
                isValidItem = false;
                $('#rate').siblings('span.error').css('visibility', 'visible');
            }
            else {
                $('#rate').siblings('span.error').css('visibility', 'hidden');
            }

            //Add item to list if valid
            if (isValidItem) {
                orderItems.push({
                    ItemName: $('#itemName').val().trim(),
                    Quantity: parseInt($('#quantity').val().trim()),
                    Rate: parseFloat($('#rate').val().trim()),
                    TotalAmount: parseInt($('#quantity').val().trim()) * parseFloat($('#rate').val().trim())
                });

                //Clear fields
                $('#itemName').val('').focus();
                $('#quantity,#rate').val('');

            }
            //populate order items
            GeneratedItemsTable();

        });
        //Save button click function
        $('#submit').click(function () {
            //validation of order
            var isAllValid = true;
            if (orderItems.length == 0) {
                $('#orderItems').html('&lt;span style="color:red;"&gt;Please add order items&lt;/span&gt;');
                isAllValid = false;
            }

            if ($('#orderNo').val().trim() == '') {
                $('#orderNo').siblings('span.error').css('visibility', 'visible');
                isAllValid = false;
            }
            else {
                $('#orderNo').siblings('span.error').css('visibility', 'hidden');
            }

            if ($('#orderDate').val().trim() == '') {
                $('#orderDate').siblings('span.error').css('visibility', 'visible');
                isAllValid = false;
            }
            else {
                $('#orderDate').siblings('span.error').css('visibility', 'hidden');
            }

            //Save if valid
            if (isAllValid) {
                var data = {
                    OrderNo: $('#orderNo').val().trim(),
                    OrderDate: $('#orderDate').val().trim(),
                    //Sorry forgot to add Description Field
                    Description : $('#description').val().trim(),
                    OrderDetails : orderItems
                }

                $(this).val('Please wait...');

                $.ajax({
                    url: '/Home/SaveOrder',
                    type: "POST",
                    data: JSON.stringify(data),
                    dataType: "JSON",
                    contentType: "application/json",
                    success: function (d) {
                        //check is successfully save to database 
                        if (d.status == true) {
                            //will send status from server side
                            alert('Successfully done.');
                            //clear form
                            orderItems = [];
                            $('#orderNo').val('');
                            $('#orderDate').val('');
                            $('#orderItems').empty();
                        }
                        else {
                            alert('Failed');
                        }
                        $('#submit').val('Save');
                    },
                    error: function () {
                        alert('Error. Please try again.');
                        $('#submit').val('Save');
                    }
                });
            }

        });
        //function for show added items in table
        function GeneratedItemsTable() {
            if (orderItems.length &gt; 0) {
                var $table = $('&lt;table/&gt;');
                $table.append('&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Item&lt;/th&gt;&lt;th&gt;Quantity&lt;/th&gt;&lt;th&gt;Rate&lt;/th&gt;&lt;th&gt;Total&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;');
                var $tbody = $('&lt;tbody/&gt;');
                $.each(orderItems, function (i, val) {
                    var $row = $('&lt;tr/&gt;');
                    $row.append($('&lt;td/&gt;').html(val.ItemName));
                    $row.append($('&lt;td/&gt;').html(val.Quantity));
                    $row.append($('&lt;td/&gt;').html(val.Rate));
                    $row.append($('&lt;td/&gt;').html(val.TotalAmount));
                    $tbody.append($row);
                });
                $table.append($tbody);
                $('#orderItems').html($table);
            }
        }
    });

</script>

Шаг 3. Создание действия для сохранения данных

[HttpPost]
    public JsonResult SaveOrder(OrderVM O)
    {
        bool status = false;
        if (ModelState.IsValid)
        {
            using (MyDatabaseEntities dc = new MyDatabaseEntities())
            {
                Order order = new Order { OrderNo = O.OrderNo, OrderDate = O.OrderDate, Description = O.Description };
                foreach (var i in O.OrderDetails)
                {
                    //
                   // i.TotalAmount = 
                    order.OrderDetails.Add(i);
                }
                dc.Orders.Add(order);
                dc.SaveChanges();
                status = true;
            }
        }
        else
        {
            status = false;
        }
        return new JsonResult { Data = new { status = status} };
    }

вы можете загрузить исходный код и видеоурок

Ответ 4

Вы можете попробовать Telericks бесплатно управлять сеткой MVC...

http://demos.telerik.com/aspnet-mvc/grid/hierarchyserverside

Ответ 5

Сверху моей головы (своего рода свалка мозга)...

У вас может быть основная часть сетки формы. Это будет полный просмотр, загруженный из действия (либо с порядковым номером, либо не в зависимости от загрузки существующего или нет).
При нажатии события (новое или редактирование) это может открыть частичный вид в стиле "лайтбокс". Затем это возвращает объект json обратно в основную форму.
Затем переданный объект json будет отображаться с использованием шаблонов в нижней части таблицы (для новой) или для обновления существующей записи. Это также может быть сохранено на сервере в том же вызове ajax. Или просто обновите клиентскую сторону и нужно, чтобы пользователь нажал кнопку сохранения.
Требуется флаг isDirty, поэтому любые изменения устанавливают его значение true и когда браузер пытается уйти или закрыть и т.д., тогда вы можете предложить пользователю сохранить или нет.

Надеюсь, что это поможет.

изменить

Не пробовал это, но мог быть интересен нигде db-аспект вашего вопроса click

Ответ 6

Шаг 3: Создайте действие для сохранения данных [HttpPost] public JsonResult SaveOrder (OrderVM O) {bool status = false; if (ModelState.IsValid) { using (ManageMobileStoreWebContext dc = new ManageMobileStoreWebContext()) {//Random rnd = new Random(); if (ModelState.IsValid) {using (ManageMobileStoreWebContext dc = new ManageMobileStoreWebContext()) {//Random rnd = new Random(); //OrderID = rnd.Next(), Order order = new Order { OrderNo = O.OrderNo, OrderDate = O.OrderDate, Description = O.Description };//OrderID = rnd.Next(), Order order = new Order {OrderNo = O.OrderNo, OrderDate = O.OrderDate, Описание = O.Description}; foreach (var я в O.OrderDetails) {if (order.OrderDetails == null) {order.OrderDetails = new List(); }//i.TotalAmount = order.OrderDetails.Add(i); }//i.TotalAmount = order.OrderDetails.Add(i); //dc.OrderDetails.Add(i); } dc.Orders.Add (заказ); dc.SaveChanges(); status = true; }} else {status = false; } return new JsonResult { Data = new { status = status } }; } return new JsonResult {Data = new {status = status}}; }