Как построить форму обработки заказа в ASP.NET MVC и jQuery / JavaScript

Question

Мне нужна помощь в создании страницы, где информация вводится в форму вверху страницы, а затем добавляется в сетку под формой, когда пользователь нажимает кнопку «Добавить». Форма будет иметь раскрывающиеся списки, поэтому в столбцах таблицы, представляющей выбор, должен отображаться текст раскрывающегося списка, а не индекс / идентификатор. После ввода всех данных (другими словами, нескольких строк) данные отправляются на сервер для обработки.

В идеале все редактирование и проверка данных должны выполняться на клиенте, т. Е. С помощью JavaScript / jQuery, и отправляться сразу на сервер.

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

Я использую ASP.NET MVC 1.0. и я нуб с JavaScript / JQuery. Я использовал сетку Telerik MVC в других разделах сайта, так что было бы круто, я могу придерживаться этого - но не обязательно: -)

Большое спасибо!

Answer 1

Gerhard

Это сайт, с которого вы можете начать работу с концепциями использования jquery для отправки / получения данных с использованием обратных передач.

http://encosia.com/

Answer 2

Я знаю, что этот пост уже устарел, но у меня недавно была та же проблема, о которой я писал в блоге (http://www.shawson.co.uk/codeblog/mvc-with-mvvm-using-knockout-js/). По сути, лучше всего использовать (довольно новую) библиотеку js под названием knockoutjs который использует mvvm для загрузки нагрузок клиентской модели, манипулирования и последующей отправки на сервер. На сайте есть редактируемый пример сетки, который показывает, что вы пытались сделать.

Answer 3

Для подхода Ajax вы можете использовать что-то в соответствии с этими парнями.

Использование встроенных помощников Ajax. Такие как actionlink:

<%= Ajax.ActionLink("LinkText", "ActionName", "ControllerName", 
new { id = Model.ID }, 
new AjaxOptions() { UpdateTargetId = "DIV_ID" })%>

Они вызывают метод (принимая вызовы ajax только при необходимости), который возвращает частичную страницу, содержащую, например, форму создания / редактирования. Эта страница может иметь

using( Ajax.BeginForm("ActionName", new { id = Model.ID }, new AjaxOptions() { 
UpdateTargetId = "DIVToUpdateOnYourMainPage" }) )

что-то подобное будет работать Ajax-способом, эффективно загружая новую частичную страницу в DIV на вашей главной странице каждый раз, когда вы нажимаете одну из ссылок ajax, которые генерируются в контроллере, поэтому вы можете выполнять различные действия (DB) здесь .

Просто идея.

Answer 4

Если возможно, рассмотрите возможность использования более стандартного подхода MVC в версии 1 с меньшей автоматизацией на стороне клиента. Я бы рекомендовал начать с действий контроллера ajax, которые добавляют каждую строку и обрабатывают проверку для встроенных функций MVC.

Затем пересмотрите его, используя xVal для проверки на стороне клиента.

Затем начните следить за состоянием клиента при добавлении элементов.

Затем, на заключительном этапе, начните работать над сеткой на стороне клиента, используя xVal и материал о состоянии клиента, который вы уже проработали в предыдущих версиях. Существует несколько сеток JQuery, которые вполне способны.

Постановка этого позволяет вам немного учиться по ходу дела и позволяет быстрее вырабатывать рабочее решение в случае, если у вас есть дата поставки, чтобы встретиться.

В MVC 2.0 также появятся некоторые полезности, которые могут помочь, и сторонний рынок наконец-то начинает набирать обороты с компонентами MVC ... который, вероятно, подождет, пока MVC 2.0 начнет реально работать хоть.