在c＃asp.net ajax POST请求中读取请求有效负载

Question

I am sending a POST ajax request to Home controller in asp.net mvc project. Here is sample javascript. ( the convertUtcToLocal is basically a function that will return the time to local date ).

var data = [{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""},
{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""},    
{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""},    
{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""},    
{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""},    
{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""},    
{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""},    
{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""},    
{"Time":convertUtcToLocal(1377003600000),"OldValue":35.2,"NewValue":""}];

$.ajax({url : 'http://localhost:64387/Home/TableEdit', 
        type : 'POST', 
        contentType:'application/json',
        dataType :'json', 
        data : JSON.stringify(data)});

In Home controller I get ,

[HttpPost]
        public object TableEdit(object data)
        {
            // object is shown in the Watch as object

        }

In Google Chrome, I can see request payload

How do I access the data in my Home controller action ?

Answer 1

How do I access the data in my Home controller action ?

By writing a view model of course:

public class MyViewModel
{
    public DateTime Time { get; set; }
    public decimal OldValue { get; set; }
    public decimal? NewValue { get; set; }
    public string Action { get; set; }
}

and then having your controller action take a collection of this view model as a parameter:

[HttpPost]
public ActionResult TableEdit(IList<MyViewModel> data)
{
    ... do something with the view model here
}

By the way, beware of the format of DateTime fields. Make sure that your application's current culture settings format matches the one in your JSON. You also might need to adjust the data types used in your view model depending on your specific requirements.

Answer 2

Basically, you're are passing a JSON string, so the action method in the controller will accept a string and you can use Newtonsoft.Json to convert it into a model .

Pass JSON data:

$.ajax({
                url: '/Home/TableEdit',
                type: 'POST',
                data: { "modelData": result }
            });

and controller action method as

   [HttpPost]
    public ActionResult TableEdit(string modelData)
    {
        List<ViewModel> listOfModel = Newtonsoft.Json.JsonConvert.DeserializeObject<List<Model>>(modelData);
        return View();
    }

Answer 3

So this is how I solved my problem. Using Newtonsoft.Json.Linq

Here is the custom model binder and the controller.

   public class TableEditCustomBinder : IModelBinder
        {
            public object BindModel(ControllerContext controllerContext,
                            ModelBindingContext bindingContext)
            {
                var incomingData = bindingContext.ValueProvider.GetValue("data").AttemptedValue;
                JObject root = JObject.Parse("{\"root\": " + incomingData + "}");
                JArray items = (JArray)root["root"];
                JObject item;
                JToken jtoken;
                List<TableData> data = new List<TableData>();
                string action="" , newValue="", oldValue="", dataType;
                double time=0;
                for (int i = 0; i < items.Count; i++)
                {
                    item = (JObject)items[i];
                    jtoken = item.First;
                    while (jtoken != null)//loop through columns
                    {
                        dataType = ((JProperty)jtoken).Name.ToString().ToLower();

                        switch (dataType)
                        {
                            case "time":
                                time = Convert.ToDouble(((JProperty)jtoken).Value);
                                break;
                            case "newvalue":
                                newValue = ((JProperty)jtoken).Value.ToString();
                                break;
                            case "oldvalue":
                                oldValue = ((JProperty)jtoken).Value.ToString();
                                break;
                            case "action":
                                action = ((JProperty)jtoken).Value.ToString();
                                break;
                            default:
                                break;
                        }
                         jtoken = jtoken.Next;
                    }
                    if (time != 0) {
                        data.Add(new TableData(time, oldValue));
                        data[data.Count-1].NewValue = newValue;
                        data[data.Count-1].Action = action;
                    }

                }

                return data;

            }
        }
        [HttpPost]
        public object TableEdit(string server, string tag, [ModelBinder(typeof(TableEditCustomBinder))] List<TableData> data)      
        {         
            //Use data the way you want
        }

The ajax request. I am passing time as UTC string. But can be handled in the code otherwise.

$.ajax({url: 'http://localhost:64387/Home/TableEdit', type : 'POST', 
        contentType:"application/x-www-form-urlencoded",
        dataType :'json', 
        data : { server: "server", tag : "xyz", data : JSON.stringify(data)}});

Also don't forget to put this in Application_Start()' method in Global.asax.cs'

ModelBinders.Binders.Add(typeof(List<TableData>), new HomeController.TableEditCustomBinder()); I hope it helps others.