CODEWITHSUNDEEP
c#jquery.netasp.net-mvcasp.net-mvc-4
thiru
thiru

Reputation: 173

Display json data as table in view of MVC

i am working in MVC 4 application. i am trying to bind the json data to table in view that reflects as a table view in the View Page.

here is my controller code....

if (reportType == "Report")
{
    result = client.GetApiRequest("api/TurnoverReport/get?packageID=" + Convert.ToInt32(packageID)).Result;
}

here in result is a datatable that holds the output data as a datatable. this is the table in result

to pass the table to View i am serializing the table as :

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
            List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
            Dictionary<string, object> row = new Dictionary<string, object>();
            row.Add("text", result);
            rows.Add(row);

var test = JsonConvert.SerializeObject(rows, Formatting.Indented,
                        new JsonSerializerSettings
                        {
                            ReferenceLoopHandling = ReferenceLoopHandling.Ignore
                        });

return Json(serializer.Serialize(test), JsonRequestBehavior.AllowGet);

here I'm using the jsonconvert because of i am having this error message like

A circular reference was detected while serializing an object of type 'System.Globalization.CultureInfo'.

so, this json return the data as : the data that is returning the json to View

i have tried like to display in View but i couldn't get the expected result.. here is the View code that;

 function GenerateReport(packageID) {
    var repType = '@ViewBag.ReportType';
    $.ajax({
        url: '/turnover/GetTurnover' + repType,//?packageID=' + packageID,
        data: { "packageID": packageID },
        cache: false,
        type: 'POST',
        datatype: 'JSON',
        success: function (response) {
            debugger;

Upvotes: 1

Views: 3551

Answers (1)

Jeric Cruz
Jeric Cruz

Reputation: 1909

you can try this one in your javascript method

function GenerateReport(packageID) {
    var repType = '@ViewBag.ReportType';
    $.ajax({
        method: "POST",
        url: '/turnover/GetTurnover' + repType,//?packageID=' + packageID,
        data: '{"packageID":' + packageID + '}',
        contentType: "application/json; charset=utf-8",
        success: function (data) {
            //loop to data.text
            $.each(data.text, function( index, row ) {
               console.log(row);
            });
        }

Upvotes: 1

Related Questions