Lab 18

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" }).

});
}
$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()
{
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()
{
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
}
$scope.LoadByName = function () {
debugger;
$http({ method: "POST", data :$scope.Customer, url: "getCustomerByName" }).
});
}
$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

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

Lab 18

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab 18

Uploaded by

Copyright:

Available Formats

Lab18

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

public ActionResult getCustomers() // JSON collection

You might also like