Skip to content

Instantly share code, notes, and snippets.

namespace SimpleService
{
public class SimpleService : ISimpleService
{
public string GetData(int value)
{
return string.Format("You entered: {0}", value);
}
}
}
public async Task<IActionResult> Index()
{
//Creating Client object of Service Reference
SimpleServiceReference.SimpleServiceClient client = new SimpleServiceReference.SimpleServiceClient();
//Call the method from WCF Service
string result = await client.GetDataAsync(1);
return View();
}
//function to be called on row edit button click
//Passing the selected row object as parameter, we use this row object to identify the edited row
$scope.edit = function (row) {
//Get the index of selected row from row object
var index = $scope.gridOptions.data.indexOf(row);
//Use that to set the editrow attrbute value for seleted rows
$scope.gridOptions.data[index].editrow = !$scope.gridOptions.data[index].editrow;
};
//Method to cancel the edit mode in UIGrid
$scope.cancelEdit = function (row) {
//Get the index of selected row from row object
var index = $scope.gridOptions.data.indexOf(row);
//Use that to set the editrow attrbute value to false
$scope.gridOptions.data[index].editrow = false;
//Display Successfull message after save
$scope.alerts.push({
msg: 'Row editing cancelled',
type: 'info'
//Class to hold the customer data
$scope.Customer = {
customerID: '',
companyName: '',
contactName: '',
contactTitle: ''
};
//Function to save the data
columnDefs: [
{
name: "CustomerID", displayName: "Customer ID", field: "CustomerID",
cellTemplate: '<div ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 80
},
{
name: "CompanyName", displayName: "Company Name", field: "CompanyName",
cellTemplate: '<div ng-if="!row.entity.editrow">{{COL_FIELD}}</div><div ng-if="row.entity.editrow"><input type="text" style="height:30px" ng-model="MODEL_COL_FIELD"</div>', width: 200
},
{
/// <reference path="angular.js" />
//Adding ui grid module as a depedency in app
var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);
//Controller function to load the data
app.controller('MainCtrl', function ($scope, $http, CustomerService) {
//function to be called on row edit button click
//Passing the selected row object as parameter, we use this row object to identify the edited row
@{
ViewBag.Title = "UIGrid Page";
}
<html ng-app="app">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.2/ui-grid.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script>
//Creating dbcontext class for NorthwindDatabase
NorthwindEntities dbContext = new NorthwindEntities();
[HttpPost]
public IHttpActionResult UpdateCustomer(Customer customer)
{
try
{
//Code to Save the data
dbContext.Entry(customer).State = System.Data.EntityState.Modified;
{
name: 'Actions', field: 'edit', enableFiltering: false, enableSorting: false,
cellTemplate: '<div><button ng-show="!row.entity.editrow" class="btn primary" ng-click="grid.appScope.edit(row.entity)"><i class="fa fa-edit"></i></button>' + //Edit Button
'<button ng-show="row.entity.editrow" class="btn primary" ng-click="grid.appScope.saveRow(row.entity)"><i class="fa fa-floppy-o"></i></button>' +//Save Button
'<button ng-show="row.entity.editrow" class="btn primary" ng-click="grid.appScope.cancelEdit(row.entity)"><i class="fa fa-times"></i></button>' + //Cancel Button
'<button ng-show="!row.entity.editrow" class="btn primary" ng-click="grid.appScope.deleteRow(row.entity)"><i class="fa fa-trash-o"></i></button>' +//Delete Button
'</div>', width: 100
}