POST model plus additional array to ASP.NET MVC controller

Question

I'm struggling with creating the proper AJAX request to post my form data plus an additional array to an MVC controller.

[HttpPost, AjaxOnly]
public ActionResult GetAttributeViews(AddComponentsDialogModel model, List<int> attributeIDs)

Here's the method signature I'm trying to hit.

//  Post the model to GetAttributeViews:
$.ajax({
    type: 'POST',
    url: '../Component/GetAttributeViews',
    data: $('form').serialize()
});

//  Post the integer array to GetAttributeViews:
$.ajax({
    type: 'POST',
    url: '../Component/GetAttributeViews',
    data: {
        attributeIDs: [1, 2, 3]
    },
    traditional: true
});

However, every attempt I've made to post both properties results in the model being null. I've tried JSON.stringify, $.param({}, true) as well as setting the dataType and contentType options of the AJAX request. None of this seems to help.

What's the proper way to post both of these values to my controller and have the MVC model binder translate my model?

Here's the view in question:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<CableSolve.Web.Models.Component.AddComponentsDialogModel>" %>

<% Html.BeginForm(); %>

    <div class="editableContentWrapper twoColumnLayout">
        <fieldset class="collapsible" id="<%= Model.AddComponentsLegendName.Replace(" ", "_") + "_Fieldset" %>">
            <legend>
                <%= Html.DisplayFor(model => model.AddComponentsLegendName)%>
            </legend>
            <div class="collapsibleDiv">

                <div class="detailsRow required">
                    <%= Html.LabelFor(model => model.NameStart, Model.NameStartLabel)%>
                    <%= Html.EditorFor(model => model.NameStart) %>
                </div>
                <div class="detailsRow">
                    <%= Html.LabelFor(model => model.NameEnd, Model.NameEndLabel)%>
                    <%= Html.EditorFor(model => model.NameEnd)%>
                </div>
                <div class="detailsRow required">
                    <%= Html.LabelFor(model => model.RequiredSpaceLookup, Model.RequiredSpaceLookupLabel)%>
                    <%= Html.EditorFor(model => model.RequiredSpaceLookup)%>
                </div>
                <div class="detailsRow required">
                    <%= Html.LabelFor(model => model.RequiredTemplateLookup, Model.RequiredTemplateLookupLabel)%>
                    <%= Html.EditorFor(model => model.RequiredTemplateLookup)%>
                </div>
                <div class="detailsRow">
                    <%= Html.LabelFor(model => model.BarcodeStart, Model.BarcodeStartLabel)%>
                    <%= Html.EditorFor(model => model.BarcodeStart)%>
                </div>
                <div class="detailsRow">
                    <%= Html.LabelFor(model => model.BarcodeEnd, Model.BarcodeEndLabel)%>
                    <%= Html.EditorFor(model => model.BarcodeEnd)%>
                </div>

            </div>
        </fieldset>
    </div>

    <div class="editableContentWrapper twoColumnLayout">
        <fieldset class="collapsible" id="<%= Model.AttributesLegendName.Replace(" ", "_") + "_Fieldset" %>">
            <legend>
                <%= Html.DisplayFor(model => model.AttributesLegendName) %>
            </legend>
            <div class="collapsibleDiv attributeControlArea">
                <%= Html.EditorFor(model => model.Attributes) %>
            </div>
        </fieldset>
    </div>

<% Html.EndForm(); %>

<button type="button" class="addAttributes">Add Attributes</button>
<button type="button" class="clearAttributes">Clear Attributes</button>

<div id="AddAttributesLookup"></div>

The idea is that Attributes will be empty on initial run, but the client can select some attribute IDs which I would want to load the views for while also remembering all of the current data. So, I would like to pass the current state of my model along with the list of attribute IDs back to my controller such that it may create a new view which takes those IDs into account.

@AlexFilipovici Why is the View code needed? The issue described here has to do only with the HTTP POST and the Controller. — Shiva
– Shiva, Commented Nov 26, 2013 at 22:47

joelmdev · Accepted Answer · 2013-11-27 15:38:38Z

1

Create a view model that contains both your domain model and your array. You might also make your life easier by using an AJAX form instead of an Html form, that way the MVC framework will take care of the POST for you.

answered Nov 27, 2013 at 15:38

joelmdev

11.9k11 gold badges68 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dharmesh Tailor · Accepted Answer · 2013-11-27 05:37:41Z

0

Just try this. It worked for me.

var data = new Object();
    data = {
        model: { ID: "1", Name: "Test" }, // <<-- This is temporary AddComponentsDialogModel object
        attributeIDs: [1, 2, 3]
    };
    $.ajax({
        type: 'POST',
        url: '@Url.Content("~/Home/GetAttributeViews")',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(data)
    });

answered Nov 27, 2013 at 5:37

Dharmesh Tailor

3722 silver badges12 bronze badges

Collectives™ on Stack Overflow

POST model plus additional array to ASP.NET MVC controller

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related