Структурирование сложных веб-форм в ASP.NET MVC

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

Мой фон находится в Webforms. Меня часто просят создать формы, в которых пользователь выбирает параметр из выпадающего списка, вызывая появление нескольких новых полей. Другой выбор может привести к появлению другого набора полей.

В прошлом я использовал бы этот сценарий через UpdatePanel и обертку Panel вокруг полей, которые я хочу показать или скрыть. Валидация автоматически отключается, когда поля скрыты.

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

Также, как я могу обрабатывать переключение блоков полей формы? Я знаю, как это сделать вручную в jQuery, но я надеюсь, что существует подход, который связывается с валидацией и серверным кодом.

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

ОТВЕТЫ

Ответ 1

Джош

Первое, что я предлагаю, - убедиться, что вы используете ViewModels для страниц, которые являются сложными в режиме. ViewModel - это в основном модель, которую вы создаете для определенного вида; например, ViewModel может быть композицией других классов.

Что касается динамического изменения полей в вашем представлении, лучший способ - использовать jQuery (или любую другую библиотеку javascript) для этого.

Я также перешел из среды веб-формы, и я знаю, что с самого начала сложно переключать передачи, но поверьте мне, что простой обработчик jQuery гораздо проще, чем создать панель управления, а затем обработчики событий.

Не говоря уже о том, что это намного эффективнее; панели обновления в конце концов делают частичные сообщения на странице, иногда с помощью jQuery вам даже не нужно это делать.

После нескольких проектов с MVC, я на самом деле теперь нахожу, что это занимает много времени, и вы делаете панели обновления на веб-формах;)

Надеюсь, это поможет, -Covo

Ответ 2

Я знаю, что это может быть не тот ответ, который вы ищете, но я лично не считаю, что сложные формы очень удобны для пользователя в первую очередь, и я всегда стараюсь разделить их на более простые формы, где это возможно, или на упростить форму. Я встречал множество форм на веб-сайтах, где есть множество "полей", где на самом деле должно быть несколько вопросов для ответа пользователя. Простые вещи, которые доходят до того, чего они хотят достичь, а не значений полей, а также множество знаний, специфичных для приложения, необходимых для правильного значения этих полей.

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

Ответ 3

Традиционные веб-формы asp.net сделали для вас "волшебство", тогда как вы должны знать о работе, которая заключается в создании "магии" в asp.net MVC. Преимущество в том, что с MVC у вас больше контроля над тем, что происходит, что также может повысить производительность.

В asp.net webforms для аякс-вызовов используется UpdatePanel. Если вам нужно получить доступ к серверу асинхронно (без полной записи), используйте ajax через JQuery. См. Ниже, например:

            $.ajax({
                    type: "get",
                    url: "/YourController/YourAction",
                    success: function (obj) {
                       //any logic you want to do upon success
                    }
                });

В приведенном выше примере будет выполняться вызов ajax HTTP GET в /YourController/YourAction.

Чтобы обрабатывать "переключение блоков", если вам не нужно идти на сервер для данных, и вы просто хотите сделать это на клиенте, а затем используйте простой jquery. JQuery имеет функцию для переключения элементов. http://api.jquery.com/toggle-event/

Ответ 4

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

Однако существует понятие, когда вы используете встроенные библиотеки AJAX при визуализации формы, в которой вы можете автоматически обновлять ее после ее публикации. В некотором смысле, он сохраняет вас JavaScript/JQuery, потому что он "автоматически прокладывает" его аналогично-ish для панели. Таким образом, вы можете потенциально смотреть на постепенное рендеринг ваших сложных форм с сервера при редактировании каждого раздела и т.д.

См. MSDN: http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.updatetargetid.aspx

Соответствующий пример кода, чтобы дать вам идею (к сожалению, это не в более читаемом синтаксисе Razor):

Соответствующая строка - это Ajax.BeginForm, где отображается тег формы. После публикации формы библиотека MS AJAX автоматически обновит элемент, указанный в "UpdateTargetId", указанный в форме AjaxOptions. В этом случае ответ будет помещен в элемент SPAN "textEntered" после ответа с сервера. Здесь вы можете постепенно добавлять больше контента пользователю для заполнения, возможно, другой формы и т.д.

<h2><%= Html.Encode(ViewData["Message"]) %></h2>
<p>
    Page Rendered: <%= DateTime.Now.ToLongTimeString() %>
</p>
<span id="status">No Status</span>
<br />   
<%= Ajax.ActionLink("Update Status", "GetStatus", new AjaxOptions{UpdateTargetId="status" }) %>
<br /><br />
<% using(Ajax.BeginForm("UpdateForm", new AjaxOptions{UpdateTargetId="textEntered"})) { %>
  <%= Html.TextBox("textBox1","Enter text")%>  
  <input type="submit" value="Submit"/><br />
  <span id="textEntered">Nothing Entered</span>
<% } %>