mardi 24 février 2015

integrating JQuery data table in MVC 4

I can not integrate JQuery data table in my .net MVC 4 projects and showing some issues..? Here I am attach all the code that I am used in my project.i just need to show 2 table details,and here control side a LINQ object is used to select details from 2 tables.and then this LINQ object to list and after that just passed this list object as a JSON object



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using QueryMvcAppln.Models;
namespace QueryMvcAppln.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/

public ActionResult Index()
{
// ViewBag.Message = TempData["message"];
ViewBag.message = InnerJoin();
//ViewBag.message = groupjoin();
// ViewBag.message= leftouterjoin();
return View();
}
public ActionResult ijoin()
{
ViewBag.message = InnerJoin();
return View();
}
public ActionResult gjoin()
{
ViewBag.message = groupjoin();
return View();
}
public ActionResult ljoin()
{
ViewBag.message = leftouterjoin();
return View();
}
public List<Object>InnerJoin()
{

OperationDataContext dc = new OperationDataContext();

var employees = from emps in dc.tble_Emps
join depts in dc.tble_depts on emps.deptid equals depts.id
select new
{
emps.EmpName,
emps.EmpSalary,
emps.EmpId,
depts.Dname,
};

return employees.Select(t => (object)t).ToList();

}
public List<Object> groupjoin()
{
OperationDataContext oc = new OperationDataContext();
var temp = from emps in oc.tble_Emps
join expnc in oc.tbl_expences
on emps.EmpId equals expnc.Empid into g
select new
{

emps.EmpId,
emps.EmpName,
emps.EmpSalary,
expcamt = g.Sum(x => (decimal?)x.expence)
};
return temp.Select(t => (object)t).ToList();
}
public List<object> leftouterjoin()
{
OperationDataContext oc = new OperationDataContext();
var temp = from emps in oc.tble_Emps
join de in oc.tble_depts on emps.EmpId equals de.id into dep
from depts in dep.DefaultIfEmpty()
select new
{
emps.EmpId,
emps.EmpName,
emps.EmpSalary,
depts.Dname
};
return temp.Select(t => (object)t).ToList();
}
}
}


View Side



@model MvcJqueryJtable.Models.EmpDetails
@{
Layout = null;
}

<html>
<head>
<title>jQuery DataTables/ASP.NET MVC Integration</title>
<script src="http://ift.tt/t0Y3fx"></script>
<link href="~/Content/demo_table.css" rel="stylesheet" type="text/css" />
<script src="~/Content/js/jquery-1.11.2.min.js"type="text/javascript"></script>
<script src="~/Content/js/jQuery.dataTables.min.js"type="text/javascript"></script>
<script src="~/Content/js/index.js " type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="demo">
<h2>Index</h2>




<script type="text/javascript">
$(document).ready(function () {
$('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": "Home/AjaxHandler",
"bProcessing": true,
"fnServerData": function (sSearch) {

oSettings.jqXHR = $.ajax( {
"dataType": 'json',
"type": "POST",

} );
}


});
});

</script>
<table id="myDataTable" class="display" cellpadding="0" cellspacing="0" border="0">
<thead>

<tr>
<th>ID</th>
<th>Employee Name</th>
<th>Employee Salary</th>
<th>Employee Department Name</th>
</tr>
</thead>
<tbody>
<tr>
<th>Id</th>
<th>EmpSalary</th>
<th>Employee Salary</th>
<th>Employee Department Name</th>
</tr>
</tbody>
</table>

</div>
</div>
<
</body>

</html>




Aucun commentaire:

Enregistrer un commentaire