TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
C# Corner
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
JQuery GridView using ASP.NET MVC
Vishal Dusane
Nov 24
2015
Code
1.2
k
0
0
facebook
twitter
linkedIn
Reddit
WhatsApp
Email
Bookmark
expand
Column Name Data Type Max Length
CustID
int
NULL
CompName nvarchar 50
ContactName nvarchar 50
Address nvarchar 50
City nvarchar 50
PostalCode nvarchar 50
Country nvarchar 50
Phone nvarchar 50
Home Controller
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.Mvc;
using
MVCDATATABLE.Controllers;
namespace
MVCDATATABLE.Controllers
{
public
class
HomeController: Controller
{
public
ActionResult Index()
{
return
View();
}
public
ActionResult LoadData()
{
using
(CustomerDBContext dc =
new
CustomerDBContext())
{
var data = dc.Tbl_Customer.OrderBy(a => a.ContactName)
.ToList();
return
Json(
new
{
data = data
}, JsonRequestBehavior.AllowGet);
}
}
}
}
\\ Jquery Gridview code
for
index.cshtml
@
{
ViewBag.Title =
"Index"
;
} < h2 > < marquee behavior =
"scroll"
direction =
"left"
> < b > Customer Record < /b></marquee > < /h2> < div style =
"width: 92%; margin: 0 auto;"
> < table id =
"myTable"
> < thead > < tr > < th > Company name < /th> < th > Customer name < /th> < th > Address < /th> < th > City < /th> < th > Postal Code < /th> < th > Country < /th> < th > Contact No. < /th> < /tr> < /thead> < /table> < /div> < style > tr.even
{
background - color: #88cc00 !important;
}
</style>
<link href=
"//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"
rel =
"stylesheet"
/ > @section Scripts
{ < script src =
"//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"
> < /script> < script > $(document)
.ready(function ()
{
$(
'#myTable'
)
.DataTable(
{
"ajax"
:
{
"url"
:
"/Home/LoadData"
,
"type"
:
"Get"
,
"datatype"
:
"json"
},
"columns"
: [
{
"data"
:
"CompName"
,
"autowidth"
:
true
},
{
"data"
:
"ContactName"
,
"autowidth"
:
true
},
{
"data"
:
"Address"
,
"autowidth"
:
true
},
{
"data"
:
"City"
,
"autowidth"
:
true
},
{
"data"
:
"PostalCode"
,
"autowidth"
:
true
},
{
"data"
:
"Country"
,
"autowidth"
:
true
},
{
"data"
:
"Phone"
,
"autowidth"
:
true
}]
});
}); < /script>
}
Gridview
C#
ASP.NET