通过ajax将模型和其他值传递给控制器

Question

Codes are roughly written as I cannot bring them home.

I am currently working on this application where it has a lot of processes. In this scenario, I have controller that makes calls to the server, does some processing, stores data into a model and passes it to the view.

In the view site, I hide some parts of the model so I can pass it again to the controller when needed (I don't wanna make multiple calls to the server).

Then, when a certain actions happens at the view, the hidden values are then passed to the controller via ajax.

I know how to pass integers, dates and stuff like that. The problem now is that how do I pass in the model that I got from the first controller? I really do not know what I am doing wrong. Below are my codes:

Models

public class ViewFacilitiesModel(){
    public int id {get;set;}
    public List<TimeSlotsModel> tsm {get;set;}
    public List<UsersModel> um {get;set;}
}

public class TimeSlotsModel(){
    public int id {get;set;}
    public TimeSpan openHour {get;set;}
}

public class UsersModel(){
    public int userId {get;set;}
    public string email {get;set;}
}

Controller

public virtual ActionResult ViewFacilities(){
    ViewFacilitiesModel vfm = new ViewFacilitiesModel();
    vfm.id = 1;
    vfm.tsl = someList;
    vfm.um = anotherList;

    return View(vfm);
}

public ActionResult GetTimings(DateTime testdate, ViewFacilitiesModel vfm){
    //do some other stuff here
}

ViewFacilities.cshtml

@using Project.Models

@Html.HiddenFor(m => m.tsm)
@Html.HiddenFor(m => m.um)


$.ajax({
    url: Url.Action("GetTimings", "Booking"),
    data: {
        'testdate': $("#datepicker").datepicker("getDate"),
        'vfm': JSON.stringify(@Model)
    }
});

The data 'testdate' was passed successfully. I just really do not know how to pass in the model. It comes out null every time.

Update I've tried passing in the hidden values one by one but I cannot seem to get the original data type to pass through. For example, if the hidden value has a type List , I can't seem to pass it to the controller via ajax.

Answer 1

You can't do it like you do: 'vfm': JSON.stringify(@Model) .

Easiest way that I know is to put all your model values in form and then serialize it with jQuery. like this:

@using Project.Models

<form id="my-hidden-form">
   @Html.HiddenFor(m => m.tsm)
   @Html.HiddenFor(m => m.um)
   //here your other properties
</form>

$.ajax({
    url: Url.Action("GetTimings", "Booking"),
    data: {
        'testdate': $("#datepicker").datepicker("getDate"),
        'vfm': $(#my-hidden-form).serialize() //here you serialize
    }
});

Answer 2

You need to serialize the form that contains the controls bound to your model items.

 var myData = $('#myForm').serialize();

then perform an Ajax post

  $.ajax({
        type: "POST",
        url: Url.Action("GetTimings", "Booking"),
        data: myData,
        contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
    });

this worked for me... so hope it helps or at least points you in the right direction.