Question

我有一个控制器，它获取Model作为参数，但Model有另一个Model的集合。其他参数可以使用Form简单发送，但模型的输入字段是动态的，因此您可以使用javascript或jQuery添加它们。

所以我不知道的是，如何使用javascript从输入中收集模型并将它们发送到控制器。

这就是我在视图中的内容

 <div>
    <div class="row">
        <div class="col-xs-4 col-sm-6 ">
            <div class="dropdown volledigeLengte verplicht-ruimte">
                <button class="form-control btn btn-default dropdown-toggle @dis" data-toggle="dropdown">
                    verplichte velden toevoegen<i class="glyphicon glyphicon-chevron-down"></i>
                </button>
                <ul class="dropdown-menu volledigeLengte">
                    <li><a href="#" class="text">Text <i class="glyphicon glyphicon-plus "></i></a>
                    <li><a href="#" class="foto">Foto <i class="glyphicon glyphicon-plus "></i></a>
                    <li><a href="#" class="kaart">Kaart <i class="glyphicon glyphicon-plus "></i></a>
                    <li><a href="#" class="video">Video <i class="glyphicon glyphicon-plus "></i></a>
                </ul>
            </div>
            <div class="marging-top-voor-fields extraRuimtesVerplicht">
            </div>
        </div>
        <div class="col-xs-4 col-sm-6 ">
            <div class="dropdown volledigeLengte niet-verplicht-ruimte">
                <button class="form-control btn btn-default dropdown-toggle @dis" data-toggle="dropdown">
                    Niet verplichte velden toevoegen <i class="glyphicon glyphicon-chevron-down"></i>
                </button>
                <ul class="dropdown-menu volledigeLengte">
                    <li><a href="#" class="text">Text <i class="glyphicon glyphicon-plus "></i></a>
                    <li><a href="#" class="foto">Foto <i class="glyphicon glyphicon-plus "></i></a>
                    <li><a href="#" class="kaart">Kaart <i class="glyphicon glyphicon-plus "></i></a>
                    <li><a href="#" class="video">Video <i class="glyphicon glyphicon-plus "></i></a>
                </ul>
            </div>
            <div class="extraRuimtesNietVerplicht marging-top-voor-fields">
            </div>
        </div>
    </div>
</div>

这就是我的javascript看起来像

(function ($) {
    $(function () {
        var aantalVerplicht = 0;
        var aantalNietVerplicht = 0;
        var matrix = [];
        for (var i = 0; i < 9; i++) {
            matrix[i] = [];
            for (var j = 0; j < 9; j++) {
                matrix[j] = new Array(9);
            }
        }
        var extra;
        var addRuimte = function (e, type) {
            extra = null;
            if ($(this).parents('div').hasClass("verplicht-ruimte")) {
                extra = $(".extraRuimtesVerplicht");
            }
            if ($(this).parents('div').hasClass("niet-verplicht-ruimte")) {
                extra = $(".extraRuimtesNietVerplicht");
            }
            if (extra != null) {
                $(extra).append('<div id="maring-top-voor-fields"><input class="col-sm-10 form-control" placeholder="Geef de vraag" /><span class="input-group-btn remove_ruimte"><button class ="col-sm-2 form-control btn btn-danger "><i class="glyphicon glyphicon-minus"></i></button></span></div>');
            }
        };
        var removeRuimte = function (e) {
            e.preventDefault();
            $(this).parent('div').remove();
            i--;
        };

        $(document).on('click', '.text', addRuimte("text"));
        $(document).on('click', '.foto', addRuimte("foto"));
        $(document).on('click', '.kaart', addRuimte("kaart"));
        $(document).on('click', '.video', addRuimte("video"));
        $('.extraRuimtesVerplicht').on('click', '.remove_ruimte', removeRuimte);
        $('.extraRuimtesNietVerplicht').on('click', '.remove_ruimte', removeRuimte);
    });
})(jQuery);

这就是它的样子

Answer 1

我解决了类似的问题如下。

确保所有ID都是唯一的
使用表单标签

然后，下面的JavaScript将表单内容发送到服务器（我已将其概括为包含在表单中 - 原件使用10个表单）。

function SaveAllAsIs() {
    // save section 5 summaries first
    var form_section11Data = JSON.stringify($("#form_section11").formParams());
    var form_section11Data = JSON.stringify($("#form_section12").formParams());

    $.ajax({
        type: 'POST',
        url: '/Area/DataSave/SaveAsIs',
        data: JSON.stringify({
            form_section11: form_section11Data,
            form_section12: form_section12Data
        }),
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            if (data.Success == "False") { alert("Error saving data, please try later"); }            

        }
    });
}

控制器方法如下：

public JsonResult SaveAsIs(string form_section11, string form_section12)
{
    SerializeModel(new JavaScriptSerializer().Deserialize<IDictionary<string, object>>
                (form_section11, targetModel1);

    SerializeModel(new JavaScriptSerializer().Deserialize<IDictionary<string, object>>
                (form_section12, targetModel2);
}

最后

public static void SerializePerinatalModel<T>(IDictionary<string, object> dataModel, T perinatalModel, int perinatalReportID)
    {
        Type sourceType = typeof(T);

        foreach (PropertyInfo propInfo in (sourceType.GetProperties()))
        {
            if (dataModel.ContainsKey(propInfo.Name))

我只显示了一个部分功能，但基本上每个类型都会被检查以查看它是否为列表，然后转换列表。

Answer 2

其他参数可以使用Form简单发送，但模型的输入字段是动态的，因此您可以使用javascript或jQuery添加它们。

Scott Hanselman提供了有关将数组传递给MVC控件绑定的一些细节：http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx

本质上是：确保您的控件具有正确的名称：使用列表索引

虽然这并不直接解决动态字段，但它显示了如何完成它。

取代：

 $(extra).append('<div id="maring-top-voor-fields"><input class="col-sm-10 form-control" placeholder="Geef de vraag" /><span class="input-group-btn remove_ruimte"><button class ="col-sm-2 form-control btn btn-danger "><i class="glyphicon glyphicon-minus"></i></button></span></div>');

使用：

var count = $("div#maring-top-voor-fields>input.col-sm-10.form-control").length;
$(extra).append(' ... <input name="answer["+ count + 1+"]" class="col-sm-10 form-control" placeholder="Geef de vraag" /> ... ');

有一点需要注意：数字中没有任何空白 - 所以如果您还动态删除任何控件，那么您必须更改所有名称以重新索引它们（这不是很好TBH）。

通过这种方式，您可以使用IList<whatever>使控制器保持整洁，并让框架为您绑定它们。

或者，只需使用jquery！

如何使用javascript / jQuery将模型集合发送到MVC控制器或视图

2 个答案: