web-dev-qa-db-fra.com

ASP.NET MVC Dynamic Forms

Quelqu'un peut-il suggérer un bon moyen de développer des formulaires dynamiques avec ASP.NET MVC?

J'ai des listes déroulantes en cascade sur la page (les options dans la liste déroulante dépendent de la valeur, sélectionnée dans la liste déroulante précédente).

Toutes les valeurs proviennent de la base de données.

Comment puis-je implémenter un tel comportement à l'aide d'ASP.NET MVC?

Bien sûr, j'aimerais recevoir toutes les valeurs dans le contrôleur lorsque je soumets mon formulaire.

html.netasp.net-mvcrazordynamic-forms
20
Andrei

Si vous avez besoin d'avoir des champs dynamiques dans votre formulaire, la meilleure façon pour vous serait d'utiliser des frameworks javascript avancés comme Angular , Backbone , Knockout etc.

Si vous avez besoin de quelque chose de plus ou moins simple, il vous suffit d'utiliser Knockout. Pour des scénarios plus avancés, je recommanderais Angular, mais c'est ma préférence personnelle.

Voici une implémentation simple d'un formulaire dynamique avec 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>

Maintenant, qu'en est-il d'ASP.NET MVC?

C'est plus délicat. Le meilleur et le plus simple serait peut-être d'utiliser Ajax et de publier JSON sur ASP.NET MVC Action. Tout d'abord, vous devrez obtenir un objet JSON à partir de votre formulaire. Avec knockout c'est très simple:

var json = ko.toJSON(model);

Maintenant, lorsque nous savons comment obtenir JSON à partir d'un formulaire, l'étape suivante consiste à envoyer vos données à une action. jQuery est parfait pour ça:

$.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
});

Dans notre cas, nous envoyons essentiellement un tableau de chaînes, donc l'action ASP.NET MVC devrait ressembler à ceci:

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

Ce n'est certainement pas la seule option pour implémenter des formulaires dynamiques, mais je pense que c'est assez efficace. J'espère que ça aide.

11
Andrei

Vous pouvez le faire très facilement en utilisant ma bibliothèque FormFactory .

Par défaut, il se reflète sur un modèle de vue pour produire un PropertyVm[] tableau:

`` ''

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

`` ''

mais vous pouvez également créer les propriétés par programme, afin que vous puissiez charger les paramètres à partir d'une base de données puis créer PropertyVm.

Il s'agit d'un extrait d'un script 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.
}

`` ''

Il y a un site de démonstration avec des exemples des différentes fonctionnalités que vous pouvez configurer (par exemple les collections imbriquées, la saisie semi-automatique, les sélecteurs de date, etc.)

12
mcintyre321

Vous pouvez utiliser FormCollection comme paramètre pour recevoir toutes les données provenant du formulaire:

[HttpPost]
public ActionResult ActionName(FormCollection collection)
{
    //collection["inputName"];
}
7
Roman Bats

Je créerais des vues partielles pour chaque option du menu déroulant et des champs supplémentaires. Que le contrôleur, qui renverra ces parties de html selon la valeur déroulante:

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

Ensuite, appelez-le simplement avec jquery Ajax et ajoutez votre formulaire actuel avec le résultat de l'action, lorsque la valeur de la liste déroulante change .

$.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
    }
);
1
mipe34

Essayez ceci http://mvcdynamicforms.codeplex.com/releases/view/4332 cela devrait être utile

0
Soner