Scribd
Upload
14 views

Doctype HTML Head Meta Title Title Head Script Script Script Script Script Script Script Script Script

This document contains code for an AngularJS web application that allows users to view, add, and search for customer records stored in a database. The application uses Angular controllers and services to manage customer data and interface with a backend API. It displays customers in a table, allows editing customer fields, and changes field colors dynamically based on amount values. The backend code uses Entity Framework to retrieve and save customers from a database and return them as JSON for the Angular app.

Uploaded by

tbijle
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
14 views

Doctype HTML Head Meta Title Title Head Script Script Script Script Script Script Script Script Script

This document contains code for an AngularJS web application that allows users to view, add, and search for customer records stored in a database. The application uses Angular controllers and services to manage customer data and interface with a backend API. It displays customers in a table, allows editing customer fields, and changes field colors dynamically based on amount values. The backend code uses Entity Framework to retrieve and save customers from a database and return them as JSON for the Angular app.

Uploaded by

tbijle
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Lab18

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>EnterCustomer</title>
</head>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="~/Scripts/angular.js"></script>
<script language="javascript">
function CustomerViewModel($scope, $http) {
$scope.Customer = {
"CustomerCode": "",
"CustomerName": "",
"CustomerAmount": "",
"CustomerAmountColor": ""
};
$scope.Customers = {};
$scope.$watch("Customers", function () {
for (var x = 0; x < $scope.Customers.length; x++) {
var cust = $scope.Customers[x];
cust.CustomerAmountColor = $scope.getColor(cust.CustomerAmount);
}
});
$scope.getColor = function (Amount) {
if (Amount == 0) {
return "";
}
else if (Amount > 100) {
return "Blue";
}
else {
return "Red";
}
}
$scope.$watch("Customer.CustomerAmount", function () {
$scope.Customer.CustomerAmountColor = $scope.
getColor($scope.Customer.CustomerAmount);
});
$scope.Add = function () {
// make a call to server to add data
$http({ method: "POST", data: $scope.Customer, url: "Submit" }).
success(function (data, status, headers, config) {
$scope.Customers = data;
// Load the collection of customer.
$scope.Customer = {
"CustomerCode": "",
"CustomerName": "",
"CustomerAmount": "",
"CustomerAmountColor": ""
};
});
}
$scope.Load = function () {
$http({ method: "GET", url: "getCustomers" }).

success(function (data, status, headers, config) {


$scope.Customers = data;
});
}
$scope.Load();
// App
}
var app = angular.module("myApp", []); // creating a APP
app.controller('CustomerViewModel', CustomerViewModel); // Registering the VM
// Controller
</script>
<body ng-app="myApp">
<a href="/Home/Index"> Home </a>
<br />
<div>
<div ng-controller="CustomerViewModel">
<form id="frm1">
<i>Customer Name</i> <input id="Text1" ng-model="Customer.CustomerName" type="text"
name="customer.CustomerName" /> <br />
@Html.ValidationMessageFor(x => x.customer.CustomerName)<br />
<i> Customer Code </i> <input id="Text1" ng-model="Customer.CustomerCode" type="text"
name="customer.CustomerCode" /><br />
@Html.ValidationMessageFor(x => x.customer.CustomerCode)<br />
<i> Customer Amount </i> <input id="Text1" type="text" ng-model="Customer.CustomerAmount"
style="background-color: {{ Customer.CustomerAmountColor }}"
name="customer.CustomerAmount" /><br />
</form>
<input id="Btn" type="button" value="Add customer" ng-click="Add()" />
<br />
<table id="tbl">
<tr>
<td>Customer Code</td>
<td>Customer Name</td>
<td>Customer Amount</td>
</tr>
<tr ng-repeat="cust in Customers">
<td>{{cust.CustomerCode}}</td>
<td>{{cust.CustomerName}}</td>
<td style="background-color: {{ cust.CustomerAmountColor }}">
{{cust.CustomerAmount}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
namespace HelloWorld.Controllers
{
[Authorize]
public class CustomerController : Controller
{
// GET: Customer
public ActionResult Load() // connect via browser HTML
{
Customer obj =
new Customer

{
CustomerCode = "1001",
CustomerName = "Shiv"
};
if (Request.QueryString["Type"] == "HTML")
{
return View("Customer", obj);
}
else
{
return Json(obj, JsonRequestBehavior.AllowGet);
}
}
public ActionResult Enter()
{
// view model object
CustomerViewModel obj = new CustomerViewModel();
// // single object is fresh
obj.customer = new Customer();
// dal i have filled the customers collection
return View("EnterCustomer", obj);
}
public ActionResult EnterSearch()
{
CustomerViewModel obj = new CustomerViewModel();
obj.customers = new List<Customer>();
return View("SearchCustomer", obj);
}
public ActionResult getCustomers() // JSON collection
{
Dal.Dal dal = new Dal.Dal();
List<Customer> customerscoll = dal.Customers.ToList<Customer>();
return Json(customerscoll, JsonRequestBehavior.AllowGet);
}
public ActionResult SearchCustomer()
{
CustomerViewModel obj = new CustomerViewModel();
Dal.Dal dal = new Dal.Dal();
string str = Request.Form["txtCustomerName"].ToString();
List<Customer> customerscoll
= (from x in dal.Customers
select x).ToList<Customer>();
obj.customers = customerscoll;
return View("SearchCustomer", obj);
}
public ActionResult Submit(Customer obj) // validation runs
{
if(ModelState.IsValid)
{
// insert the customer object to database
// EF DAL
Dal.Dal Dal = new Dal.Dal();
Dal.Customers.Add(obj); // in mmemory
Dal.SaveChanges(); // physical commit
}
Dal.Dal dal = new Dal.Dal();
List<Customer> customerscoll = dal.Customers.ToList<Customer>();
return Json(customerscoll, JsonRequestBehavior.AllowGet);

$scope.LoadByName = function () {
debugger;
$http({ method: "POST", data :$scope.Customer, url: "getCustomerByName" }).
success(function (data, status, headers, config) {
$scope.Customers = data;
});
}
$scope.Load();
<script language="javascript">
var app = angular.module("myApp", []); // creating a APP
app.controller('CustomerViewModel', CustomerViewModel); // Registering the VM
// Controller
</script>
<body ng-app="myApp">
<a href="/Home/Index"> Home </a>
<br />
<div>
<div ng-controller="CustomerViewModel">
<form id="frm1">
<i>Customer Name</i> <input id="Text1" ng-model="Customer.CustomerName"
type="text" name="customer.CustomerName" /> <br />
@Html.ValidationMessageFor(x => x.customer.CustomerName)<br />
<i> Customer Code </i> <input id="Text1" ng-model="Customer.CustomerCode"
type="text" name="customer.CustomerCode" /><br />
@Html.ValidationMessageFor(x => x.customer.CustomerCode)<br />
<i> Customer Amount </i> <input id="Text1" type="text" ngmodel="Customer.CustomerAmount"
style="background-color: {{ Customer.CustomerAmountColor }}"
name="customer.CustomerAmount" /><br />
</form>
<input id="Btn" type="button" value="Add customer" ng-click="Add()" />
<table code refer from video>

public ActionResult getCustomers() // JSON collection


{
Dal.Dal dal = new Dal.Dal();
List<Customer> customerscoll = dal.Customers.ToList<Customer>();
return Json(customerscoll, JsonRequestBehavior.AllowGet);
}
[ActionName("getCustomerByName")]
public ActionResult getCustomers(Customer obj) // JSON collection
{
Dal.Dal dal = new Dal.Dal();
List<Customer> customerscoll = (from temp in dal.Customers
where temp.CustomerName == obj.CustomerName
select temp).ToList<Customer>(); ;
return Json(customerscoll, JsonRequestBehavior.AllowGet);
}

You might also like