CODEWITHSUNDEEP
asp.net-mvcjsonjqueryknockout.js
Rayshawn
Rayshawn

Reputation: 2617

Ajax and MVC posting class object to controller

My Problem:

First, I have a search form, where the user inputs criteria and the request is sent to the proper controllers index action. The user input is passed in as model type I create just for holding the data. I return a model into the view, then right before the view is rendered I get the View Model data using jquery, and I have a knockout.js/ajax post the 'data' to a jsonresult action, where search filtering happens then I update the view using the json data and knockouts data-bindings.

My jsonresult action takes a string sortByText(works) for table sorting and a ViewModel. But when the ajax call occurs my jsonresult action does not recognize the values the data object passed.

How can I pass 'SearchFormModel' correctly into the JSONresult action?

AJAX

'self.options.formModel' holds my data sent by the Index action; while debugging I see the that it has the data but it does not get posted to the jsonresult action in the next step, only the sortByText. Can ajax 'data:' only recognize strings and int?

     $.ajax({
        type: 'POST',
        url: Url,
        data: { sortByText: selectedText, formModel: self.options.formModel },
        dataType: "json"
      })....etc

Controller

    [HttpGet]     
    public ActionResult Index(string sortByText, SearchFormModel formModel)
    {
        var model = new SearchViewModel();
        model.FormModel = formModel;

        return View(model);
    }

    [HttpPost]
    public JsonResult GetData(string sortByText, SearchFormModel formModel)
    {

        //return jsonData
    }

Upvotes: 2

Views: 1065

Answers (4)

Joel Cochran
Joel Cochran

Reputation: 7728

Sometimes you have to extract the data from the serialized Form object. I have a post about this available with code. The part you are looking for is about half way down entitled "The problem of POST data".

Upvotes: 1

Rayshawn
Rayshawn

Reputation: 2617

I ended up passing strings and integers instead passing the object did not work.

Upvotes: 0

Shubh
Shubh

Reputation: 6741

try Using :- 

$.ajax({
    type: 'POST',
    url: Url,
    data: ko.toJSON({ sortByText: selectedText, formModel: self.options.formModel }),
    dataType: "json"
  })

Secondly, may be it sounds out of context:-
Your SearchFormModel has 

[JsonObject(MemberSerialization.OptIn)]
public class SearchFormModel 
{

    [JsonProperty("id")]
    public string Id{ get; set; }

}

Or you may include the sortByText in your Model Class:-

[JsonObject(MemberSerialization.OptIn)]
public class SearchFormModel 
{

    [JsonProperty("id")]
    public string Id{ get; set; }
    [JsonProperty("sortByText ")]
    public string SortByText { get; set; }

}

and your AJAX will be like:-

    $.ajax({
    type: 'POST',
    url: Url,
    data: ko.toJSON(self.options.formModel),
    dataType: "json"
  })

Hope i am not in wrong direction.

Upvotes: 1

NaveenKumar1410
NaveenKumar1410

Reputation: 1613

Use ko.toJS(self.options.formModel()) to convert observableArray to json object

Upvotes: 1

Related Questions