I am new to angularJS even this client side coding.Started for interest and exploring it happily.
I just tried to follow an example # Navigational Menu
Have tied to do it from binding the data from server side.its not working. need help ..
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Data;
namespace AngularJS
{
public partial class AngularJSTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static DataTable A()
{
DataTable table = new DataTable();
table.Columns.Add("date", typeof(string));
table.Columns.Add("text", typeof(string));
table.Rows.Add("20/05/2012", "A");
table.Rows.Add("20/05/2012", "B");
table.Rows.Add("20/05/2012", "C");
return table;
}
[WebMethod]
public static DataTable B()
{
DataTable table = new DataTable();
table.Columns.Add("date", typeof(string));
table.Columns.Add("text", typeof(string));
table.Rows.Add("20/05/2012", "P");
table.Rows.Add("20/05/2012", "Q");
table.Rows.Add("20/05/2012", "R");
return table;
}
[WebMethod]
public static DataTable C()
{
DataTable table = new DataTable();
table.Columns.Add("date", typeof(string));
table.Columns.Add("text", typeof(string));
table.Rows.Add("20/05/2012", "X");
table.Rows.Add("20/05/2012", "Y");
table.Rows.Add("20/05/2012", "Z");
return table;
}
}
}
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AngularJSTest.aspx.cs"
Inherits="AngularJS.AngularJSTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
<link href="Styles/css.css" rel="stylesheet" type="text/css" />
<script src="Scripts/angular.min.js" type="text/javascript"></script>
<script>
myApp.factory('getProductService', function ($http, $q) {
function getProduct(url) {
var deferred = $q.defer();
$http({ method: 'GET', url: url })
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
console.error('Error occurred trying to get the products: ', error);
deferred.reject(error);
});
return deferred.promise;
}
return {
purchases: function () {
var url = 'AngularJSTest.aspx/A'
return getProduct(url);
},
sale30Days: function () {
var url = 'AngularJSTest.aspx/B'
return getProduct(url);
},
saleProducts: function () {
var url = 'AngularJSTest.aspx/C'
return getProduct(url);
}
};
});
myApp.controller('ProductsController', function ($scope, getProductService) {
$scope.purchase = getProductsService.purchases();
$scope.sale30Day = getProductsService.sale30Days();
$scope.saleProduct = getProductsService.saleProducts();
});
</script>
<style>
body
{
font: 12px arial, helvetica, sans-serif;
}
h2
{
font-size: 16px;
}
table
{
margin: 20px 0;
border-collapse: collapse;
}
th, td
{
border: 1px solid #ccc;
padding: 2px;
}
a.active
{
color: red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp">
<nav class="{{active}}" ng-init="active='home'">
Purchases
Products on sale
Last 30 days sales
</nav>
<div id="tab1" class="tabContent selected" ng-controller="PurchasesCtrl" ng:show="active == 'home'">
<h2>
Purchases:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">
Date
</th>
<th>
Description
</th>
</tr>
<tr ng-repeat="purchase in purchases.data" ng-class-odd="'odd'" ng-class-even="'even'"
ng-class="{'last':$last}">
<td class="first">
{{purchase.date}}
</td>
<td>
{{purchase.text}}
</td>
</tr>
</table>
</div>
<div id="tab2" class="tabContent selected" ng-controller="SaleProductsCtrl" ng:show="active == 'projects'">
<h2>
Sale products:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">
Date
</th>
<th>
Description
</th>
</tr>
<tr ng-repeat="saleProduct in saleProducts.data" ng-class-odd="'odd'" ng-class-even="'even'"
ng-class="{'last':$last}">
<td class="first">
{{saleProduct.date}}
</td>
<td>
{{saleProduct.text}}
</td>
</tr>
</table>
</div>
<div id="tab3" class="tabContent selected" ng-controller="Sale30DaysCtrl" ng:show="active == 'services'">
<h2>
Sale 30 days:</h2>
<table cellspacing="0">
<tr class="first">
<th class="first">
Date
</th>
<th>
Description
</th>
</tr>
<tr ng-repeat="sale30Day in sale30Days.data" ng-class-odd="'odd'" ng-class-even="'even'"
ng-class="{'last':$last}">
<td class="first">
{{sale30Day.date}}
</td>
<td>
{{sale30Day.text}}
</td>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Focusing strictly on the front end I would recommend making a single service for getting Purchases, SalesProducts, Sale30Days for ex:
myApp.factory('getProductService', function ($http, $q) {
function getProduct(url) {
var deferred = $q.defer();
$http({method: 'GET', url: url})
.success(function (data) {
deferred.resolve(data);
})
.error(function (error) {
console.error('Error occurred trying to get the products: ', error);
deferred.reject(error);
});
return deferred.promise;
}
return {
purchases: function () {
var url = 'yourURLPurchases'
return getProduct(url);
},
sale30Days: function () {
var url = 'yourURLSale30Days'
return getProduct(url);
},
saleProducts: function () {
var url = 'yourURLSaleProducts'
return getProduct(url);
}
};
});
Now you can use Dependancy Injection to inject this service into whatever controller needs to get data.
For example your purchases controller:
myApp.controller('PurchasesController', function($scope, getProductService) {
$scope.purchases = getProductsService.purchases();
});
Sale30Days:
myApp.controller('Sale30Days', function($scope, getProductService) {
$scope.sale30Days = getProductsService.sale30Days();
});
However looking at an even higher level of functionality all three of these controllers are doing a similar function - serving products.
So i would recommend refactoring to an even higher level just having a single ProductsController:
myApp.controller('ProductsController', function($scope, getProductService) {
$scope.purchases = getProductsService.purchases();
$scope.sale30Days = getProductsService.sale30Days();
$scope.saleProducts = getProductsService.saleProducts();
});
In this way you can share the potential functions you will need to calculate attributes of the products - prices, tax, amounts - all within one single controller.
Now you can bind the data properly.
Related
I'm trying to retrieve whole table in mvc5 using angularJS.
Data in Json result is being displayed but not in the table as I wanted.
I'm using mvc5 and angularjs(1.x) to retrive the data from sql server
Here's the Data Access Layer code:
public List<Employee> ShowAllEmployee()
{
List<Employee> prdList = userdb.Employees.ToList();
return prdList;
}
Here's the HomeController method:
public JsonResult AllEmployee()
{
repo = new Employee_DAL.EmpRepo();
var hotList = repo.ShowAllEmployee();
List<Models.Employee> mList = new List<Models.Employee>();
foreach (var hotl in hotList)
{
Models.Employee hotLocal = new Models.Employee();
hotLocal.EmployeeId = hotl.EmployeeId;
hotLocal.FirstName = hotl.FirstName;
hotLocal.LastName = hotl.LastName;
hotLocal.Designation = hotl.Designation;
//hotLocal.Description = hotl.Description;
hotLocal.Country = hotl.Country;
hotLocal.Gender = hotl.Gender;
//hotLocal.Rating = hotl.Rating;
//hotLocal.Email = hotl.Email;
mList.Add(hotLocal);
}
return Json(mList, JsonRequestBehavior.AllowGet);
}
Here's the script ( angular) code:
var myApp = angular.module('MyModule', []);
myApp.controller('DBcontroller', function ($scope, $http) {
$http.get('/Home/AllEmployee') // added an '/' along with deleting Controller portion
.then(function (response) {
$scope.students = response.data
})
})
Here's my view(cshtml):
#{
Layout = null;
}
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Customs/angular.min.js"></script>
<script src="~/Customs/Scripts.js"></script>
<title>AllEmployee</title>
</head>
<body ng-app="myApp">
<div ng-controller="DBcontroller">
<table class="table-bordered">
<tr>
<th>Emp No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Designation</th>
<th>Country</th>
<th>Gender</th>
</tr>
<tr ng-repeat="e in students" #*ng-class-even="'even'" ng-class-odd="'odd'"*#>
<td>{{e.EmployeeId}}</td>
<td>{{e.FirstName}}</td>
<td>{{e.LastName}}</td>
<td>{{e.Designation}}</td>
<td>{{e.Country}}</td>
<td>{{e.Gender}}</td>
</tr>
</table>
</div>
</body>
</html>
I expect the jsonresult to be displayed in a table. Not directly like this in the browser.Screenshot of my current output
I am consuming Wcf Rest Service into Angular JS Application . I am trying to display single record based on account number in input filed. But when i click the submit button to display the record then i got following errors in Google Chrome Network Tap.
The server encountered an error processing the request. The exception message is 'Conversion failed when converting the nvarchar value '{Account_Number}15' to data type int.'. See server logs for more details. The exception stack trace is:
And its returns 400 Bad Request on Post Method Operation .
Here is the interface .
[OperationContract]
[WebInvoke(Method = "POST",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetAccountDetails/{Account_Number}")]
string GetAccountDetails(string Account_Number);
Here is the Implementation.
public string GetAccountDetails(string Account_Number)
{
List<object> customers = new List<object>();
string sql = "SELECT * FROM Current_Account_Holder_Details WHERE Account_Number = #Account_Number";
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Parameters.AddWithValue("#Account_Number", Account_Number);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new
{
Tittle = sdr["Tittle"],
Account_Holder_First_Name = sdr["Account_Holder_First_Name"],
Account_Holder_Last_Name = sdr["Account_Holder_Last_Name"],
Account_Holder_DOB = sdr["Account_Holder_DOB"],
Account_Holder_House_No = sdr["Account_Holder_House_No"],
Account_Holder_Street_Name = sdr["Account_Holder_Street_Name"],
Account_Holder_Post_Code = sdr["Account_Holder_Post_Code"],
Account_Holder_Occupation = sdr["Account_Holder_Occupation"],
Account_Number = sdr["Account_Number"]
});
}
}
conn.Close();
}
return (new JavaScriptSerializer().Serialize(customers));
}
}
Here is the Script code.
var app = angular.module("WebClientModule", [])
.controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {
var Account_Number = $scope.Account_Number;
$scope.search = function (Account_Number) {
var promisePostSingle = myService.postbyId(Account_Number);
promisePostSingle.then(function (pl) {
var res = pl.data;
$scope.Account_Number = res.Account_Number;
$scope.Account_Creation_Date = res.Account_Creation_Date;
$scope.Account_Type = res.Account_Type;
$scope.Branch_Sort_Code = res.Branch_Sort_Code;
$scope.Account_Fees = res.Account_Fees;
$scope.Account_Balance = res.Account_Balance;
$scope.Over_Draft_Limit = res.Over_Draft_Limit;
// $scope.IsNewRecord = 0;
},
function (errorPl) {
console.log('failure loading Employee', errorPl);
});
}
}]);
app.service("myService", function ($http) {
this.postbyId = function (Id) {
return $http.post("http://localhost:52098/HalifaxIISService.svc/GetAccountDetails/{Account_Number}" + Id);
};
})
Here is the HTML .
#{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="WebClientModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>AccountBalance</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/AccountBalance.js"></script>
</head>
<body>
<div data-ng-controller="Web_Client_Controller">
Enter Account_Number: <input type="text" ng-model="Account_Number" />
<input type="button" value="search" ng-click="search(Account_Number)" />
<table id="tblContainer">
<tr>
<td>
<table style="border: solid 2px Green; padding: 5px;">
<tr style="height: 30px; background-color: skyblue; color: maroon;">
<th></th>
<th>Account Number</th>
<th>Account Creation Date</th>
<th>Account Type</th>
<th>Branch Sort Code</th>
<th>Account Fees</th>
<th>Account Balance</th>
<th>Over Draft Limit</th>
<th></th>
<th></th>
</tr>
<tbody data-ng-repeat="user in Users">
<tr>
<td></td>
<td><span>{{user.Account_Number}}</span></td>
<td><span>{{user.Account_Creation_Date}}</span></td>
<td><span>{{user.Account_Type}}</span></td>
<td><span>{{user.Branch_Sort_Code}}</span></td>
<td><span>{{user.Account_Fees}}</span></td>
<td><span>{{user.Account_Balance}}</span></td>
<td><span>{{user.Over_Draft_Limit}}</span></td>
<td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<div style="color: red;">{{Message}}</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Here is the Screen Shot on Debugging mode on Wcf Service .
Here is the result on Google Chrome Console Windows .
You should change it;
$http.post("http://localhost:52098/HalifaxIISService.svc/GetAccountDetails/{Account_Number}" + Id);
to
$http.post("http://localhost:52098/HalifaxIISService.svc/GetAccountDetails?Account_Number=" + Id);
You are sending the parameter as {Account_Number}15. It should be 15.
I am consuming Wcf Rest Service into Angular JS Application. I am trying to retrieve a single record based on string parameter Account_Number.when user enter account number into input filed i want to display single record in angular js application but its not displaying the data.I am facing two problems.
I write the url in local host with the method name .I got the result is Method not allowed .
when i clicked the submit button to retrieve that particular account details then i got following error in google chrome .
angular.js:12701 POST http://localhost:52098/HalifaxIISService.svc/GetAccountDetails16 404 (Not Found)
AccountBalance.js:22 failure loading Employee {data: "<?xml version="1.0" encoding="utf-8"?>
when i click this link it shows error in network tab(preview) that the End point not found and the header section .
Request URL:http://localhost:52098/HalifaxIISService.svc/GetAccountDetails16
Request Method:POST
Status Code:404 Not Found
Remote Address:[::1]:52098
Referrer Policy:no-referrer-when-downgrade
Here is my method interface.
[OperationContract]
[WebInvoke(Method = "POST",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "/GetAccountDetails")]
bool GetAccountDetails(string Account_Number);
Here is the implementation .
public bool GetAccountDetails(string Account_Number)
{
List<object> customers = new List<object>();
string sql = "SELECT * FROM Current_Account_Holder_Details WHERE Account_Number = '"+ Account_Number;
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
using (SqlCommand cmd = new SqlCommand(sql))
{
cmd.Parameters.AddWithValue("#Account_Number", Account_Number);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(new
{
Tittle = sdr["Tittle"],
Account_Holder_First_Name = sdr["Account_Holder_First_Name"],
Account_Holder_Last_Name = sdr["Account_Holder_Last_Name"],
Account_Holder_DOB = sdr["Account_Holder_DOB"],
Account_Holder_House_No = sdr["Account_Holder_House_No"],
Account_Holder_Street_Name = sdr["Account_Holder_Street_Name"],
Account_Holder_Post_Code = sdr["Account_Holder_Post_Code"],
Account_Holder_Occupation = sdr["Account_Holder_Occupation"],
Account_Number = sdr["Account_Number"]
});
}
}
conn.Close();
}
return true;
}
}
here is the script code .
var app = angular.module("WebClientModule", [])
.controller('Web_Client_Controller', ["$scope", 'myService', function ($scope, myService) {
var Id = $scope.Account_Number;
$scope.search = function (Id) {
var promisePostSingle = myService.postbyId(Id);
promisePostSingle.then(function (pl) {
var res = pl.data;
$scope.Account_Number = res.Account_Number;
$scope.Account_Creation_Date = res.Account_Creation_Date;
$scope.Account_Type = res.Account_Type;
$scope.Branch_Sort_Code = res.Branch_Sort_Code;
$scope.Account_Fees = res.Account_Fees;
$scope.Account_Balance = res.Account_Balance;
$scope.Over_Draft_Limit = res.Over_Draft_Limit;
// $scope.IsNewRecord = 0;
},
function (errorPl) {
console.log('failure loading Employee', errorPl);
});
}
}]);
app.service("myService", function ($http) {
this.postbyId = function (Id) {
return $http.post("http://localhost:52098/HalifaxIISService.svc/GetAccountDetails" + Id);
};
})
Here is the HTML CODE .
#{
Layout = null;
}
<!DOCTYPE html>
<html ng-app="WebClientModule">
<head>
<meta name="viewport" content="width=device-width" />
<title>AccountBalance</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/RegistrationScript/AccountBalance.js"></script>
</head>
<body>
<div data-ng-controller="Web_Client_Controller">
Enter Account_Number: <input type="text" ng-model="Id" />
<input type="button" value="search" ng-click="search(Id)" />
<table id="tblContainer">
<tr>
<td>
<table style="border: solid 2px Green; padding: 5px;">
<tr style="height: 30px; background-color: skyblue; color: maroon;">
<th></th>
<th>Account Number</th>
<th>Account Creation Date</th>
<th>Account Type</th>
<th>Branch Sort Code</th>
<th>Account Fees</th>
<th>Account Balance</th>
<th>Over Draft Limit</th>
<th></th>
<th></th>
</tr>
<tbody data-ng-repeat="user in Users">
<tr>
<td></td>
<td><span>{{user.Account_Number}}</span></td>
<td><span>{{user.Account_Creation_Date}}</span></td>
<td><span>{{user.Account_Type}}</span></td>
<td><span>{{user.Branch_Sort_Code}}</span></td>
<td><span>{{user.Account_Fees}}</span></td>
<td><span>{{user.Account_Balance}}</span></td>
<td><span>{{user.Over_Draft_Limit}}</span></td>
<td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<div style="color: red;">{{Message}}</div>
</td>
</tr>
</table>
</div>
</body>
</html>
<script src="~/RegistrationScript/AccountBalance.js"></script>
Here is the screen shot when i run the application .
Here is the screen shot on Network Tab.
In network Tab preview section
I writing code for updating table on every 5 sec.
I have used table sorter with knocknot....
the data is been loading perfect on first iteration after that the data is append to previous data..instead of updating..
Here is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="scripts/jquery-1.7.1.min.js"></script>
<script src="scripts/knockout-3.4.0.js"></script>
<script src="scripts/knockout.mapping-latest.js"></script>
<link href="scripts/tableSorter/theme.blue.css" rel="stylesheet" />
<script src="scripts/tableSorter/jquery.tablesorter.js"></script>
<script src="https://cdn.jsdelivr.net/tablesorter/2.17.4/js/widgets/widget-scroller.js"></script>
<script src="scripts/tableSorter/jquery.tablesorter.widgets.js"></script>
<title>Dynamic Data from sqlData</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" data-bind="value: vm.AccountArray().length" />
<table border="1">
<thead>
<tr>
<th>accountNumber
</th>
<th>accountName
</th>
<th>account balance
</th>
</tr>
</thead>
<tbody data-bind="foreach: { data: AccountArray, as: 'Account' }">
<tr>
<td data-bind="text: Account.AccountNumber"></td>
<td data-bind="text: Account.AccountName"></td>
<td data-bind="text: Account.AccountBalance"></td>
</tr>
</tbody>
</table>
</div>
</form>
<script>
function Account(accountNumber, accountName, accountBalance) {
this.AccountNumber = ko.observable(accountNumber);
this.AccountName = ko.observable(accountName);
this.AccountBalance = ko.observable(accountBalance);
}
var viewModel;
var table;
var hg;
var vm = new function () {
this.amount = ko.observableArray();
this.AccountArray = ko.observableArray();
}
$(function () {
table = $("table").tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ['zebra', 'stickyHeaders', 'filter', 'scroller', 'resizable'],
widgetOptions: {
reorder_axis: 'x', // 'x' or 'xy'
reorder_delay: 100,
reorder_helperClass: 'tablesorter-reorder-helper',
reorder_helperBar: 'tablesorter-reorder-helper-bar',
reorder_noReorder: 'reorder-false',
reorder_blocked: 'reorder-block-left reorder-block-end',
reorder_complete: completed,// callback
scroller_height: 300,
scroller_barWidth: 17
}
});
$('.tablesorter-scroller-table').css({
height: '',
'max-height': '300px'
});
function completed() {
}
function AutoReload() {
$.ajax({
type: "POST",
url: "Dynamic_Data_Creation.aspx/GetDataAjax",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json",
success: function (response) {
hg = $('.tablesorter-scroller-table').prop("scrollTop");
vm.AccountArray.removeAll();
vm.AccountArray().length = 0;
vm.AccountArray.valueHasMutated();
ko.mapping.fromJSON(response.d, null, vm.AccountArray); // updata response data
$("table").trigger("update");
$('.tablesorter-scroller-table').prop("scrollTop", hg); // updating the scroll position to table
$('.tablesorter-scroller-table').css("scrollTop", $('.tablesorter-scroller-table').prop("scrollTop"));
setTimeout(function () { AutoReload(); }, 5000); //reload on every 5 seconds.
},
failure: function (response) {
alert(response.d);
}
});
}
AutoReload();
});
ko.applyBindings(vm);
</script>
</body>
</html>
I don't think you're getting any benefit from Knockout. You're having to manipulate the DOM to synchronize it with your data. That's what Knockout is supposed to do.
A relatively simple custom binding handler will take care of this for you.
ko.bindingHandlers.sortable = {
init: function(el, va) {
var arg = ko.unwrap(va());
$(el).tablesorter(arg.options);
arg.data.subscribe(function() {
$(el).trigger('update');
});
}
};
The binding looks like
<table data-bind="sortable: {data: accountArray, options: tableOptions}" border="1">
Here's a fiddle that demonstrates adding elements, clearing the array, and setting the whole array at once.
I'm trying to use datatables and jeditable for my project to render an editable table on the screen. This is displayed in a partial view that is called by the index. However, when I try to load it, it loads shows the html of the page on the screen instead of rendering it. Can someone tell me what I'm doing wrong to fix this?
Here is my partial view:
<script type="text/javascript" src="../../Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../../Scripts/FixedColumns.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.dataTables.js"></script>
<script type ="text/javascript" src="../../Scripts/jquery.jeditable.mini.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
var oTable1 = $('#myDataTable').dataTable({
"bServerSide": true,
"sAjaxSource": '/Home/PartialView',
"fnDrawCallback": function () {
$('#myDataTable tbody td:nth-child(2)').editable('/Home/Write/', {
"callback": function (sValue, y) {
oTable1.fnDraw();
},
});
}
});
})
</script>
<table id ="myDataTable" class="display">
<thead>
<tr>
<th>Analysis ID</th>
<th>Name</th>
<th>Time</th>
<th>Sample Type</th>
<th>Grade</th>
<th>Product ID</th>
</thead>
<tbody>
</tbody>
</table>
Call to the partial view in my index:
#if(ViewBag.SearchKey != null)
{
#Html.Action("PartialAnalysis", "Home", (string)ViewBag.SearchKey)
{Html.RenderAction("PartialView", "Home", (string)ViewBag.SearchKey);}
}
My Controller:
public ActionResult PartialView(jQueryDataTableParamModel param, string Search)
{
PartialModel D = new PartialModel();
IEnumerable<PartialModel> model = D.SlagList;
D.ViewDataPull(Search);
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = D.List.Count(),
iTotalDisplayRecords = D.List.Count(),
aaData = D.List
},
JsonRequestBehavior.AllowGet);
}