How to pass a object from ajax to the server in MVC?

Question

I've got two models, there are.

public class CreateAssignmentViewModel {
    ...
    public List<CreateAssignmentSelectedItem> SelectedItems { get; set; }
}

public class CreateAssignmentSelectedItem {
    ...
}

Now I've got a view where contains CreateAssignmentViewModel, as you can see above this class contains a property where is a List<CreateAssignmentSelectedItem>

@model Contoso.MvcApplication.Models.Assignment.CreateAssignmentViewModel
@{
    ViewBag.Title = "Create Assignment";
    ...
}

@using (Html.BeginForm()) {
    ...
}

Inside of the Html.BeginForm, I've got a partial view. And in it I've got a button using ajax where updates the partial view.

Look the following events. Where says data: I do not know what to enter to access only the property SelectedItems

var addQuestionToAssignmentContent = function (questionId)
{
    $.ajax({
        url: "/Assignment/AddItemToAssignmentContent",
        type: "post",
        data: { model: $(this).serialize() /* HERE I DON'T KNOW TO ACCESS THE */, itemId: questionId },
        success: function (response) {
            var $target = $("#assignmentContent");
            var $newHtml = response;
            $target.replaceWith($newHtml);
        }
    });
};

    public ActionResult AddItemToAssignmentContent(List<CreateAssignmentSelectedItem> model, string itemId)
    {
        ...
        PartialView(..);
    }

How can I do to pass only the object in the method?

Matt · Accepted Answer · 2013-03-13 00:36:26Z

3

First, give your form an ID:

@using (Html.BeginForm("actionName", "controllerName", FormMethod.Post, new{id = "frmUpdate"})) {

Second, change your code to be like this:

var f = $("#frmUpdate");
    $.ajax({
        url: f.attr('action'),
        type: f.attr('method'),
        data: f.serialize(),
        //etc..

I use this in most cases and it works just nice. The data should automatically be bound to the model you have in your update action. So, for example... if you have a @model of type MyModel then in the update action it should look something like this:

[HttpPost]
public ActionResult Update(MyModel updatedModel)

answered Mar 13, 2013 at 0:36

Matt

7,01512 gold badges70 silver badges117 bronze badges

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

2 Comments

Darf Zon Over a year ago

So when I do a post, always should be te same model like in the razor view?

Matt Over a year ago

I haven't tried it, but I don't see why you couldn't use a different model. You would just need to make sure your serialized data matches whatever the Update action is expecting. However, why would you pass a different model? Usually one would create a model for editing and then send that same model to the Update action.

Vasile Laur · Accepted Answer · 2013-03-13 05:25:38Z

Sometimes I work with a front end guy and he might not adhere to pass in the correct model, he might change the form fields or whatever. In this case I just let him serialize the form and pass it to the action an any way he wants.

I then use the FormCollection object to get the data I need.

Your json call

var addQuestionToAssignmentContent = function (questionId)
{
    $.ajax({
        url: "/Assignment/AddItemToAssignmentContent",
        type: "post",
        data: { model: $(this).serialize() /* HERE I DON'T KNOW TO ACCESS THE */, itemId: questionId },
        success: function (response) {
            var $target = $("#assignmentContent");
            var $newHtml = response;
            $target.replaceWith($newHtml);
        }
    });
};
Get a form collection object

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult AddItemToAssignmentContent(FormCollection collection)
{
       vars someValue = collection.GetValue("somefield").AttemptedValue;
}

But if I would have control of front-end as you do then as Matt suggested you should use an pass a model;

Collectives™ on Stack Overflow

How to pass a object from ajax to the server in MVC?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related