ASP.NET MVC de Formulaires Dynamiques

Si vous avez besoin d'avoir une certaine dynamique des champs de votre formulaire, pour vous le meilleur moyen serait d'utiliser des frameworks javascript comme Angulaire, Épine dorsale, Knock-out etc.

Si vous avez besoin de quelque chose de plus ou moins simple, il vous suffit d'utiliser les Huitièmes de finale. Pour des configurations plus avancées, je recommanderais Angulaire, mais c'est ma préférence personnelle.

Ici est une simple mise en œuvre d'un formulaire dynamique avec knock-out:

JS:

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

ko.applyBindings(model);

HTML:

<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 ASP.NET MVC?

C'est plus délicat. Peut-être le meilleur et le plus simple serait d'utiliser Ajax et post JSON à ASP.NET MVC Action. Tout d'abord, vous aurez besoin pour obtenir un objet JSON de votre formulaire. Avec knock-out, c'est très simple:

var json = ko.toJSON(model);

Maintenant, quand nous savons comment obtenir JSON de forme, la prochaine étape est d'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 avons essentiellement d'envoyer un tableau de chaînes de caractères, donc ASP.NET MVC action doit ressembler à cela:

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

Ce n'est certainement pas la seule option de la façon de mettre en œuvre des formes dynamiques, mais je pense que c'est assez efficace. Espérons que cela aide.

Je voudrais créer des vues partielles pour chaque option de la liste déroulante et d'autres champs.
Que contrôleur, qui sera de retour de telles parties de html selon déroulante valeur:

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

Puis il suffit de l'appeler avec jquery Ajax et ajouter votre forme actuelle avec le résultat de l'action, lorsque la valeur de la liste déroulante les changements.

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