Category: ASP.Net MVC

10 Nov 2016 08:51

Joined:	12/10/2011
Level:	Silver
Points:	101

Points:	5

How to bind json result to jquery DataTable using MVC

Dear Friends

how to bind the below json result to jquery Datatable using MVC view,

{"data":[{"COMPANY_ID":1,"COMPANY_NAME":"dsfdsfdsfd","COMPANY_ADDRESS":"dsgdfgdf afgdsa gfdsa gfdg dg","COMPANY_PHONENO":"435454654","COMPANY_URL":"c:\\users\\premkumar.a\\documents\\visual studio 2013\\Projects\\MVC_EntityFramework\\MVC_EntityFramework\\Logo1.jpg","COMPANY_LOGO":"http://stackoverflow.com/questions/7187697/how-to-accept-a-dot-within-email-address-with-regex","COMPANY_CONTACTMAIL":"sdfsdagdfgdfg@dfdsg.in","COMPANY_NEWS":"dgfdsgdf dsf dg fdg fdg dfsg dfg fd gdf gfdg fdg fdsg fdg fdsg fd","ISACTIVE":"1"}]}

Thanks in Advance ...am looking forward to hear from you guys please
thanks & Regards

#768268

10 Nov 2016 12:01

Joined:	18/12/2008
Level:	Gold
Points:	2921

Points:	4

Hi,

As you have mentioned MVC architecture. We can easily create this.

Initially you are returning the JSON type through Controller.


public JsonResult Function(string value)
{
//Coding
return Json(Newvaluestable, JsonRequestBehavior.AllowGet);

}

Now the return value will reach the Jquery or JavaScript file.
We have the return values from Json and now we can start creating the table as we like.



@using (@Html.BeginForm("FunctionName", "ControllerName"))

{

    var grid = new WebGrid(Model.ModelName,canSort:false);




    <div>

        @grid.GetHtml(columns:

                                grid.Columns

                                (

                                    grid.Column("ID", "Column 1"),

                                    grid.Column("Name", "Column 2"),

                                    grid.Column("Class", "Column 3"),

                                    grid.Column("Section", "Column 4"),

                                    grid.Column("Address", "Column 5")

                                ), mode: WebGridPagerModes.Numeric)

    </div>

}

Thanks,
Mani

#768289

14 Nov 2016 06:43

Joined:	30/04/2012
Level:	Gold
Points:	7233

Points:	4

This code snippet is the example of the controller class to send JSON array of "Company" object to the view

 using JQueryDataTableMVC.Models;  
    using System;  
    using System.Collections.Generic;  
    using System.Linq;  
    using System.Web;  
    using System.Web.Mvc;  
      
    namespace JQueryDataTableMVC.Controllers  
    {  
        public class EmployeeController : Controller  
        {  
            JQueryDataTableDBContext db = new JQueryDataTableDBContext();  
        public ActionResult Index()  
        {  
            return View();  
        }  
      
        //Employee/getCompany  
        [HttpGet]  
        public JsonResult getCompany()  
        {  
            var jsonData = new  
            {  
                data = from emp in db.Company.ToList() select emp  
            };  
            return Json(jsonData, JsonRequestBehavior.AllowGet);  
      
        }   
        }  
    }

#768290

14 Nov 2016 11:24

Joined:	13/06/2007
Level:	Gold
Points:	21327

Points:	3

follow below steps
- Create Model using Entity Framework 6
- Install Jquery.DataTables
- Add Empty Controller
- Add Code to the Controller
- Add Empty View
- Add Script References
- Add DataTable with Columns in View
- Add HTML Table in View
- Run ASP.NET MVC Application
checkout below URL for more details
http://www.techstrikers.com/Articles/jquery-datatable-bind-json-using-asp.net-mvc5.php

Thanks
Koolprasd2003
Editor, DotNetSpider MVM
Microsoft MVP 2014 [ASP.NET/IIS]

#769063

18 Mar 2017 17:18

Joined:	06/06/2011
Level:	Gold
Points:	1173

Points:	2

What will happen if I have ActionResult on controller while treturning JSOn like this:

public ActionResult method()
{

return Json(jsonData, JsonRequestBehavior.AllowGet);
}

#769109

26 Mar 2017 08:28

Joined:	30/04/2012
Level:	Gold
Points:	7233

Points:	3

This example of code snippet helps you onHow to to bind json result to jquery DataTable using MVC

 public JsonResult getEmployees()  
    {  
        var jsonData = new  
        {  
            data = from emp in db.Employees.ToList() select emp  
        };  
        return Json(jsonData, JsonRequestBehavior.AllowGet);  
  
    }   
    }  
}

Reference: http://www.techstrikers.com/Articles/jquery-datatable-bind-json-using-asp.net-mvc5.php

How to bind json result to jquery DataTable using MVC

About dotnetspider.com

Quick Links

General

Services