javascript - 将数组和表单数据发送到 Controller - MVC Ajax

标签 javascript jquery ajax asp.net-mvc

我有一个 jQuery 对象数组:

function customersList() {
    this.selectedCustomers = [];
}

function customerObject(customerId, bookingId) {
    this.customerId = customerId;
    this.bookingId = bookingId;
}

我需要将其发布到我的 Controller :

[HttpPost]
public ActionResult CreateMultipleCasesFormPost(CreateMultipleCasesModel model)
{
    return PartialView("_CreateMultipleCases", model);
 }

我的 View 模型:

public class CreateMultipleCasesModel
{
    [Display(Name = "Selected Customers")]
    public List<CustomerList> Customers { get; set; }

我需要将 jQuery 中的数组和此表单中的数据传递到我的 Controller (我的 View 模型包含其他属性):

$('#createMultipleCasesForm')

这是我的 Post Form jQuery 代码:

$('#createMultipleCasesBtn').click(function () {
            var btn = $(this);
            var mUrl = btn.data('actionurl');

            var formModel = $('#createMultipleCasesForm').serializeArray();
            var customerList = customersList.selectedCustomers();

            var requestData = {
                model: formModel,
                Customers: customerList
            };

            var sData = JSON.stringify(requestData);

            $.ajax({
                url: mUrl,
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: sData,
                success: function (response) {

                    debugger;

                },
                error: function (response) {
                    $('#ErrorMessage').html('<span class="icon black cross"></span>' + response.Message);
                }
            });

        });

我的 jQuery 模型没有绑定(bind)客户对象数组或表单,我在这里做错了什么?

编辑

当我回发我的表单时会发生什么: My Customers Array in Model is NULL, all other Fields in my form are not posting back either

最佳答案

我找到了一个对我有用的解决方案:

$('#createMultipleCasesBtn').click(function () {
        var btn = $(this);
        var mUrl = btn.data('actionurl');

        var formModel = $('#createMultipleCasesForm').serializeObject();

        formModel['Customers'] = customersList.selectedCustomers;

        var sData = JSON.stringify(formModel);

        $.ajax({
            url: mUrl,
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: sData,
            success: function (response) {

            },
            error: function (response) {
                $('#ErrorMessage').html('<span class="icon black cross"></span>' + response.Message);
            }
        });

    });

下面的这个函数是从这里的答案中使用的:Convert form data to JavaScript object with jQuery

$.fn.serializeObject = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

关于javascript - 将数组和表单数据发送到 Controller - MVC Ajax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27268426/

相关文章:

javascript - jquery when/then 用于递归 ajax 调用

javascript - 将每个字符替换为 span

javascript - 将 .ready 和 .resize 链接到函数中?

php - 为什么我必须在 Javascript 中转义和第二个 $ 符号?

ajax - 不推荐使用同步 XMLHttpRequest

javascript - 无法使用 XMLHttpRequest 读取大 pdf 文件

javascript - TinyMCE 4 自定义浏览器弹出窗口MVC

ajax - jquery自动完成问题

javascript - 在元素悬停时显示 div,以便 div 内的元素应该是可点击的

javascript - Ajax 请求支持 Android