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

Question

我有一个控制器，它获取一个模型作为参数，但该模型有另一个模型的集合。其他参数可以简单地使用表单发送，但模型的输入字段是动态的，因此您可以使用 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

其他参数可以简单地使用表单发送，但模型的输入字段是动态的，因此您可以使用 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" /> ... ');

一个警告：数字中不能有任何差距 - 因此，如果您还动态删除任何控件，那么您将不得不更改所有名称以重新索引它们（这不是很好）。

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

或者，只需使用 jquery！