ASP.NET MVC Динамические формы

Кто-нибудь может предложить хороший способ разработки динамических форм с ASP.NET MVC?

У меня есть каскадные выпадающие списки на странице (параметры в раскрывающемся списке зависят от значения, выбранного в предыдущем раскрывающемся списке).

Все значения поступают из базы данных.

Как я могу реализовать такое поведение с помощью ASP.NET MVC?

Конечно, я хотел бы получить все значения в контроллере при отправке формы.

Источник

6 ответов

Решение

Если вам нужно иметь некоторые динамические поля в вашей форме, лучшим способом для вас будет использование некоторых продвинутых структур JavaScript, таких как Angular, Backbone, Knockout и т. Д.

Если вам нужно что-то более или менее простое, вам достаточно использовать Knockout. Для более сложных сценариев я бы порекомендовал Angular, но это мое личное предпочтение.

Вот простая реализация динамической формы с Knockout:

var model = {
    users: ko.observableArray(),
    addUser: function() {
        this.users.push({ name: ko.observable() });
    }
};

ko.applyBindings(model);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div data-bind="foreach: users">
    <input type="text" data-bind="value: name" /><br />
</div>
<button data-bind="click: addUser">Add user</button>

<ul data-bind="foreach: users">
    <li data-bind="text: name"></li>
</ul>

А как насчет ASP.NET MVC?

Это более сложно. Пожалуй, самый лучший и простой способ - использовать Ajax и публиковать JSON в ASP.NET MVC Action. Прежде всего, вам нужно получить объект JSON из вашей формы. С нокаутом все очень просто:

var json = ko.toJSON(model);

Теперь, когда мы знаем, как получить JSON из формы, следующим шагом будет отправка ваших данных в действие. JQuery идеально подходит для этого:

$.ajax({
    type: "POST", 
    url: "@Url.Action("AddUser")",
    data: ko.toJSON(model).users, // Serialize to JSON and take users array
    accept: 'application/json',
    success: function (data) { alert("Done!"); } // Your success callback
});

В нашем случае мы в основном отправляем массив строк, поэтому действие ASP.NET MVC должно выглядеть так:

[HttpPost]
public JsonResult AddUser(List<string> users)
{
    return Json(data); // return something
}

Это определенно не единственный вариант реализации динамических форм, но я думаю, что это довольно эффективно. Надеюсь, поможет.

Источник

Вы можете использовать FormCollection в качестве параметра для получения всех данных, которые поступают из формы:

[HttpPost]
public ActionResult ActionName(FormCollection collection)
{
    //collection["inputName"];
}
Источник

Вы можете сделать это очень легко, используя мою библиотеку FormFactory.

По умолчанию он отражает модель представления для создания PropertyVm[] массив:

`` `

var vm = new MyFormViewModel
{
    OperatingSystem = "IOS",
    OperatingSystem_choices = new[]{"IOS", "Android",};
};
Html.PropertiesFor(vm).Render(Html);

`` `

но вы также можете создавать свойства программно, чтобы вы могли загрузить настройки из базы данных, а затем создать PropertyVm,

Это фрагмент из скрипта Linqpad.

`` `

//import-package FormFactory
//import-package FormFactory.RazorGenerator


void Main()
{
    var properties = new[]{
        new PropertyVm(typeof(string), "username"){
            DisplayName = "Username",
            NotOptional = true,
        },
        new PropertyVm(typeof(string), "password"){
            DisplayName = "Password",
            NotOptional = true,
            GetCustomAttributes = () => new object[]{ new DataTypeAttribute(DataType.Password) }
        }
    };
    var html = FormFactory.RazorEngine.PropertyRenderExtension.Render(properties, new FormFactory.RazorEngine.RazorTemplateHtmlHelper());   

    Util.RawHtml(html.ToEncodedString()).Dump(); //Renders html for a username and password field.
}

`` `

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

Источник

Я бы создал частичные представления для каждого варианта раскрывающегося списка и дополнительных полей. Чем контроллер, который будет возвращать такие части html согласно выпадающему значению:

public class FormFieldsController : Controller
{
    public ActionResult Index(string dropDownOption)
    {
        if(dropDownOption == "Option1")
           return PartialView("PartialForOption1");
       etc.//
    }
}

Затем просто вызовите его с помощью jquery Ajax и добавьте текущую форму с результатом действия, когда значение выпадающего меню изменится.

$.ajax("/FormFields/Index",
    {
        async: false,
        data: { dropDownOption: $('#dropDownId').value()},
        success: function(data) {
            if (callback == null) {
                $("#form").append(data);
            } else {
                callback(data);
            }
        },
        error: function() {
            alert('Error');
        },
        type: 'GET',
        timeout: 10000
    }
);
Источник

Попробуйте это http://mvcdynamicforms.codeplex.com/releases/view/43320 это должно быть полезно

Источник

Взгляните на эту библиотеку:

.NET CRUD с поддержкой Bootstrap для создания форм во время выполнения из словаря данных. Работает на .net 7 или fmk 4.8.

https://github.com/JJConsulting/JJMasterData

Источник
Другие вопросы по тегам