Click here to Skip to main content
15,879,348 members
Search within:


Articles / Web Development / ASP.NET
 

AJAX based CRUD tables using ASP.NET MVC 3 and jTable jQuery plug-in

Rate me:
Please Sign up or sign in to vote.
4.95/5 (256 votes)
10 Feb 2013MIT19 min read 4.9M   55.5K   575  
Creating AJAX based CRUD tables using ASP.NET MVC 3 and the jTable jQuery plug-in.
 
/* jTable metro style theme - Blue
 * Created by Halil İbrahim Kalkan
 * http://www.jtable.org
 */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTRa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Open Sans Light Italic'), local('OpenSansLight-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxrsuoFAk0leveMLeqYtnfAY.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBtIh4imgI8P11RFo6YPCPC0.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/MTP_ySUJH_bn48VBG8sNSha1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Open Sans Semibold Italic'), local('OpenSans-SemiboldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxmWeb5PoA5ztb49yLyUzH1A.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzBa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/PRmiXeptR36kaC0GEAetxoUt79146ZFaIJxILcpzmhI.woff) format('woff');
}
div.jtable-main-container {
  position: relative;
}
div.jtable-main-container div.jtable-title {
  position: relative;
  text-align: left;
}
div.jtable-main-container div.jtable-title .jtable-close-button {
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
}
div.jtable-main-container table.jtable {
  width: 100%;
}
div.jtable-main-container table.jtable thead th {
  vertical-align: middle;
  text-align: left;
}
div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container {
  position: relative;
}
div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container span.jtable-column-header-text {
  display: inline-block;
}
div.jtable-main-container table.jtable thead th.jtable-column-header div.jtable-column-header-container div.jtable-column-resize-handler {
  position: absolute;
  height: 24px;
  width: 8px;
  right: -8px;
  top: -2px;
  z-index: 2;
  cursor: col-resize;
}
div.jtable-main-container table.jtable thead th.jtable-command-column-header {
  text-align: center;
}
div.jtable-main-container table.jtable thead th.jtable-column-header-selecting {
  text-align: center;
  width: 1%;
}
div.jtable-main-container table.jtable thead th.jtable-column-header-selecting input {
  cursor: pointer;
}
div.jtable-main-container table.jtable thead th.jtable-column-header-sortable {
  cursor: pointer;
}
div.jtable-main-container table.jtable tbody tr > td .jtable-command-button {
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  border: none;
  display: inline;
}
div.jtable-main-container table.jtable tbody tr > td .jtable-command-button span {
  display: none;
}
div.jtable-main-container table.jtable tbody tr > td.jtable-command-column {
  text-align: center;
  vertical-align: middle;
}
div.jtable-main-container table.jtable tbody tr > td.jtable-selecting-column {
  text-align: center;
  vertical-align: middle;
}
div.jtable-main-container table.jtable tbody tr > td.jtable-selecting-column input {
  cursor: pointer;
}
div.jtable-main-container table.jtable tbody tr.jtable-no-data-row {
  text-align: center;
}
div.jtable-main-container div.jtable-bottom-panel {
  position: relative;
  min-height: 24px;
}
div.jtable-main-container div.jtable-bottom-panel div.jtable-left-area {
  left: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
}
div.jtable-main-container div.jtable-bottom-panel div.jtable-right-area {
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
}
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list {
  display: inline-block;
}
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
  padding: 2px 5px;
  display: inline-block;
  cursor: pointer;
}
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
  cursor: default;
}
div.jtable-main-container div.jtable-bottom-panel .jtable-page-list .jtable-page-info {
  display: inline-block;
  margin-left: 5px;
  padding: 2px;
}
div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record {
  display: inline-block;
}
div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record a {
  text-decoration: none;
}
div.jtable-main-container div.jtable-bottom-panel span.jtable-add-record a:hover {
  text-decoration: underline;
}
div.jtable-main-container div.jtable-column-resize-bar {
  opacity: 0.5;
  filter: alpha(opacity=50);
  position: absolute;
  display: none;
  width: 1px;
  background-color: #000;
}
div.jtable-main-container div.jtable-column-selection-container {
  position: absolute;
  display: none;
  border: 1px solid #C8C8C8;
  background: #fff;
  color: #000;
  z-index: 101;
  padding: 5px;
}
div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li {
  margin: 0px;
  padding: 2px 0px;
}
div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li label span {
  position: relative;
  top: -1px;
  margin-left: 4px;
}
div.jtable-main-container div.jtable-column-selection-container ul.jtable-column-select-list li input[type="checkbox"] {
  cursor: pointer;
}
form.jtable-dialog-form div.jtable-input-field-container {
  padding: 2px 0px 3px 0px;
  border-bottom: 1px solid #ddd;
}
form.jtable-dialog-form div.jtable-input-field-container:last-child {
  border: none;
}
form.jtable-dialog-form div.jtable-input-label {
  padding: 2px 3px;
  font-size: 1.1em;
  color: #666;
}
form.jtable-dialog-form div.jtable-input {
  padding: 2px;
}
form.jtable-dialog-form div.jtable-date-input {
  /* No additional style */

}
form.jtable-dialog-form div.jtable-text-input {
  /* No additional style */

}
form.jtable-dialog-form span.jtable-option-text-clickable {
  position: relative;
  top: -2px;
}
form.jtable-dialog-form div.jtable-textarea-input textarea {
  width: 300px;
  min-height: 60px;
}
form.jtable-dialog-form div.jtable-checkbox-input span,
form.jtable-dialog-form div.jtable-radio-input span {
  padding-left: 4px;
}
form.jtable-dialog-form div.jtable-radio-input input,
form.jtable-dialog-form div.jtable-checkbox-input input,
form.jtable-dialog-form span.jtable-option-text-clickable {
  cursor: pointer;
}
div.jtable-busy-panel-background {
  opacity: 0.1;
  filter: alpha(opacity=50);
  z-index: 998;
  position: absolute;
  background-color: #000;
}
div.jtable-busy-message {
  cursor: wait;
  z-index: 999;
  position: absolute;
  margin: 5px;
  font-size: 1.25em;
  color: #000;
  background-color: #ddd;
}
div.jtable-contextmenu-overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 100;
}
div.jtable-main-container {
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 14px;
  background: #fff;
  line-height: 1.3;
}
div.jtable-main-container > div.jtable-title {
  background-color: #0b67cd;
  padding-left: 10px;
}
div.jtable-main-container > div.jtable-title div.jtable-title-text {
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 34px;
  color: #fff;
}
div.jtable-main-container > div.jtable-title .jtable-close-button {
  right: 8px;
  top: 8px;
  bottom: 8px;
  position: absolute;
  opacity: 0.5;
  filter: alpha(opacity=50);
  background: url('../../metro/close.png') no-repeat;
  width: 16px;
  height: 16px;
}
div.jtable-main-container > div.jtable-title .jtable-close-button:hover {
  opacity: 1;
  filter: alpha(opacity=50);
}
div.jtable-main-container > table.jtable {
  border: 1px solid #2d89ef;
  border-collapse: collapse;
  border-spacing: 0;
}
div.jtable-main-container > table.jtable > thead {
  background-color: #2d89ef;
}
div.jtable-main-container > table.jtable > thead th {
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: #fff;
}
div.jtable-main-container > table.jtable > thead th.jtable-column-header div.jtable-column-header-container {
  height: 24px;
  margin-left: 4px;
}
div.jtable-main-container > table.jtable > thead th.jtable-column-header div.jtable-column-header-container div.jtable-column-resize-handler {
  height: 28px;
}
div.jtable-main-container > table.jtable > thead th.jtable-column-header div.jtable-column-header-container span.jtable-column-header-text {
  margin-top: 2px;
}
div.jtable-main-container > table.jtable > thead th.jtable-column-header-sortable div.jtable-column-header-container {
  background: url('../../metro/column-sortable.png') no-repeat right;
}
div.jtable-main-container > table.jtable > thead th.jtable-column-header-sorted-asc div.jtable-column-header-container {
  background: url('../../metro/column-asc.png') no-repeat right;
}
div.jtable-main-container > table.jtable > thead th.jtable-column-header-sorted-desc div.jtable-column-header-container {
  background: url('../../metro/column-desc.png') no-repeat right;
}
div.jtable-main-container > table.jtable > tbody > tr {
  background-color: #fff;
}
div.jtable-main-container > table.jtable > tbody > tr > td {
  border: 1px solid #ddd;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td {
  padding: 4px;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-edit-command-button {
  background: url('../../metro/edit.png') no-repeat;
  width: 16px;
  height: 16px;
  opacity: 0.4;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-edit-command-button:hover {
  opacity: 0.8;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-delete-command-button {
  background: url('../../metro/delete.png') no-repeat;
  width: 16px;
  height: 16px;
  opacity: 0.4;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-data-row > td > .jtable-delete-command-button:hover {
  opacity: 0.8;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-row-even {
  background-color: #f9f9f9;
}
div.jtable-main-container > table.jtable > tbody > tr:hover {
  background: #e8eaef;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-row-selected {
  color: #fff;
  background-color: #4fabff;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-row-created {
  background-color: #60bcff;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-row-updated {
  background-color: #60bcff;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-row-deleting {
  background-color: #e51400;
  color: #fff;
}
div.jtable-main-container > table.jtable > tbody > tr.jtable-child-row > td {
  padding: 0px;
  background-color: #fff;
}
div.jtable-main-container > div.jtable-bottom-panel {
  background-color: #1c78de;
  color: #fff;
  min-height: 22.900000000000002px;
  font-size: 13px;
  border: 1px solid #2d89ef;
  border-top: none;
}
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list {
  margin: 1px 0px 0px 0px;
}
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-space,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
  background-color: #2d89ef;
  margin: 1px;
  padding: 2px 5px;
  color: #fff;
}
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number:hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-first:hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-last:hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-previous:hover,
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-next:hover {
  background-color: #4fabff;
}
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-number-active {
  color: #ccc;
  cursor: default;
}
div.jtable-main-container > div.jtable-bottom-panel .jtable-page-list .jtable-page-info {
  margin-left: 5px;
  padding: 2px;
}
div.jtable-main-container > div.jtable-bottom-panel span.jtable-add-record {
  margin: 4px;
}
div.jtable-main-container > div.jtable-bottom-panel span.jtable-add-record a {
  color: #fff;
}
form.jtable-dialog-form {
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 14px;
}
div.jtable-busy-message {
  font-family: 'Segoe UI Semilight', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
  font-weight: 300;
  font-size: 16px;
  border: 1px solid #fff;
  padding: 5px 5px 5px 58px;
  color: #fff;
  background: url('../../metro/blue/loading.gif') no-repeat;
  background-color: #0b67cd;
  background-position: 8px;
}

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The MIT License


Written By
Halil ibrahim Kalkan
Founder Volosoft
Turkey Turkey
I have started programming at 14 years old using Pascal as hobby. Then I interested in web development (HTML, JavaScript, ASP...) before university.

I graduated from Sakarya University Computer Engineering. At university, I learned C++, Visual Basic.NET, C#, ASP.NET and Java. I partly implemented ARP, IP and TCP protocols in Java as my final term project.

Now, I am working on Windows and web based software development mostly using Microsoft technologies in my own company.

My open source projects:

* ABP Framework: https://abp.io
* jTable: http://jtable.org
* Others: https://github.com/hikalkan

My personal web site:

https://halilibrahimkalkan.com

Comments and Discussions

Permalink
Advertise
Privacy
Cookies
Terms of Use
Layout: fixed | fluid

Posted 3 Nov 2011

Article Copyright 2011 by Halil ibrahim Kalkan
Everything else Copyright © CodeProject, 1999-2024

Web04 2.8:2024-04-02:1