Tag Archives: CRUD

MVC AngularJS Master/Detail CRUD, Filter And Sorting Using WEB API 2 With Stored Procedure


MVC AngularJS Master/Detail CRUD, Filter And Sorting Using WEB API 2 With Stored Procedure
// CodeProject Latest Articles

In this article you will learn about MVC AngularJS Master/Detail CRUD, Filter and Sorting using WEB API 2 with Stored Procedure.

Part 2: MVC Application With MongoDB


MVC Application With MongoDB – Part 2
// C-Sharpcorner Latest Articles

In this article, we are going to perform CRUD operations in MVC using function prototype of MongoDB.

Mongoose – NodeJS + MongoDB with Mongoose Tutorial


Mongoose – Node.js + MongoDB with Mongoose Tutorial
// Kogonuso
By Mohamed Sanaulla

Develope Node.js + MongoDB Application with Mongoose

In my previous post, I demonstrated how to perform CRUD (Create, Read, Update, Delete) operations using Node.js and MongoDB API. This tutorial explains how to easily develop Node.js and MongoDB application with Mongoose application by using the Mongoose API. This tutorial assumes that reader has the knowledge on Node.js and MongoDB and knows how to set up the environment for this tutorial. Those who want to read the basic tutorials on Node.js and MongoDB please refer Introduction to Node.js and How to Install MongoDB on Windows.

If you are interested in receiving more updates on Node.js and MongoDB tutorials, please subscribe here.

Here is the overview of the sections covered in this tutorial.

  1. Introduction to Mongoose API
  2. Connecting to MongoDB using Mongoose
  3. Create Schema and Model in Mongoose
  4. Inserting Data using Mongoose
  5. Querying the DB using Mongoose
  6. Updating existing documents
  7. Deleting existing documents
  8. Example Application

Part 2: Provider Hosted MVC App With AngularJS in SharePoint


Provider Hosted MVC App With AngularJS in SharePoint – Part 2
// C-Sharpcorner Latest Articles

In this article, you will learn how to perform CRUD operation using AngularJS with provider hosted MVC App in SharePoint 2013.

CRUD Operation Using ASP.NET MVC, JSON, ADO.NET, Stored Procedure


CRUD Operation Using ASP.NET MVC, JSON, ADO.NET, Stored Procedure
// C-Sharpcorner Latest Articles

In this post we will learn basic CRUD operations using ASP.NET MVC, JSON, ADO.NET, and Stored Procedure with a sample MVC Application.

AngularJS Part 3: CRUD Data Grid


AngularJS – CRUD Data Grid III
// Kogonuso

sshot-10221.png
The goal of this post is to extend the AngularJS CRUD Grid that we created in previous posts: We will add now the following requirements:

  • # 1 Filter items.
  • # 2 Custom buttons: This will allow us to add button columns that will call the parent controller with the id of the button clicked and the associated item as parameter.

Results

Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements.
You can see a live demo here: AngularJS CRUD Grid III demo.

Filters:

All items
image
Items containing the letter ‘c’
image

Custom buttons:

image
Button click, callback that shows a popup:
image

Implementation

Filters

I use the AngularJS ng-repeat filter feature:

ng-repeat=”knownItem in itemsCtrl.allItems | filter:itemsCtrl.filter”

This works out of the box but I improved it using a throttle method that applies the filter after 500ms without writing, this improve the performance of our filter.
The idea is simple, we have two properties:

  • filterText: The text written on the filter input, this is not the filter applied to our items. After a change wait 500ms without more changes and then set the filter property.
  • filter: The filter applied to our items.

function _filterChanged() {
_filterThrottle.run(function () {
// update filter
$scope.$apply(function () {
self.filter = self.filterText;
});
});
}

The throttle method:

(function () {
'use strict';

// module definition
stockModule.factory("reactiveFactory", function reactiveFactory() {
return {
// Execute an action after a period of time without calls
getThrottle: _createThrottle
};

function _createThrottle(delay) {
var throttleTimer = null;
var throttleDelay = delay;

if (!throttleDelay) {
// use default value 250ms
throttleDelay = 250;
}

return {
run: function(action) {
return function() {
clearTimeout(throttleTimer);

throttleTimer = setTimeout(function() {
// execute action
action.apply();

// dispose timer
throttleTimer = null;
}, throttleDelay);
}();
}
};
}

});
})();

Custom buttons

With custom buttons we want to get a call on the parent controller of our grid with the id of the button clicked and the associated item.
We need a new column type: button.
This column has this configuration:

  • icon: glyphicon to display in our button
  • buttonid: id passed to the parent when this button is clicked
  • class: class applied to the cell button

An example of a column definitions with two button type columns:

{
“binding” :”id”,
“type” :”text”,
“required” :”true”,
“hidden” :”true”
},
{
“binding” :”name”,
“header” :”Name”,
“type” :”text”,
“required” :”true”
},
{
“binding” :”description”,
“header” :”Level”,
“type” :”text”,
“required” :”false”
},
{
“type” :”button”,
“icon” :”btn glyphicon glyphicon-plus”,
“buttonid” :”plus”,
“class” :”column-width-auto”
},
{
“type” :”button”,
“icon” :”btn glyphicon glyphicon-minus”,
“buttonid” :”minus”,
“class” :”column-width-auto”
}
]’>

To get the notifications we need to add a callback to our grid:

div crud-grid column-button-click=’itemsCtrl.gridOnButtonClick’

'use strict';
(function () {
stockModule.controller("itemsController", itemsController);

function itemsController(modalWindowFactory) {

var self = this;

////

AngularJS Part 2: CRUD Data Grid


AngularJS – CRUD Data Grid II
// Kogonuso

sshot-10215.png
The goal of this post is to extend the AngularJS CRUD Grid that we created in a previous post:

Code is available on github: https://github.com/softwarejc/angularjs-crudgrid. Feel free to play with it, find errors and write improvements. You can see a live demo here: AngularJS CRUD Grid III demo.
In that post we wrote a single page application (SPA) to display a list of items inside a grid. The grid allows all the CRUD operations: Create, Read, Update and Delete items. We will add now the following requirements:

  • # 1 Confirmation dialog before deleting an item.
  • # 2 Column ordering.
  • # 3 CRUD Grid as a directive
    • # 3.1 Dynamic columns generation.
    • # 3.2 Column options: Type, visibility, header, mandatory.
  • # 4 Cell editor directive, text and date mode. Use AngularJS date picker in date format columns

Results

You can see a demo here: AngularJS CRUD Grid II demo. I will share the interesting code of the application in this post and one of my next steps will be to upload all the code to GitHub.

Running application

Angular JS CRUD Grid. Dynamic columns

Delete confirmation

Angular JS CRUD Grid. Delete confirmation

Date picker

Angular JS CRUD Grid. Date picker.

Implementation

Server side

To do all the implementation we will use the same infrastructure we have used for the previous post at the server side. We will only add a couple of additional properties to test the dynamic column generation:

  • Description: String not required
  • Expire: DateTime not required
public class Item
{
[Key]
public int Id { get; set; }

[MaxLength(200)]
[Index(IsUnique = true)]
public string Name { get; set; }

public string Description { get; set; }

[DataType(DataType.Date)]
public DateTime? Expire { get; set; }
}

# 1 Confirmation dialog before deleting an item.

I use $modal from UI Bootstrap AngularJS. image I created a Modal Window Factory with a ‘show’ method. This method has four parameters:

  • title: Window’s title.
  • msg: A message to show in the window’s body.
  • confirmCallback: A callback to execute when the user click “OK”.
  • cancelCallback: A callback to execute when the user click “Cancel”.

The crud grid controller use this factory when the user want to delete an item:

function _deleteItem(item) {

var title = "Delete '" + item.name + "'";
var msg = "Are you sure you want to remove this item?";
var confirmCallback = function () {...};

modalWindowFactory.show(title, msg, confirmCallback);
};

This is the factory:

stockModule.factory('modalWindowFactory', function ($modal) {

var modalWindowController = _modalWindowController;

return {

// Show a modal window with the specified title and msg
show: function (title, msg, confirmCallback, cancelCallback) {

// Show window
var modalInstance = $modal.open({
templateUrl: 'partials/modalWindow.html',
controller: modalWindowController,
size: 'sm',
resolve: {
title: function () {
return title;
},
body: function () {
return msg;
}
}
});

// Register confirm and cancel callbacks
modalInstance.result.then(
// if any, execute confirm callback
function() {
if (confirmCallback != undefined) {
confirmCallback();
}
},
// if any, execute cancel callback
function () {
if (cancelCallback != undefined) {
cancelCallback();
}
});
}
};

// Internal controller used by the modal window
function _modalWindowController($scope, $modalInstance, title, body) {
$scope.title = "";
$scope.body = "";

// If specified, fill window title and message with parameters
if (title) {
$scope.title = title;
}
if (body) {
$scope.body = body;
}

$scope.confirm = function () {
$modalInstance.close();
};

$scope.cancel = function () {
$modalInstance.dismiss();
};
};

});

The UI:

</div>

# 2 Columns ordering

This portion of code does the ordering selection:

<th ng-repeat="column in itemsCtrl.columnsDefinition"
ng-hide="column.hidden"
style="vertical-align:middle; cursor: pointer">
{{column.header}}

</th>

When we click the header, it calls the controller with the column that was clicked has parameter to set it as active ordering column. The controller also checks if the column being ordered is the same, in this case it reverses the ordering direction:

function _setOrderByColumn(column) {
if (self.orderByColumn == column) {
// change order
self.orderByReverse = !self.orderByReverse;
} else {
// order using new column
self.orderByColumn = column;
self.orderByReverse = false;
}
}

To finish this requirement we add the ordering configuration to the ng-repeat that print a line for each item:

<tr ng-repeat="knownItem in itemsCtrl.allItems | orderBy:itemsCtrl.orderByColumn: itemsCtrl.orderByReverse">

# 3 CRUD Grid as a Directive

To use our data grid in different places we need it as a directive. This directive will also take care of dynamic columns generation. In our example we want to generate a column not only for the item name but also for the description and expire property. This is how I would like to use the grid:

  • I add the ‘crud-grid’ directive to the item where I want the grid.
  • I define the address where the REST service should access my WebAPI.
  • I add a column definition for each item property I want to see on my grid.

Each column definition can have this options:

  • Binding: The property of the received JSON that this column will display
  • Header: The header of this column
  • Type: The type of this column, currently text or date.
  • Required: If true this column cannot be empty before saving changes.
  • Hidden: If true this column is hidden. Used for example to add the id during implementation.

Sample of usage:

{
“binding” :”id”,
“type” :”text”,
“required” :”true”,
“hidden” :”true”
},
{
“binding” :”name”,
“header” :”Name”,
“type” :”text”,
“required” :”true”
},
{
“binding” :”description”,
“header” :”Description”,
“type” :”text”,
“required” :”false”
},
{
“binding” :”expire”,
“header” :”Expire Date”,
“type” :”date”,
“required” :”false”
}
]’>

</div>

We will divide the implementation in 4 files:

  • Directive definition
  • Controller
  • Items Factory
  • View

Directive definition

stockModule.directive('crudGrid', function () {
return {
// 'A' - only matches attribute name
// 'E' - only matches element name
// 'C' - only matches class name
restrict: 'A',
// Don't replace the element that contains the attribute
replace: false,
// scope = false, parent scope
// scope = true, get new scope
// scope = {..}, isolated scope
scope: true,
// view
templateUrl: '/app/directives/crud.grid/crud.grid.view.html',
// controller
controller: "crudgridController as itemsCtrl"
}
});

Controller

stockModule.controller("crudgridController", itemsController);

function itemsController($element, $attrs, ajaxServiceFactory, notificationsFactory, modalWindowFactory) {

'use strict';
var self = this;

////