You must Sign In to post a response.
  • Category: ASP.Net MVC

    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
    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
    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
    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
    What will happen if I have ActionResult on controller while treturning JSOn like this:

    public ActionResult method()
    {

    return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

  • #769109
    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


Sign In to post your comments