CODEWITHSUNDEEP
javascriptc#asp.netajaxasp.net-mvc
user3587624
user3587624

Reputation: 1471

ajax call to Controller Action with an Object as parameter

I have an ajax call to a Controller on an ASP.NET MVC solution that looks like this:

$.ajax({
        url: "ControllerClass/ControllerMethod?date=" + date,
        type: "POST",
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        success: function (result) {
            globalVariable = result; // This is for later...
            DoSomething(result);
        },
        async: true,
        processData: false
    })

The controller once it has done all the work on the server side, it returns an Object which contains different property types (an Int, an Array of Int and a List of Objects)

The way that I return that data from the controller back to the JS file is...

return Json(new
{
   summary = objectResult
});

The point is that from the JavaScript, now I would like to call a different Controller with the information that I have stored on my globalVariable which is defined in my JavaScript like this:

var globalVariable

That var located at the top of my JS file...

Well, the way I am trying to call back my controller with that variable looks like this:

$.ajax({
                url: "ControllerClass/ControllerMethod?result=" + globalVariable,
                type: "POST",
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                success: function (result) {
                    DoSomethingNewWithThisresult(result)
                },
                async: true,
                processData: false
            })

And this is my controller in C#.

public IActionResult ControllerMethod(JsonResult result)
{
     DoSomethingHereWithTheResult(result);       
}

Why if I put a breakpoing on my last controller, the result variable is empty? I checked on Chrome that the variable contains all the data that I am looking for. Actually, if I just pass one of the properties of the object, it goes to the controller just fine but I can't pass the whole Object...

Upvotes: 0

Views: 2946

Answers (2)

esiprogrammer
esiprogrammer

Reputation: 1438

Try to create your own custom Model instead of using JsonResult as parameter in the action and use it in ajax call this way:

$.ajax({
            url: "ControllerClass/ControllerMethod",
            type: "POST",
            dataType: 'json',
            data: { Summary: globalVariable.summary},
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                DoSomethingNewWithThisresult(result)
            }
        })


public class YourClass
{
    public string Summary { get; set;}//// string type or whatever it is
}

public IActionResult ControllerMethod(YourClass result)
{
     DoSomethingHereWithTheResult(result);       
}

alternatively you can also use JSON.stringify to serialize your object this way:

   var customObject={
"Summary" : globalVariable.summary
};

  $.ajax({
            url: "ControllerClass/ControllerMethod",
            type: "POST",
            dataType: 'json',
            data: JSON.stringify(customObject),
            contentType: 'application/json; charset=utf-8',
            success: function (result) {
                DoSomethingNewWithThisresult(result)
            }
        })

Upvotes: 1

zaid safadi
zaid safadi

Reputation: 709

Assuming this is a Web API controller, there are multiple ways to read a complex type from the URL - (there are also similar options to MVC controllers)

If the parameters are passed in the UrL, and assuming they map 1:1 to your object, you can decorate your object with the [FromUri] attribute, example:

public class GeoPoint
{
    public double Latitude { get; set; } 
    public double Longitude { get; set; }
}

public ValuesController : ApiController
{
    public HttpResponseMessage Get([FromUri] GeoPoint location) { ... }
}

Another option which gives you more flexibility controlling the creation of your object and populating the parameters is by using the IModelBinder interface and [ModelBinder] attribute.

You can implement the IModelBinder interface with the only method "BindModel" to access the HTTP request just right before your Controller method is called, create your object, read the URL query params, set the values in your object then finally assign it to the Model property of the bindingContext:

A simple example would be like this:

public bool BindModel(HttpActionContext actionContext, ModelBindingContext bindingContext)
{
   if (bindingContext.ModelType == typeof(MyComplexType))
   {
      MyComplexType model ;

      //You can use the value provider or get it from the HttpRequest
      //var theValue = bindingContext.ValueProvider.GetValue ( bindingContext.ModelName);
      //var theValue = request.RequestUri.ParseQueryString ( ) ;
      if ( new MyComplexTypeConverter( ).TryParse ( actionContext.Request, out model) )
      { 
         bindingContext.Model = model;

         return true;
      }
      else
      { 
         bindingContext.ModelState.AddModelError( bindingContext.ModelName, "Cannot convert request to MyComplexType");

         return false;
      }
   }

   return false ;
}

Here is a reference documentation: http://www.asp.net/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

Upvotes: 0

Related Questions