Skip to main content

Showing List of database Using Jquery, Ajax and Datatable

In this article of ASP.NET MVC we will learn about Showing List of database Using Jquery, Ajax and Datatable so let's start:


Firstly create a model class which you want to show a list of datatable.In my case i create a model class namely called GEN_TaskMaster:

 public class GEN_TaskMaster
    {
        public long sysTaskID { get; set; }
        public long sysUserID { get; set; }

        

        public DateTime Task_Date { get; set; }
        public string Task_Assign_To { get; set; }
        public string Task_Assign_From { get; set; }
        public string Task_Description { get; set; }

      
    

    }

Then go to your controller and paste a code below:

public ActionResult ListAll()
        {
            var list = db.Database.SqlQuery<GEN_TaskMaster>("select * from GEN_TaskMaster ").ToList();
            return Json(list, JsonRequestBehavior.AllowGet);
        }


Now go to your view and paste a code below:



<table id="tblEmployee" class="table table-bordered table-condensed table-responsive table-hover tblEmployee">
            <thead></thead>
            <tbody></tbody>

        </table>





 $.ajax({
            type: 'POST',
            url: '/Home/ListAll',
            dataType: 'JSON',
            data: {},
            success: function (data) {

                console.log(JSON.stringify(data));
                var item = '';
                var rows = "<tr class='table-background-color-changer  text-color-changer'>" +
                    "<th>Checkbox</th> <th class='text-center'>Task Id</th> <th class='text-center'>User Name</th> <th class='text-center '>Task Date</th> <th class='text-center '>Task Assign To</th>  <th class='text-center'>Task Assign From</th>  <th class='text-center'>Action</th> " +
                    "</tr>";


                $("#tblEmployee thead").append(rows);
                $.each(data, function (i, item) {
                    var test = item.sysTaskID;
                    var date = new Date(parseInt((item.Task_Date).match(/\d+/)[0]));
                    var datess = date.getDate();
                    var d = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
                    var monthss = d[date.getMonth()];
                    var yearss = date.getFullYear();
                    var fulldates = datess + "-" + monthss + "-" + yearss;
                    var bodyRow = "<tr class='text-center tablerow'>" +
                        "<td><input type='checkbox' id='checkboxCheck' name='checkboxCheck' value='" + item.sysTaskID + "'/></td>" +
                        "<input type='hidden' id='sysTaskID' name='hiddenSysTaskID' value='" + item.sysTaskID + "'/>" +
                        "<td id='sysTaskID'>" + item.sysTaskID + "</td>" +
                        "<td id='sysUserID'>" + item.Username + "</td>" +
                        "<td id='Task_Date'>" + fulldates + "</td>" +
                        "<td id='Task_Assign_To'>" + item.Task_Assign_To + "</td>" +
                        "<td id='Task_Assign_From'>" + item.Task_Assign_From + "</td>" +
                        "<td class='allBtn'>" +
                        /*"<input type='button' id='editrecords'  value='Edit'  class='btn btn-default editrecords '>" */
                        //"<a class='btn btn-default' href=/Home/EditPage/" + item.sysTaskID + " >Edit</a>" +
                        "<input type='button' value='Detail' id=''  data-toggle='modal' data-target='#myModal' onclick='detailRecord()' class='btn btn-default'>" +
                        "</td>" +
                        "</tr>";
                    $("#tblEmployee tbody").append(bodyRow);
                });
                $('#tblEmployee').dataTable();
                

            },
            error: function (ex) {
                alert("error");
            }
        });


Thank you for reading if you have any query then leave a message.

Comments

Post a Comment

Popular posts from this blog

CRUD Operation in ASP.NET MVC Using ADO.NET Jquery Ajax

In this article of ASP.NET MVC we will learn about CRUD operation using jquery ajax so let's start. Firstly open visual studio: Go to File => New and Select Project,when you select project then New Project Dialogbox will appear. Select ASP.NET Web Application (.NET Framework) and give a name to your project , as we are building CRUD Operation so our project's name could be CRUD_OPEATION and then select OK. Now you will see a new dialogbox, select Empty Template and MVC folder. After create project you will see a like screen like this: Now go to Models folder and add ADO.NET Entity Data Model and give any name like in my case i give dbEntities and selec OK: After that you will see a dilogbox called Entity Data Model Wizard, select EF Designer from database and select Next: After that a new dilogbox will appear and it will ask a new connection to your sql server, then select New Connection and give server name ( if you want to see your server name then open sql server,it will ...
Post a Comment
Read more

SignIn_SignUp in Asp.net Mvc

Models: SignUp Class: using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; using System.Linq; using System.Web; namespace Signin_Signup.Models {     [Table("tbl_account")]     public class SignUp     {         public int id { get; set; }         public string name { get; set; }         public string email { get; set; }         public string password { get; set; }     } } DB Class: using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Web; namespace Signin_Signup.Models {     public class db:DbContext     {         public DbSet<SignUp> signups { get; set; }     } } User Controller: using Signin_Signup.Models; using System; using System.Collections.Generic; using System.L...
Post a Comment
Read more

ASP.NET MVC Folder and File Structure

When we create an ASP.NET MVC 5 application, the Visual Studio by default creates the following folders and files for our application. App_Data App_Data folder can contain application data files like LocalDB, .mdf files, xml files and other data related files. App_Start: The App_Start folder of an MVC application is used to contain the class files which are needed to be executed at the time of application starts. The classes like BundleConfig, FilterConfig, RouteConfig, IdentityConfig, etc are stored within this folder. So in the simple word we can say that configuration related class files are stored here.  We will discuss the use of each of these class files in detail in our upcoming articles. Content Content folder contain static files like css, images and icons and MVC 5 application includes bootstrap.min.css, bootstrap.css and site.css by default. Controller Controller folder contain class file. It handles user request and response....
Post a Comment
Read more