ASP.NET MVC/jQuery Application: Stellar Water Point
ASP.NET MVC/jQuery Application: Stellar Water Point
Starting the Application
Introduction
A water distribution company delivers water to homes and commercial buildings. In this exercise, we will create an ASP.NET MVC application for a fictitious company that distributes and sells water. This version of the application will use jQuery to perform some front-end operations.
Practical Learning: Introducing XML Node Maintenance
 |
 |
 |
 |
 |
 |
/* Set padding to keep content from hitting the edges */
.body-content {
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.bg-dark { --bs-bg-opacity: 1;
background-color: #800000 !important; }
.box-shadow { box-shadow: 6px 6px 2px 1px rgba(2, 2, 5, .2); }
.bordered { border: 1px solid black; }
.common-font { font-family: Garamond, Georgia, Cambria, 'Times New Roman', Times, serif }
.encloser-small { margin: auto;
width: 400px; }
.encloser-large { margin: auto;
width: 600px; }
.enclosing {
margin: auto;
width: 500px;
}
.stellar { font-weight: bold;
text-decoration: none;
color: maroon;
font-family: Garamond, Georgia, Cambria, 'Times New Roman', Times, serif; }
a.stellar:focus { color: red; }
a.stellar:hover { color: navy;
text-decoration: underline; }
.navbar-brand { font-weight: bold;
color: #FFD800; }
.navbar-brand:hover, .navbar-brand:focus {
font-weight: bold;
color: #FFFFFF; }
.nav-link { font-weight: bold;
color: yellow; }
.nav-link { font-weight: bold;
color: #FFFFFF; }Setting Up the Site
.
Practical Learning: Setting Up the Ŝite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title - Stellar Water Point</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<nav class="common-font navbar navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark">
<div class="container">
@Html.ActionLink("Stellar Water Point", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" title="Toggle navigation" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1">
<li>@Html.ActionLink("Water Bills", "Index", "WaterBills", new { area = "" }, new { @class = "nav-link" })</li>
<li>@Html.ActionLink("Customers", "Index", "Customers", new { area = "" }, new { @class = "nav-link" })</li>
<li>@Html.ActionLink("Water Meters", "Index", "WaterMeters", new { area = "" }, new { @class = "nav-link" })</li>
<li>@Html.ActionLink("API", "Index", "Help", new { area = "" }, new { @class = "nav-link" })</li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p class="text-center common-font">© @DateTime.Now.Year - Stellar Water Point</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html><main class="common-font">
<section class="row" aria-labelledby="aspnetTitle">
<div class="text-center">
<h1 class="display-4 fw-bold">Stellar Water Point</h1>
<p class="lead text-muted">Stellar Water Point is a community-based company that commercially distributes water to customers in need. Our water process is socially responsible and community oriented.</p>
</div>
</section>
<div class="row">
<section class="col-md-4" aria-labelledby="gettingStartedTitle">
<div class="card mb-4 box-shadow">
<img class="bordered card-img-top" src="../Images/WaterBills.png" alt="Water Bills">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/WaterBills/Index">Water Bills</a></h5>
<hr />
<p class="card-text">Water bills are processed in a timely and responsible manner, applying only the strictest, regular, and lawful rules.</p>
</div>
</div>
</section>
<section class="col-md-4" aria-labelledby="librariesTitle">
<div class="card mb-4 box-shadow">
<img class="bordered card-img-top" src="../Images/Customers.png" alt="Customers Accounts">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/Customers/Index">Customers Accounts</a></h5>
<hr />
<p class="card-text">Water bills are sent in a trimester-base to our customers who holds an account with us, all for good service.</p>
</div>
</div>
</section>
<section class="col-md-4" aria-labelledby="hostingTitle">
<div class="card mb-4 box-shadow">
<img class="bordered card-img-top" src="../Images/WaterMeter.png" alt="Water Meters">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/WaterMeters/Index">Water Meters</a></h5>
<hr />
<p class="card-text">We use industry standard water meters that are regularly government inspected for their accuracy and precision.</p>
</div>
</div>
</section>
</div>
<div class="row">
<section class="col-md-4" aria-labelledby="gettingStartedTitle">
<div class="card mb-4">
<img class="card-img-top bordered" src="../Images/Community.png" alt="Community Services">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Community Services</a></h5>
<hr />
<p class="card-text">Stellar Water Point is a community-oriented company that works withn various local activities and authorities.</p>
</div>
</div>
</section>
<section class="col-md-4" aria-labelledby="librariesTitle">
<div class="card mb-4">
<img class="card-img-top bordered" src="../Images/LegalAffairs.png" alt="Legal Affairs">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Legal Affairs</a></h5>
<hr />
<p class="card-text">Issues of regulations and government affairs are addressed here. This is available for employees, contractors, etc.</p>
</div>
</div>
</section>
<section class="col-md-4" aria-labelledby="hostingTitle">
<div class="card mb-4">
<img class="card-img-top bordered" src="../Images/Employees.png" alt="Employees Portal">
<div class="card-body">
<h5><a class="nav-link text-dark fw-bold" href="/StellarWaterPoint">Employees Portal</a></h5>
<hr />
<p class="card-text">This is a central area form employees to access the company resources such as time sheets, payroll, benefits, etc.</p>
</div>
</div>
</section>
</div>
</main>The Database
Our application needs a database. We will first create it as a Microsoft SQL Server database. To make it easy to use, in Microsoft Visual Studio, we will use the Entity Framework to convert the database tables into classes and for better intergration with views.
Practical Learning: Creating the Database
CREATE TABLE WaterMeters
(
WaterMeterId INT IDENTITY(1, 1),
MeterNumber NVARCHAR(15) NOT NULL,
Make NVARCHAR(25) NULL,
Model NVARCHAR(20) NOT NULL,
MeterSize NVARCHAR(15) NULL,
CONSTRAINT PK_WaterMeters PRIMARY KEY(WaterMeterId)
);
GO
CREATE TABLE AccountsTypes
(
AccountTypeId INT IDENTITY(1, 1),
TypeCode NVARCHAR(5) NOT NULL,
AccountType NVARCHAR(200) NULL,
CONSTRAINT PK_AccountsTypes PRIMARY KEY(AccountTypeId)
);
GO
CREATE TABLE Customers
(
CustomerId INT IDENTITY(1, 1),
AccountNumber NVARCHAR(15),
AccountName NVARCHAR(150),
MeterNumber NVARCHAR(15),
AccountType NVARCHAR(5),
[Address] NVARCHAR(150),
City NVARCHAR(25),
County NVARCHAR(35),
[State] NVARCHAR(35),
ZIPCode NVARCHAR(12),
CONSTRAINT PK_Customers PRIMARY KEY(CustomerId)
);
GO
CREATE TABLE WaterBills
(
WaterBillId INT IDENTITY(1, 1),
BillNumber INT NOT NULL,
AccountNumber NVARCHAR(15) NOT NULL,
MeterReadingStartDate DATE,
MeterReadingEndDate DATE,
BillingDays INT,
CounterReadingStart INT,
CounterReadingEnd INT,
TotalHCF INT,
TotalGallons INT,
FirstTierConsumption DECIMAL(6, 2),
SecondTierConsumption DECIMAL(6, 2),
LastTierConsumption DECIMAL(6, 2),
WaterCharges DECIMAL(6, 2),
SewerCharges DECIMAL(6, 2),
EnvironmentCharges DECIMAL(6, 2),
ServiceCharges DECIMAL(6, 2),
TotalCharges DECIMAL(6, 2),
LocalTaxes DECIMAL(6, 2),
StateTaxes DECIMAL(6, 2),
PaymentDueDate DATE,
AmountDue DECIMAL(6, 2),
LatePaymentDueDate DATE,
LateAmountDue DECIMAL(6, 2),
CONSTRAINT PK_WaterBills PRIMARY KEY(WaterBillId)
);
GO
-- =================================================================================
INSERT INTO AccountsTypes(TypeCode, AccountType)
VALUES(N'OTH', N'Other'),
(N'BUS', N'General Business'),
(N'RES', N'Residential Household'),
(N'SGO', N'Social/Government/Non-Profit Organization'),
(N'UUO', N'Unidentified or Unclassified Type of Organization'),
(N'WAT', N'Water Intensive Business (Laudromat, Hair Salon, Restaurant, etc');
GOAdding Support for the Database
Practical Learning: Adding the Entity Framework
Applying a Code First Entity Framework
Practical Learning: Applying a Code First Entity Framework
Water Meters
Displaying Water Meters
Utility companies use a device that measure what their customers consume. For example a water utility company installs water meters in residences and commercial buildings to find out how much water has been used. In this section, we will create a view that allows an employee to keep track of water consumption.
Practical Learning: Displaying Water Meters
namespace StellarWaterPoint11.Models
{
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public partial class WaterMeter
{
[Key]
[DisplayName("Water Meter Id")]
public int WaterMeterId { get; set; }
[Required]
[StringLength(15)]
[DisplayName("Meter #")]
public string MeterNumber { get; set; }
[StringLength(25)]
public string Make { get; set; }
[Required]
[StringLength(20)]
public string Model { get; set; }
[StringLength(15)]
[DisplayName("Meter Size")]
public string MeterSize { get; set; }
}
}
using StellarWaterPoint11.Models;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;
namespace StellarWaterPoint11.Controllers
{
public class WaterMetersController : Controller
{
private WaterManagementModel db = new WaterManagementModel();
// GET: WaterMeters
public ActionResult Index()
{
return View(db.WaterMeters.ToList());
}
// GET: WaterMeters/Details/5
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
WaterMeter waterMeter = db.WaterMeters.Find(id);
if (waterMeter == null)
{
return HttpNotFound();
}
return View(waterMeter);
}
// GET: WaterMeters/Create
public ActionResult Create()
{
return View();
}
// POST: WaterMeters/Create
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "WaterMeterId,MeterNumber,Make,Model,MeterSize")] WaterMeter waterMeter)
{
if (ModelState.IsValid)
{
db.WaterMeters.Add(waterMeter);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(waterMeter);
}
// GET: WaterMeters/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
WaterMeter waterMeter = db.WaterMeters.Find(id);
if (waterMeter == null)
{
return HttpNotFound();
}
return View(waterMeter);
}
// POST: WaterMeters/Edit/5
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "WaterMeterId,MeterNumber,Make,Model,MeterSize")] WaterMeter waterMeter)
{
if (ModelState.IsValid)
{
db.Entry(waterMeter).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(waterMeter);
}
// GET: WaterMeters/Delete/5
public ActionResult Delete(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
WaterMeter waterMeter = db.WaterMeters.Find(id);
if (waterMeter == null)
{
return HttpNotFound();
}
return View(waterMeter);
}
// POST: WaterMeters/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
WaterMeter waterMeter = db.WaterMeters.Find(id);
db.WaterMeters.Remove(waterMeter);
db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}@model IEnumerable<StellarWaterPoint11.Models.WaterMeter>
@{
ViewBag.Title = "Water Meters";
}
<h2 class="text-center common-font fw-bold">Water Meters</h2>
<hr />
<table class="table table-striped common-font">
<tr>
<th class="text-center">@Html.DisplayNameFor(model => model.WaterMeterId)</th>
<th>@Html.DisplayNameFor(model => model.MeterNumber)</th>
<th>@Html.DisplayNameFor(model => model.Make)</th>
<th>@Html.DisplayNameFor(model => model.Model)</th>
<th>@Html.DisplayNameFor(model => model.MeterSize)</th>
<th>@Html.ActionLink("Set Up Water Meter", "Create", null, htmlAttributes: new { @class = "stellar" })</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td class="text-center">@Html.DisplayFor(modelItem => item.WaterMeterId)</td>
<td>@Html.DisplayFor(modelItem => item.MeterNumber)</td>
<td>@Html.DisplayFor(modelItem => item.Make)</td>
<td>@Html.DisplayFor(modelItem => item.Model)</td>
<td>@Html.DisplayFor(modelItem => item.MeterSize)</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.WaterMeterId }) |
@Html.ActionLink("Details", "Details", new { id = item.WaterMeterId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.WaterMeterId })
</td>
</tr>
}
</table>
A Water Meter Record
.
Practical Learning: Creating Water Meters
@model StellarWaterPoint11.Models.WaterMeter
@{
ViewBag.Title = "Create Water Meter";
}
<h2 class="text-center common-font fw-bold">Create Water Meter</h2>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal encloser-small common-font">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row mb-2">
@Html.LabelFor(model => model.MeterNumber, htmlAttributes: new { @class = "col-form-label col-sm-5 fw-bold" })
<div class="col-sm-7">
@Html.EditorFor(model => model.MeterNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.MeterNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.Make, htmlAttributes: new { @class = "col-form-label col-sm-5 fw-bold" })
<div class="col-sm-7">
@Html.EditorFor(model => model.Make, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Make, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.Model, htmlAttributes: new { @class = "col-form-label col-sm-5 fw-bold" })
<div class="col-sm-7">
@Html.EditorFor(model => model.Model, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Model, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.MeterSize, htmlAttributes: new { @class = "col-form-label col-sm-5 fw-bold" })
<div class="col-sm-7">
@Html.EditorFor(model => model.MeterSize, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.MeterSize, "", new { @class = "text-danger" })
</div>
</div>
<hr />
<div class="row mb-2">
<label class="control-label col-md-5">
@Html.ActionLink("View Water Meters", "Index", null, htmlAttributes: new { @class = "stellar" })
</label>
<div class="col-md-offset-2 col-md-7 text-center">
<input type="submit" value="Save Water Meter" class="btn btn-primary" />
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
| Meter # | Make | Model | Meter Size |
| 392-494-572 | Constance Technologies | TG-4822 | 5/8 Inches |
| 999-777-888 | Stan Wood | G-26 | 1 Inch |
INSERT INTO WaterMeters(MeterNumber, Make, Model, MeterSize)
VALUES(N'588-279-663', N'Estellano', N'NCF-226', N'4 Inches'),
(N'186-962-805', N'Lansome', N'2800', N'1 1/2 Inches'),
(N'483-770-648', N'Warrens', N'WWW', N'0.1 Inch'),
(N'379-386-979', N'Planetra', N'P-2020', N'4 Inches'),
(N'580-742-825', N'Kensa Sons', N'KS2000A', N'1 3/4 Inches'),
(N'849-351-444', N'Raynes Energica', N'a1088', N'2 Inches'),
(N'208-428-308', N'Constance Technologies', N'808D', N'3/4 Inches'),
(N'738-588-249', N'Warrington', N'W4242', N'5/8 Inches'),
(N'496-813-794', N'Estellano', N'NCF-226', N'3/4 Inches'),
(N'862-715-006', N'Warrington', N'W-4040', N'1/2 Inch'),
(N'649-358-184', N'Raynes Energica', N'b1700', N'1 1/2 Inches'),
(N'928-317-924', N'Gongola', N'GN1000', N'2 Inch'),
(N'595-753-147', N'Grass Grill', N'CRC-1000', N'1 Inch'),
(N'799-528-461', N'Kensa Sons', N'K-584-L', N'3/4 Inches'),
(N'386-468-057', N'Estellano', N'NCF-226', N'3/4 Inches'),
(N'938-275-294', N'Constance Technologies', N'TT-8822', N'4 Inches'),
(N'288-427-585', N'Planetra', N'P-2020', N'1/2 Inch'),
(N'394-835-297', N'Raynes Energica', N'i2022', N'3/4 Inches'),
(N'847-252-246', N'Master Stream', N'2000-MS', N'1 1/2 Inches'),
(N'349-725-848', N'Planetra', N'P-8000', N'4 Inches'),
(N'713-942-058', N'Master Stream', N'3366-MS', N'3/4 Inches'),
(N'747-581-379', N'Warrington', N'W4242', N'5/8 Inches'),
(N'582-755-263', N'Kensa Sons', N'KS2000A', N'1 Inch'),
(N'827-260-758', N'Raynes Energica', N'a1088', N'1-1/4 Inch'),
(N'837-806-836', N'Lansome', N'7400', N'5/8 Inches'),
(N'207-964-835', N'Constance Technologies', N'TG-6220', N'5/8 Inches'),
(N'296-837-495', N'Raynes Energica', N'QG505', N'4 Inches'),
(N'468-359-486', N'Grass Grill', N'KLP-8822', N'1-1/4 Inch'),
(N'931-486-003', N'Planetra', N'P-2020', N'1/2 Inch'),
(N'592-824-957', N'Kensa Sons', N'D-497-H', N'3/4 Inches'),
(N'293-835-704', N'Gongola', N'GOL1000', N'1/2 Inch'),
(N'739-777-749', N'Warrington', N'W2200W', N'3/4 Inches'),
(N'374-886-284', N'Raynes Energica', N'i2022', N'3/4 Inches'),
(N'186-959-757', N'Kensa Sons', N'M-686-G', N'1 1/2 Inches'),
(N'594-827-359', N'Planetra', N'P-8000', N'1 Inch'),
(N'394-739-242', N'Master Stream', N'9393-TT', N'5/8 Inches'),
(N'529-283-752', N'Constance Technologies', N'404T', N'3/4 Inches'),
(N'295-770-695', N'Warrington', N'W-2286', N'1-1/4 Inch'),
(N'739-749-737', N'Kensa Sons', N'KS2000A', N'1 Inch'),
(N'947-528-317', N'Gondola', N'GDL-5000', N'1 Inch'),
(N'630-207-055', N'Lansome', N'2800', N'3/4 Inches'),
(N'827-508-248', N'Standard Trend', N'428T', N'3/4 Inches'),
(N'293-924-869', N'Grass Grill', N'CRC-2020', N'1/2 Inch'),
(N'928-247-580', N'Gondola', N'GOL2000', N'0.34 Inch'),
(N'682-537-380', N'Planetra', N'P-2020', N'1-1/4 Inch'),
(N'470-628-850', N'Estellano', N'WRT-482', N'3/4 Inches'),
(N'649-373-505', N'Constance Technologies', N'BD-7000', N'5/8 Inches'),
(N'306-842-497', N'Lansome', N'9000', N'3/4 Inches');
GOWater Meter Details
.
Practical Learning: Viewing the Details of a Water Meter
@model StellarWaterPoint11.Models.WaterMeter
@{
ViewBag.Title = "Water Meter Details";
}
<h2 class="text-center common-font fw-bold">Water Meter Details</h2>
<hr />
<div class="encloser-small common-font">
<table class="table table-striped common-font">
<tr>
<th>@Html.DisplayNameFor(model => model.WaterMeterId)</th>
<td>@Html.DisplayFor(model => model.WaterMeterId)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.MeterNumber)</th>
<td>@Html.DisplayFor(model => model.MeterNumber)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.Make)</th>
<td>@Html.DisplayFor(model => model.Make)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.Model)</th>
<td>@Html.DisplayFor(model => model.Model)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.MeterSize)</th>
<td>@Html.DisplayFor(model => model.MeterSize)</td>
</tr>
</table>
<hr />
<p class="text-center">
@Html.ActionLink("Edit/Update Water Meter Details", "Edit",
new { id = Model.WaterMeterId },
htmlAttributes: new { @class = "stellar" }) |
@Html.ActionLink("Water Meters", "Index", null,
htmlAttributes: new { @class = "stellar" })
</p>
</div>
Updating a Water Meter Details
One of the routine operations performed on a database is to change the details of a record. To support this operation for a water meter, we will create a form that can be used to update the information of a water meter.
Practical Learning: Updating a Water Meter
@model StellarWaterPoint11.Models.WaterMeter
@{
ViewBag.Title = "Edit Water Meter";
}
<h2 class="text-center common-font fw-bold">Edit/Update Water Meter</h2>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal encloser-small common-font">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.WaterMeterId)
<div class="row mb-2">
@Html.LabelFor(model => model.MeterNumber, htmlAttributes: new { @class = "col-form-label col-sm-5 fw-bold" })
<div class="col-sm-7">
@Html.EditorFor(model => model.MeterNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.MeterNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.Make, htmlAttributes: new { @class = "col-form-label col-sm-5 fw-bold" })
<div class="col-sm-7">
@Html.EditorFor(model => model.Make, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Make, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.Model, htmlAttributes: new { @class = "col-form-label col-sm-5 fw-bold" })
<div class="col-sm-7">
@Html.EditorFor(model => model.Model, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Model, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.MeterSize, htmlAttributes: new { @class = "col-form-label col-sm-5 fw-bold" })
<div class="col-sm-7">
@Html.EditorFor(model => model.MeterSize, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.MeterSize, "", new { @class = "text-danger" })
</div>
</div>
<hr />
<div class="row mb-2">
<label class="control-label col-md-5">
@Html.ActionLink("View Water Meters", "Index", null, htmlAttributes: new { @class = "stellar" })
</label>
<div class="col-md-offset-2 col-md-7 text-center">
<input type="submit" value="Update Water Meter" class="btn btn-primary" />
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
| Meter #: | 938-725-869 |
| Make: | Stanford Trend |
| Model: | 266G |
| Meter Size: | 1 1/2 Inches |
Deleting a Water Meter
.
Practical Learning: Deleting a Water Meter Record
@model StellarWaterPoint11.Models.WaterMeter
@{
ViewBag.Title = "Delete Water Meter";
}
<h2 class="text-center common-font fw-bold">Water Meter Deletion</h2>
<hr />
<div class="encloser-small common-font">
<table class="table table-striped common-font">
<tr>
<th>@Html.DisplayNameFor(model => model.WaterMeterId)</th>
<td>@Html.DisplayFor(model => model.WaterMeterId)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.MeterNumber)</th>
<td>@Html.DisplayFor(model => model.MeterNumber)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.Make)</th>
<td>@Html.DisplayFor(model => model.Make)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.Model)</th>
<td>@Html.DisplayFor(model => model.Model)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.MeterSize)</th>
<td>@Html.DisplayFor(model => model.MeterSize)</td>
</tr>
</table>
<hr />
<h3 class="common-font text-center">Do you want to delete this water meter (you cannot undo the action)?</h3>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="row mb-2">
<div class="col-form-label col-sm-5 fw-bold">
@Html.ActionLink("Water Meters", "Index", null, htmlAttributes: new { @class = "stellar" })
</div>
<div class="col-sm-7 text-center">
<input type="submit" value="Yes, delete this Water Meter" class="btn btn-primary" />
</div>
</div>
}
</div>
Customers
Introduction
.
Practical Learning: Creating Customers
namespace StellarWaterPoint11.Models
{
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public partial class Customer
{
[Key]
[DisplayName("Customer Id")]
public int CustomerId { get; set; }
[StringLength(15)]
[DisplayName("Account #")]
public string AccountNumber { get; set; }
[StringLength(150)]
[DisplayName("Account Name")]
public string AccountName { get; set; }
[StringLength(15)]
[DisplayName("Meter #")]
public string MeterNumber { get; set; }
[StringLength(5)]
[DisplayName("Account Type")]
public string AccountType { get; set; }
[StringLength(150)]
public string Address { get; set; }
[StringLength(25)]
public string City { get; set; }
[StringLength(35)]
public string County { get; set; }
[StringLength(35)]
public string State { get; set; }
[StringLength(12)]
[DisplayName("ZIP-Code")]
public string ZIPCode { get; set; }
}
}
using Microsoft.Ajax.Utilities;
using StellarWaterPoint11.Models;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;
namespace StellarWaterPoint11.Controllers
{
public class CustomersController : Controller
{
private WaterManagementModel db = new WaterManagementModel();
// GET: Customers
public ActionResult Index()
{
return View(db.Customers.ToList());
}
// GET: Customers/Details/5
public ActionResult Details(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Customer customer = db.Customers.Find(id);
if (customer == null)
{
return HttpNotFound();
}
string strMeterDetails = string.Empty;
foreach (var mtr in db.WaterMeters)
{
if(mtr.MeterNumber == customer.MeterNumber)
{
strMeterDetails = mtr.Make + " " + mtr.Model + " (Mtr Size: " + mtr.MeterSize + ")";
break;
}
}
ViewBag.MeterDetails = strMeterDetails;
string strAccountType = string.Empty;
foreach (var type in db.AccountsTypes)
{
if(type.TypeCode == customer.AccountType)
{
strAccountType = type.TypeCode + " - " + type.AccountType;
break;
}
}
ViewBag.AccountType = strAccountType;
return View(customer);
}
// GET: Customers/Create
public ActionResult Create()
{
List<SelectListItem> acntsTypes = new List<SelectListItem>();
foreach (var type in db.AccountsTypes)
{
acntsTypes.Add(new SelectListItem() { Text = type.TypeCode + " - " + type.AccountType, Value = type.TypeCode });
}
ViewBag.AccountType = acntsTypes;
return View();
}
// POST: Customers/Create
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "CustomerId,AccountNumber,AccountName,MeterNumber,AccountType,Address,City,County,State,ZIPCode")] Customer customer)
{
if (ModelState.IsValid)
{
db.Customers.Add(customer);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(customer);
}
// GET: Customers/Edit/5
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Customer customer = db.Customers.Find(id);
List<SelectListItem> acntsTypes = new List<SelectListItem>();
foreach (var type in db.AccountsTypes)
{
acntsTypes.Add(new SelectListItem() { Text = type.TypeCode + " - " + type.AccountType, Value = type.TypeCode, Selected = (customer.AccountType == type.TypeCode) });
}
ViewBag.AccountType = acntsTypes;
if (customer == null)
{
return HttpNotFound();
}
return View(customer);
}
// POST: Customers/Edit/5
// To protect from overposting attacks, enable the specific properties you want to bind to, for
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "CustomerId,AccountNumber,AccountName,MeterNumber,AccountType,Address,City,County,State,ZIPCode")] Customer customer)
{
if (ModelState.IsValid)
{
db.Entry(customer).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(customer);
}
// GET: Customers/Delete/5
public ActionResult Delete(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Customer customer = db.Customers.Find(id);
string strMeterDetails = string.Empty;
foreach (var mtr in db.WaterMeters)
{
if (mtr.MeterNumber == customer.MeterNumber)
{
strMeterDetails = mtr.Make + " " + mtr.Model + " (Mtr Size: " + mtr.MeterSize + ")";
break;
}
}
ViewBag.MeterDetails = strMeterDetails;
string strAccountType = string.Empty;
foreach (var type in db.AccountsTypes)
{
if (type.TypeCode == customer.AccountType)
{
strAccountType = type.TypeCode + " - " + type.AccountType;
break;
}
}
ViewBag.AccountType = strAccountType;
if (customer == null)
{
return HttpNotFound();
}
return View(customer);
}
// POST: Customers/Delete/5
[HttpPost, ActionName("Delete")]
[ValidateAntiForgeryToken]
public ActionResult DeleteConfirmed(int id)
{
Customer customer = db.Customers.Find(id);
db.Customers.Remove(customer);
db.SaveChanges();
return RedirectToAction("Index");
}
protected override void Dispose(bool disposing)
{
if (disposing)
{
db.Dispose();
}
base.Dispose(disposing);
}
}
}@model IEnumerable<StellarWaterPoint11.Models.Customer>
@{
ViewBag.Title = "Customers";
}
<h2 class="common-font fw-bold text-center">Customers</h2>
<hr />
<table class="table common-font table-striped">
<tr>
<th class="text-center">@Html.DisplayNameFor(model => model.CustomerId)</th>
<th>@Html.DisplayNameFor(model => model.AccountNumber)</th>
<th>@Html.DisplayNameFor(model => model.AccountName)</th>
<th>@Html.DisplayNameFor(model => model.MeterNumber)</th>
<th>@Html.DisplayNameFor(model => model.AccountType)</th>
<th>@Html.DisplayNameFor(model => model.Address)</th>
<th>@Html.DisplayNameFor(model => model.City)</th>
<th>@Html.DisplayNameFor(model => model.County)</th>
<th>@Html.DisplayNameFor(model => model.State)</th>
<th>@Html.DisplayNameFor(model => model.ZIPCode)</th>
<th>@Html.ActionLink("Create Customer Account", "Create")</th>
</tr>
@foreach (var item in Model) {
<tr>
<td class="text-center">@Html.DisplayFor(modelItem => item.CustomerId)</td>
<td>@Html.DisplayFor(modelItem => item.AccountNumber)</td>
<td>@Html.DisplayFor(modelItem => item.AccountName)</td>
<td>@Html.DisplayFor(modelItem => item.MeterNumber)</td>
<td>@Html.DisplayFor(modelItem => item.AccountType)</td>
<td>@Html.DisplayFor(modelItem => item.Address)</td>
<td>@Html.DisplayFor(modelItem => item.City)</td>
<td>@Html.DisplayFor(modelItem => item.County)</td>
<td>@Html.DisplayFor(modelItem => item.State)</td>
<td>@Html.DisplayFor(modelItem => item.ZIPCode)</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id = item.CustomerId }) |
@Html.ActionLink("Details", "Details", new { id = item.CustomerId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.CustomerId })
</td>
</tr>
}
</table>
A Customer Account
.
Practical Learning: Creating Water Meters
@model StellarWaterPoint11.Models.Customer
@{
ViewBag.Title = "Create Customer";
}
<h2 class="common-font fw-bold text-center">Create Customer Account</h2>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal common-font encloser-small">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row mb-2">
@Html.LabelFor(model => model.AccountNumber, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.AccountNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AccountNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.AccountName, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.AccountName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AccountName, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.MeterNumber, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.MeterNumber, new { htmlAttributes = new { @class = "form-control", id = "mtrNbr" } })
@Html.ValidationMessageFor(model => model.MeterNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
<label class="col-form-label col-sm-4">Meter Details</label>
<div class="col-sm-8">
<span id="mtrDetails" class="form-control" style="border: 1px solid #FFF;"></span>
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.AccountType, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.DropDownList("AccountType", ViewBag.AccountType as SelectList, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.AccountType, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.County, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.County, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.County, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.ZIPCode, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.ZIPCode, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ZIPCode, "", new { @class = "text-danger" })
</div>
</div>
<hr />
<div class="row mb-2">
<label class="control-label col-md-5">
@Html.ActionLink("Customers", "Index", null, htmlAttributes: new { @class = "stellar" })
</label>
<div class="col-md-offset-2 col-sm-7 text-center">
<input type="submit" value="Save Customer Account" class="btn btn-primary" />
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$("#mtrNbr").blur(function (event) {
$.ajax({
method: "GET",
dataType: "json",
url: "/api/WaterMetering",
success: function (data) {
$.each(data, function (index, meter) {
if (meter["MeterNumber"] === $("#mtrNbr").val()) {
$("#mtrDetails").text(meter["Make"] + " " + meter["Model"] + " (" + meter["MeterSize"] + ")");
} // if
}); // $.each
} // Success
}); // $.ajax
}); // Lost Focus Event
}); // Document.Ready
</script>
}
Account #: 9279-570-8394 Account Name: Thomas Stones Meter #: 799-528-461 Account Type: RES - Residential Household Address: 10252 Broward Ave #D4 City: Frederick County: Frederick State: MD ZIP-Code: 21703-4422
| Account # | Account Name | Meter # | Account Type | Address | City | County | State | ZIP-Code |
| 4086-938-4783 | Hernola Dough | 594-827-359 | UUO - Unidentified or Unclassified Type of Organization | 10 10 Hexagonal Drv | Winston | Yoke | Penn | 11402-4411 |
| 7080-583-5947 | Sunny Yard | 827-508-248 | WAT - Water Intensive Business(Laudromat, Hair Salon, Restaurant, etc | 663 Sherry Wood East Street | Shimpstown | Franklin | PA | 17236-2626 |
INSERT INTO Customers(AccountNumber, AccountName, MeterNumber, AccountType, [Address], City, County, [State], ZIPCode)
VALUES(N'2068-258-9486', N'Yollanda Training', N'186-962-805', N'UUO', N'4819 East Munk Street', N'Whitehall', N'Fulton', N'PA', N'17340-1188'),
(NULL, N'First Methodist Congregation', NULL, NULL, N'7702 Charles Road', NULL, NULL, NULL, NULL),
(N'6986-829-3741', N'Eyes Wide', N'208-428-308', N'BUS', N'12087 Avencia Court #4D1', N'Silver Spring', N'Montgomery', N'MD', N'20910-2288'),
(N'4293-802-8506', N'Kelly Davids', N'496-813-794', N'RES', N'938 East Panchot Str', N'Greenwood', N'Sussex', N'DE', N'19950-4242'),
(N'9947-374-2648', N'Marianne Harrington', N'862-715-006', N'RES', N'708 Correta Drv', N'Arlington', NULL, N'VA', N'22222-6060'),
(N'7928-131-4850', NULL, NULL, N'SGO', NULL, N'Washington', NULL, NULL, NULL),
(N'1386-949-2058', N'Watson Country Buffet', N'296-837-495', N'WAT', N'4862 Wellington Street', N'Hammonton', N'Atlantic ', N'NJ', N'08037-2828'),
(N'7943-686-9786', N'Angel Bulzaides', N'394-835-297', N'RES', N'10227 Old Harbor Drv', N'Elkview', N'Kanawha', N'WV', N'25071-5858'),
(N'4820-375-2842', N'Sun Communal', N'392-494-572', N'SGO', N'748 Red Hills Rd', N'Roanoke', NULL, N'VA', N'24012-4824'),
(N'9618-579-2577', N'Gerald Place', N'847-252-246', N'UUO', N'3666 Hanchor Drv', N'Granville', N'Licking', N'OH', N'43023-2777'),
(NULL, N'Astral Sequence', NULL, N'BUS', N'12715 Eastern Gateway', N'Catonsville', N'Baltimore County', NULL, NULL),
(N'6003-386-3955', N'Mandiakandara Marmoudi', N'374-886-284', N'OTH', N'539 Avalon Court', N'Greenwood', N'Sussex', N'DE', N'19950-5550'),
(N'5294-859-7513', N'Jeannette Schiller', N'713-942-058', N'RES', N'10110 Winslow Ave', N'Mercerville', N'Mercer', N'NJ', N'08619-7472'),
(N'9249-379-6848', N'Country West Eatery', N'588-279-663', N'BUS', N'8280 Sligo North Way', N'Albright', N'Preston', N'WV', N'26519-6620'),
(N'5252-757-9595', NULL, N'379-386-979', NULL, N'4992 Preston Street', NULL, NULL, N'OH', NULL),
(N'7080-583-5947', N'Sunny Yard', N'827-508-248', N'WAT', N'663 Sherry Wood East Street', N'Shimpstown', N'Franklin', N'PA', N'17236-2626'),
(N'8027-304-6829', N'Anthony Clarcksons', N'837-806-836', N'RES', N'904 Augusta Drive', N'Blackbird', N'New Castle', N'DE', N'19734-8822'),
(N'6699-396-2905', N'Spencer Reuter', N'649-373-505', N'RES', N'2850 Burnsweak Avenue', N'Silver Spring', N'Montgomery', N'MD', N'20910-4044'),
(N'1827-395-0203', N'Sathyavanthara Khooni', N'470-628-850', N'WAT', N'10331 Chryswell Road', N'Washington', NULL, N'DC', N'20008-2426'),
(NULL, N'Eastern Cage', NULL, NULL, NULL, N'Hammonton', NULL, N'NJ', NULL),
(N'3947-957-4958', N'Patsil Industries', N'747-581-379', N'BUS', N'10348 Larrens Drive', N'Baltimore', N'Baltimore', N'MD', N'21215-2222'),
(N'2836-485-9699', N'Red Oak High School', N'379-386-979', N'SGO', N'442 Donham Road', N'Silver Spring', N'Montgomery', N'MD', N'20910-8822'),
(N'5938-074-5293', N'Park and Roll', N'592-824-957', N'SGO', N'582G Dunhill Avenue', N'Lanham', N'Prince Georges', N'MD', N'20706-8284'),
(N'3028-502-9418', N'Spencer Kershaw', N'186-959-757', N'RES', N'338C Grayson Street', N'Gatchellville', N'York', N'PA', N'17352-6464'),
(NULL, NULL, N'928-317-924', N'BUS', NULL, NULL, NULL, NULL, NULL),
(N'2974-972-8139', N'Paul Arnette', N'295-770-695', N'OTH', N'8127 Bledsoe Str', N'Hyattsville', N'Prince Georges', N'MD', N'20783-5858'),
(N'2758-493-7249', N'Hervey Smile', N'293-924-869', N'WAT', N'12973 Sonaa Street #E42', N'Silver Spring', N'Montgomery', N'MD', N'20910-4488'),
(N'9337-947-3664', NULL, N'649-358-184', N'SGO', NULL, N'Bellefontaine', NULL, N'OH', NULL),
(N'7518-302-6895', N'Grace Brenner', N'207-964-835', N'BUS', N'4299 Peachtree Court', N'Rockville', N'Montgomery', N'MD', N'20853-1888'),
(NULL, N'Jeffrey Maney', NULL, N'RES', NULL, NULL, NULL, NULL, NULL),
(N'7028-405-9381', N'Valley Services', N'306-842-497', N'WAT', N'613 Meadowhill Road', N'Alonzaville', N'Shenandoah', N'VA', N'22664-8080'),
(N'5293-957-3395', N'Wellway Community Center', N'386-468-057', N'RES', N'10484 Greenway Avenue', N'Mt Storm', N'Grant', N'WV', N'26739-7700'),
(N'2038-413-9680', N'Eastern Friandise', N'938-725-869', N'BUS', N'2075 Rose Hills Avenue', N'Washington', NULL, N'DC', N'20004-2626'),
(NULL, N'Amidou Gomah', NULL, N'RES', N'14118 Yellow Burrough Blvd', N'Philadelphia', NULL, N'PA', NULL),
(N'3792-853-6885', N'Department of Public Affairs', N'595-753-147', NULL, NULL, N'Upper Marlboro', N'Prince George County', NULL, NULL),
(N'8282-777-8282', N'Garland Hotel', N'938-275-294', N'BUS', N'4222 Extell Ave', N'Cambridge', NULL, N'MD', N'21613-2288'),
(NULL, N'Single Connection', N'288-427-585', N'BUS', NULL, N'Mansfield', NULL, N'OH', N'44903-3030'),
(N'2499-636-4444', N'Bryanna Spencer', NULL, N'RES', N'6282 Sheppherd Str', NULL, N'Anne Arundel', NULL, NULL),
(N'2842-585-7260', N'District Community Reserves', N'349-725-848', N'SGO', N'3280 Hopewell Street, NE', N'Washington', NULL, NULL, NULL),
(N'9282-794-7937', N'Yashua Yáñés', N'392-494-572', N'RES', N'10214 Monroe Ave', N'Easton', NULL, N'MD', NULL),
(NULL, N'Miguel Altieri', NULL, N'RES', N'10941 Patriot Blvd', N'Crenshaw', N'Jefferson', N'PA', N'15824-6628'),
(N'2847-597-2829', N'Jameson', N'379-386-979', N'WAT', N'7373 Gold Town Rd', NULL, NULL, N'WV', NULL),
(N'6381-748-2222', N'Up Eyes', NULL, N'BUS', N'4149 Deerfield Str', NULL, NULL, NULL, NULL),
(NULL, N'Annette Wald', NULL, N'RES', N'11441 Eastern Friendshi Rd', NULL, NULL, NULL, NULL),
(N'8384-708-2941', N'Department of Environment Affairs', NULL, N'SGO', NULL, NULL, NULL, N'OH', NULL),
(N'3728-138-2947', N'Marie Rath', NULL, NULL, N'8802 Atlantic Ave', NULL, NULL, N'PA', NULL),
(N'1793-857-9413', N'Body Care', NULL, N'WAT', NULL, N'Ocean City', NULL, N'NJ', NULL),
(N'6028-695-2068', N'Ronald Glassman', N'468-359-486', N'BUS', NULL, NULL, NULL, NULL, NULL),
(NULL, NULL, NULL, N'WAT', N'8812 Lawrence Ave', NULL, NULL, N'NW', NULL),
(N'9616-283-7249', NULL, NULL, N'SGO', N'13006 Blueberry Ave', NULL, NULL, N'MD', NULL),
(N'2829-516-8353', N'Richard Eghert', NULL, N'RES', N'662 Placido Road', NULL, NULL, NULL, NULL);
GOThe Details of a Customer Account
.
Practical Learning: Viewing the Details of a Customer Account
@model StellarWaterPoint11.Models.Customer
@{
ViewBag.Title = "Customer Details";
}
<h2 class="common-font fw-bold text-center">Customer Account Details</h2>
<hr />
<div class="common-font encloser-medium">
<table class="table table-striped common-font">
<tr>
<th>@Html.DisplayNameFor(model => model.CustomerId)</th>
<td>@Html.DisplayFor(model => model.CustomerId)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.AccountNumber)</th>
<td>@Html.DisplayFor(model => model.AccountNumber)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.AccountName)</th>
<td>@Html.DisplayFor(model => model.AccountName)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.MeterNumber)</th>
<td>@Html.DisplayFor(model => model.MeterNumber)</td>
</tr>
<tr>
<th>Meter Details</th>
<td>@ViewBag.MeterDetails</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.AccountType)</th>
<td>@ViewBag.AccountType</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.Address)</th>
<td>@Html.DisplayFor(model => model.Address)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.City)</th>
<td>@Html.DisplayFor(model => model.City)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.County)</th>
<td>@Html.DisplayFor(model => model.County)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.State)</th>
<td>@Html.DisplayFor(model => model.State)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.ZIPCode)</th>
<td>@Html.DisplayFor(model => model.ZIPCode)</td>
</tr>
</table>
<hr />
<p class="text-center">
@Html.ActionLink("Edit/Update Customer Account", "Edit",
new { id = Model.CustomerId },
htmlAttributes: new { @class = "edd" }) ::
@Html.ActionLink("Customers Accounts", "Index", null,
htmlAttributes: new { @class = "edd" })
</p>
</div>
Updating a Customer Account
.
Practical Learning: Updating a Customer Account
@model StellarWaterPoint11.Models.Customer
@{
ViewBag.Title = "Edit Customer";
}
<h2 class="common-font fw-bold text-center">Edit/Update Customer Account</h2>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal common-font encloser-small">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.CustomerId)
<div class="row mb-2">
@Html.LabelFor(model => model.AccountNumber, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.AccountNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AccountNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.AccountName, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.AccountName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.AccountName, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.MeterNumber, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.MeterNumber, new { htmlAttributes = new { @class = "form-control", id = "mtrNbr" } })
@Html.ValidationMessageFor(model => model.MeterNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
<label class="col-form-label col-sm-4">Meter Details</label>
<div class="col-sm-8">
<span id="mtrDetails" class="form-control" style="border: 1px solid #FFF;"></span>
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.AccountType, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.DropDownList("AccountType", ViewBag.AccountType as SelectList, htmlAttributes: new { @class = "form-control", id = "acntType" })
@Html.ValidationMessageFor(model => model.AccountType, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.Address, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.City, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.City, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.City, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.County, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.County, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.County, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.State, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.State, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.State, "", new { @class = "text-danger" })
</div>
</div>
<div class="row mb-2">
@Html.LabelFor(model => model.ZIPCode, htmlAttributes: new { @class = "col-form-label col-sm-4 fw-bold" })
<div class="col-sm-8">
@Html.EditorFor(model => model.ZIPCode, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.ZIPCode, "", new { @class = "text-danger" })
</div>
</div>
<hr />
<div class="row mb-2">
<label class="control-label col-md-5">
@Html.ActionLink("Customers", "Index", "Index", null, htmlAttributes: new { @class = "edd" })
</label>
<div class="col-md-offset-2 col-sm-7 text-center">
<input type="submit" value="Update Customer Account" class="btn btn-primary" />
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
method: "GET",
dataType: "json",
url: "/api/WaterMetering",
success: function (data) {
$.each(data, function (index, meter) {
if (meter["MeterNumber"] === $("#mtrNbr").val()) {
$("#mtrDetails").text(meter["Make"] + " " + meter["Model"] + " (" + meter["MeterSize"] + ")");
} // if
}); // $.each
} // Success
}); // $.ajax
$("#mtrNbr").blur(function (event) {
$.ajax({
method: "GET",
dataType: "json",
url: "/api/WaterMetering",
success: function (data) {
$.each(data, function (index, meter) {
if (meter["MeterNumber"] === $("#mtrNbr").val()) {
$("#mtrDetails").text(meter["Make"] + " " + meter["Model"] + " (" + meter["MeterSize"] + ")");
} // if
}); // $.each
} // Success
}); // $.ajax
}); // Lost Focus Event
}); // Document.Ready
</script>
}
Account Name: Bernotte Doughnuts Meter #: 580-742-825 and click Find Water Meter Account Type: BUS - General Business Address: 10103 Hexagon Drive City: Winterstown County: York State: PA ZIP-Code: 17402-8828
Deleting a Customer Account from the Database
.
Practical Learning: Deleting a Customer Account
@model StellarWaterPoint11.Models.Customer
@{
ViewBag.Title = "Delete Customer";
}
<h2 class="fw-bold text-center common-font">Delete Customer Account</h2>
<hr />
<div class="encloser-medium common-font">
<table class="table table-striped common-font">
<tr>
<th>@Html.DisplayNameFor(model => model.CustomerId)</th>
<td>@Html.DisplayFor(model => model.CustomerId)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.AccountNumber)</th>
<td>@Html.DisplayFor(model => model.AccountNumber)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.AccountName)</th>
<td>@Html.DisplayFor(model => model.AccountName)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.MeterNumber)</th>
<td>@Html.DisplayFor(model => model.MeterNumber)</td>
</tr>
<tr>
<th>Meter Details</th>
<td>@ViewBag.MeterDetails</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.AccountType)</th>
<td>@ViewBag.AccountType</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.Address)</th>
<td>@Html.DisplayFor(model => model.Address)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.City)</th>
<td>@Html.DisplayFor(model => model.City)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.County)</th>
<td>@Html.DisplayFor(model => model.County)</td>
</tr>
<tr>
<th>@Html.DisplayNameFor(model => model.ZIPCode)</th>
<td>@Html.DisplayFor(model => model.ZIPCode)</td>
</tr>
</table>
<hr />
<h3 class="common-font text-center">Are you sure you want to delete this customer's Account?</h3>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="row mb-2">
<div class="col-form-label col-sm-5 fw-bold">
@Html.ActionLink("Customers Accounts", "Index", null, htmlAttributes: new { @class = "stellar" })
</div>
<div class="col-sm-7 text-center">
<input type="submit" value="Yes, delete this Customer's Account" class="btn btn-primary" />
</div>
</div>
}
</div>
Water Bills
Introduction
.
Practical Learning: Introducing Water Bills
namespace StellarWaterPoint11.Models
{
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
public partial class WaterBill
{
[Key]
[DisplayName("Water Bill Id")]
public int WaterBillId { get; set; }
[DisplayName("Bill #")]
public int BillNumber { get; set; }
[Required]
[StringLength(15)]
[DisplayName("Account #")]
public string AccountNumber { get; set; }
[Column(TypeName = "date")]
[DisplayName("Meter Reading Start Date")]
public DateTime? MeterReadingStartDate { get; set; }
[Column(TypeName = "date")]
[DisplayName("Meter Reading End Date")]
public DateTime? MeterReadingEndDate { get; set; }
[DisplayName("Billing Days")]
public int? BillingDays { get; set; }
[DisplayName("Counter Reading Start")]
public int? CounterReadingStart { get; set; }
[DisplayName("Counter Reading End")]
public int? CounterReadingEnd { get; set; }
[DisplayName("Total HCF")]
public int? TotalHCF { get; set; }
[DisplayName("Total Gallons")]
public int? TotalGallons { get; set; }
[DisplayName("First Tier Consumption")]
public decimal? FirstTierConsumption { get; set; }
[DisplayName("Second Tier Consumption")]
public decimal? SecondTierConsumption { get; set; }
[DisplayName("Last Tier Consumption")]
public decimal? LastTierConsumption { get; set; }
[DisplayName("Water Charges")]
public decimal? WaterCharges { get; set; }
[DisplayName("Sewer Charges")]
public decimal? SewerCharges { get; set; }
[DisplayName("Environment Charges")]
public decimal? EnvironmentCharges { get; set; }
[DisplayName("Service Charges")]
public decimal? ServiceCharges { get; set; }
[DisplayName("Total Charges")]
public decimal? TotalCharges { get; set; }
[DisplayName("Local Taxes")]
public decimal? LocalTaxes { get; set; }
[DisplayName("State Taxes")]
public decimal? StateTaxes { get; set; }
[Column(TypeName = "date")]
[DisplayName("Payment Due Date")]
public DateTime? PaymentDueDate { get; set; }
[DisplayName("Amount Due")]
public decimal? AmountDue { get; set; }
[Column(TypeName = "date")]
[DisplayName("Late Payment Due Date")]
public DateTime? LatePaymentDueDate { get; set; }
[DisplayName("Late Amount Due")]
public decimal? LateAmountDue { get; set; }
}
}@model IEnumerable<StellarWaterPoint5.Models.WaterBill>
@{
ViewBag.Title = "Water Bills";
}
<div class="push-down">
<h2>Customers Water Bills</h2>
</div>
<hr />
<table class="table common-font table-striped">
<tr>
<th class="text-center">@Html.DisplayNameFor(model => model.WaterBillId)</th>
<th class="text-center">@Html.DisplayNameFor(model => model.InvoiceNumber)</th>
<th class="text-center">@Html.DisplayNameFor(model => model.AccountNumber)</th>
<th class="text-center">@Html.DisplayNameFor(model => model.MeterReadingStartDate)</th>
<th class="text-center">@Html.DisplayNameFor(model => model.MeterReadingEndDate)</th>
<th>@Html.DisplayNameFor(model => model.BillingDays)</th>
<th>@Html.DisplayNameFor(model => model.CounterReadingStart)</th>
<th>@Html.DisplayNameFor(model => model.CounterReadingEnd)</th>
<th>@Html.DisplayNameFor(model => model.TotalHCF)</th>
<th>@Html.DisplayNameFor(model => model.TotalGallons)</th>
<th>@Html.DisplayNameFor(model => model.First15HCF)</th>
<th>@Html.DisplayNameFor(model => model.Next10HCF)</th>
<th>@Html.DisplayNameFor(model => model.RemainingHCF)</th>
<th>@Html.DisplayNameFor(model => model.SewerCharges)</th>
<th>@Html.DisplayNameFor(model => model.StormCharges)</th>
<th>@Html.DisplayNameFor(model => model.WaterUsageCharges)</th>
<th>@Html.DisplayNameFor(model => model.TotalCharges)</th>
<th>@Html.DisplayNameFor(model => model.LocalTaxes)</th>
<th>@Html.DisplayNameFor(model => model.StateTaxes)</th>
<th>@Html.DisplayNameFor(model => model.PaymentDueDate)</th>
<th>@Html.DisplayNameFor(model => model.AmountDue)</th>
<th class="text-center">@Html.DisplayNameFor(model => model.LatePaymentDueDate)</th>
<th>@Html.DisplayNameFor(model => model.LateAmountDue)</th>
<th>@Html.ActionLink("New Water Bill", "Create", null, htmlAttributes: new { @class = "water-nav" })</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td class="text-center">@Html.DisplayFor(modelItem => item.WaterBillId)</td>
<td>@Html.DisplayFor(modelItem => item.InvoiceNumber)</td>
<td class="text-center">@Html.DisplayFor(modelItem => item.AccountNumber)</td>
<td class="text-center">@Html.DisplayFor(modelItem => item.MeterReadingStartDate)</td>
<td class="text-center">@Html.DisplayFor(modelItem => item.MeterReadingEndDate)</td>
<td>@Html.DisplayFor(modelItem => item.BillingDays)</td>
<td>@Html.DisplayFor(modelItem => item.CounterReadingStart)</td>
<td>@Html.DisplayFor(modelItem => item.CounterReadingEnd)</td>
<td>@Html.DisplayFor(modelItem => item.TotalHCF)</td>
<td>@Html.DisplayFor(modelItem => item.TotalGallons)</td>
<td>@Html.DisplayFor(modelItem => item.First15HCF)</td>
<td>@Html.DisplayFor(modelItem => item.Next10HCF)</td>
<td>@Html.DisplayFor(modelItem => item.RemainingHCF)</td>
<td>@Html.DisplayFor(modelItem => item.SewerCharges)</td>
<td>@Html.DisplayFor(modelItem => item.StormCharges)</td>
<td>@Html.DisplayFor(modelItem => item.WaterUsageCharges)</td>
<td>@Html.DisplayFor(modelItem => item.TotalCharges)</td>
<td>@Html.DisplayFor(modelItem => item.LocalTaxes)</td>
<td>@Html.DisplayFor(modelItem => item.StateTaxes)</td>
<td>@Html.DisplayFor(modelItem => item.PaymentDueDate)</td>
<td>@Html.DisplayFor(modelItem => item.AmountDue)</td>
<td class="text-center">@Html.DisplayFor(modelItem => item.LatePaymentDueDate)</td>
<td>@Html.DisplayFor(modelItem => item.LateAmountDue)</td>
<td>
@Html.ActionLink("Update", "Edit", new { id = item.WaterBillId }) ::
@Html.ActionLink("Review", "Details", new { id = item.WaterBillId }) ::
@Html.ActionLink("Delete", "Delete", new { id = item.WaterBillId })
</td>
</tr>
}
</table>@model StellarWaterPoint5.Models.WaterBill
@{
ViewBag.Title = "Water Bill Details";
}
<div class="push-down">
<h2>Water Bill Details</h2>
</div>
<hr />
<div class="containment">
<dl class="dl-horizontal common-font cream">
<dt>@Html.DisplayNameFor(model => model.WaterBillId)</dt>
<dd>@Html.DisplayFor(model => model.WaterBillId)</dd>
<dt>@Html.DisplayNameFor(model => model.InvoiceNumber)</dt>
<dd>@Html.DisplayFor(model => model.InvoiceNumber)</dd>
<dt>@Html.DisplayNameFor(model => model.AccountNumber)</dt>
<dd>@Html.DisplayFor(model => model.AccountNumber)</dd>
<dt>@Html.DisplayNameFor(model => model.MeterReadingStartDate)</dt>
<dd>@Html.DisplayFor(model => model.MeterReadingStartDate)</dd>
<dt>@Html.DisplayNameFor(model => model.MeterReadingEndDate)</dt>
<dd>@Html.DisplayFor(model => model.MeterReadingEndDate)</dd>
<dt>@Html.DisplayNameFor(model => model.BillingDays)</dt>
<dd>@Html.DisplayFor(model => model.BillingDays)</dd>
<dt>@Html.DisplayNameFor(model => model.CounterReadingStart)</dt>
<dd>@Html.DisplayFor(model => model.CounterReadingStart)</dd>
<dt>@Html.DisplayNameFor(model => model.CounterReadingEnd)</dt>
<dd>@Html.DisplayFor(model => model.CounterReadingEnd)</dd>
<dt>@Html.DisplayNameFor(model => model.TotalHCF)</dt>
<dd>@Html.DisplayFor(model => model.TotalHCF)</dd>
<dt>@Html.DisplayNameFor(model => model.TotalGallons)</dt>
<dd>@Html.DisplayFor(model => model.TotalGallons)</dd>
<dt>@Html.DisplayNameFor(model => model.First15HCF)</dt>
<dd>@Html.DisplayFor(model => model.First15HCF)</dd>
<dt>@Html.DisplayNameFor(model => model.Next10HCF)</dt>
<dd>@Html.DisplayFor(model => model.Next10HCF)</dd>
<dt>@Html.DisplayNameFor(model => model.RemainingHCF)</dt>
<dd>@Html.DisplayFor(model => model.RemainingHCF)</dd>
<dt>@Html.DisplayNameFor(model => model.SewerCharges)</dt>
<dd>@Html.DisplayFor(model => model.SewerCharges)</dd>
<dt>@Html.DisplayNameFor(model => model.StormCharges)</dt>
<dd>@Html.DisplayFor(model => model.StormCharges)</dd>
<dt>@Html.DisplayNameFor(model => model.WaterUsageCharges)</dt>
<dd>@Html.DisplayFor(model => model.WaterUsageCharges)</dd>
<dt>@Html.DisplayNameFor(model => model.TotalCharges)</dt>
<dd>@Html.DisplayFor(model => model.TotalCharges)</dd>
<dt>@Html.DisplayNameFor(model => model.LocalTaxes)</dt>
<dd>@Html.DisplayFor(model => model.LocalTaxes)</dd>
<dt>@Html.DisplayNameFor(model => model.StateTaxes)</dt>
<dd>@Html.DisplayFor(model => model.StateTaxes)</dd>
<dt>@Html.DisplayNameFor(model => model.PaymentDueDate)</dt>
<dd>@Html.DisplayFor(model => model.PaymentDueDate)</dd>
<dt>@Html.DisplayNameFor(model => model.AmountDue)</dt>
<dd>@Html.DisplayFor(model => model.AmountDue)</dd>
<dt>@Html.DisplayNameFor(model => model.LatePaymentDueDate)</dt>
<dd>@Html.DisplayFor(model => model.LatePaymentDueDate)</dd>
<dt>@Html.DisplayNameFor(model => model.LateAmountDue)</dt>
<dd>@Html.DisplayFor(model => model.LateAmountDue)</dd>
</dl>
</div>
<p class="text-center">
@Html.ActionLink("Edit", "Edit", new { id = Model.WaterBillId },
htmlAttributes: new { @class = "water-nav" }) <span class="cream">::</span>
@Html.ActionLink("Customers Water Bills", "Index", null, new { @class = "water-nav" })
</p>@model StellarWaterPoint5.Models.WaterBill
@{
ViewBag.Title = "Create Water Bill";
}
<div class="push-down">
<h2>Prepare Customer Water Bill</h2>
</div>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.InvoiceNumber, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-8">
@Html.TextBox("InvoiceNumber", ViewData["InvoiceNumber"] as string, htmlAttributes: new { @class = "form-control" })
@Html.ValidationMessageFor(model => model.InvoiceNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.AccountNumber, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-8">
@Html.EditorFor(model => model.AccountNumber, new { htmlAttributes = new { @class = "form-control", id = "acntNbr" } })
@Html.ValidationMessageFor(model => model.AccountNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 cream">Customer Name</label>
<div class="col-md-6">
<span class="form-control" id="custName"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 cream">Address</label>
<div class="col-md-6">
<span class="form-control" id="adrs"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-125">
<span class="form-control" id="city"></span>
</div>
<div class="col-md-125">
<span class="form-control" id="county"></span>
</div>
<div class="col-md-125">
<span class="form-control" id="state"></span>
</div>
<div class="col-md-125">
<span class="form-control" id="zip"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 cream">Meter Details</label>
<div class="col-md-125">
<span class="form-control" id="mtrNbr"></span>
</div>
<div class="col-md-375">
<span class="form-control" id="meterDetails"></span>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.MeterReadingStartDate, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-2">
@Html.EditorFor(model => model.MeterReadingStartDate,
new { htmlAttributes = new { @class = "form-control", id = "mrsd"} })
@Html.ValidationMessageFor(model => model.MeterReadingStartDate, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.MeterReadingEndDate, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.MeterReadingEndDate,
new { htmlAttributes = new { @class = "form-control", id = "mred", type = "date" } })
@Html.ValidationMessageFor(model => model.MeterReadingEndDate, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.BillingDays, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.BillingDays, new { htmlAttributes = new { @class = "form-control", id = "days" } })
@Html.ValidationMessageFor(model => model.BillingDays, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CounterReadingStart, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-2">
@Html.EditorFor(model => model.CounterReadingStart, new { htmlAttributes = new { @class = "form-control", id = "crs" } })
@Html.ValidationMessageFor(model => model.CounterReadingStart, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.CounterReadingEnd, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.CounterReadingEnd, new { htmlAttributes = new { @class = "form-control", id = "cre" } })
@Html.ValidationMessageFor(model => model.CounterReadingEnd, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.TotalHCF, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.TotalHCF,
new { htmlAttributes = new { @class = "form-control", id = "thcf" } })
@Html.ValidationMessageFor(model => model.TotalHCF, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-2"> </div>
<label class="control-label col-md-125"> </label>
<div class="col-md-125"> </div>
@Html.LabelFor(model => model.TotalGallons, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.TotalGallons, new { htmlAttributes = new { @class = "form-control", id = "gallons" } })
@Html.ValidationMessageFor(model => model.TotalGallons, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.First15HCF, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-2">
@Html.EditorFor(model => model.First15HCF, new { htmlAttributes = new { @class = "form-control", id = "f15HCF" } })
@Html.ValidationMessageFor(model => model.First15HCF, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Next10HCF, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.Next10HCF,
new { htmlAttributes = new { @class = "form-control", id = "next10HCF" } })
@Html.ValidationMessageFor(model => model.Next10HCF, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.RemainingHCF, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.RemainingHCF,
new { htmlAttributes = new { @class = "form-control", id = "remHCF" } })
@Html.ValidationMessageFor(model => model.RemainingHCF, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.SewerCharges, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-2">
@Html.EditorFor(model => model.SewerCharges,
new { htmlAttributes = new { @class = "form-control", id = "sewerCharges" } })
@Html.ValidationMessageFor(model => model.SewerCharges, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.StormCharges, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.StormCharges,
new { htmlAttributes = new { @class = "form-control", id = "stormCharges" } })
@Html.ValidationMessageFor(model => model.StormCharges, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.WaterUsageCharges, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.WaterUsageCharges,
new { htmlAttributes = new { @class = "form-control", id = "wuc" } })
@Html.ValidationMessageFor(model => model.WaterUsageCharges, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-2"> </div>
<label class="control-label col-md-125"> </label>
<div class="col-md-125"> </div>
@Html.LabelFor(model => model.TotalCharges, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.TotalCharges,
new { htmlAttributes = new { @class = "form-control", id = "totalCharges" } })
@Html.ValidationMessageFor(model => model.TotalCharges, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-2"> </div>
@Html.LabelFor(model => model.LocalTaxes, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.LocalTaxes,
new { htmlAttributes = new { @class = "form-control", id = "localTaxes" } })
@Html.ValidationMessageFor(model => model.LocalTaxes, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.StateTaxes, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.StateTaxes,
new { htmlAttributes = new { @class = "form-control", id = "stateTaxes" } })
@Html.ValidationMessageFor(model => model.StateTaxes, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-2"> </div>
@Html.LabelFor(model => model.PaymentDueDate, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.PaymentDueDate, new { htmlAttributes = new { @class = "form-control", type = "date" } })
@Html.ValidationMessageFor(model => model.PaymentDueDate, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.AmountDue, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.AmountDue,
new { htmlAttributes = new { @class = "form-control", id = "amtDue" } })
@Html.ValidationMessageFor(model => model.AmountDue, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="col-md-4 cream"> </label>
<div class="col-md-2"> </div>
@Html.LabelFor(model => model.LatePaymentDueDate, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.LatePaymentDueDate,
new { htmlAttributes = new { @class = "form-control", type = "date" } })
@Html.ValidationMessageFor(model => model.LatePaymentDueDate, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.LateAmountDue, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.LateAmountDue,
new { htmlAttributes = new { @class = "form-control", id = "lateAmtDue" } })
@Html.ValidationMessageFor(model => model.LateAmountDue, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5">
@Html.ActionLink("Water Bills", "Index", null, htmlAttributes: new { @class = "water-nav" })
</label>
<div class="col-md-7">
<input type="submit" value="Save this Water Bill" class="btn btn-primary" />
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$("#acntNbr").blur(function (event) {
$.ajax({
method: "GET",
dataType: "json",
url: "/api/Customers",
success: function (data) {
$.each(data, function (index, client) {
if (client["AccountNumber"] === $("#acntNbr").val()) {
$("#mtrNbr").text(client["MeterNumber"]);
$("#custName").text(client["FirstName"] + " " + client["LastName"]);
$("#adrs").text(client["Address"]);
$("#city").text(client["City"]);
$("#county").text(client["County"]);
$("#state").text(client["State"]);
$("#zip").text(client["ZIPCode"]);
} // if
}); // $.each
} // Success
}); // $.ajax
$.ajax({
method: "GET",
dataType: "json",
url: "/api/WaterMeters",
success: function (data) {
$.each(data, function (index, meter) {
if (meter["MeterNumber"] === $("#mtrNbr").text()) {
$("#meterDetails").text(meter["Make"] + " " + meter["Model"] + " (" + meter["MeterSize"] + ")");
$("#mrsd").val(meter["DateLastUpdate"]);
$("#crs").val(meter["CounterValue"]);
} // if
}); // $.each
} // Success
}); // $.ajax
$.ajax({
method: "GET",
dataType: "json",
url: "/api/WaterBills",
success: function (data) {
$.each(data, function (index, invoice) {
if (invoice["AccountNumber"] === $("#acntNbr").val()) {
$("#mrsd").val(invoice["MeterReadingEndDate"]);
$("#crs").val(invoice["CounterReadingEnd"]);
} // if
}); // $.each
} // Success
}); // $.ajax
$("#mred").change(function (event) {
var meterReadingStartDate = Date.parse($("#mrsd").val());
var meterReadingEndDate = Date.parse($("#mred").val());
var days = (meterReadingEndDate - meterReadingStartDate) / 86400000;
$("#days").val(days.toFixed());
}); // Meter Reading End Date Lost Focus
$("#cre").blur(function (event) {
const counterReadingStart = parseInt($("#crs").val());
const counterReadingEnd = parseInt($("#cre").val());
const totalHCF = counterReadingEnd - counterReadingStart;
const gallons = totalHCF * 748; // 748.05
var first15HCF = totalHCF * 3.612;
var next10HCF = 0, remainingHCF = 0;
if (totalHCF <= 15) {
first15HCF = totalHCF * 3.612;
next10HCF = 0;
remainingHCF = 0;
}
else if (totalHCF <= 25) {
first15HCF = 15 * 3.612;
next10HCF = (totalHCF - 15) * 3.918;
remainingHCF = 0;
}
else {
first15HCF = 15 * 3.612;
next10HCF = 10 * 3.918;
remainingHCF = (totalHCF - 25) * 2.2763;
}
const waterUsageCharges = first15HCF + next10HCF + remainingHCF;
const sewerCharges = waterUsageCharges * 0.252;
const stormCharges = waterUsageCharges * 0.0025;
const totalCharges = waterUsageCharges + sewerCharges + stormCharges;
const localTaxes = totalCharges * 0.0152;
const stateTaxes = totalCharges * 0.005;
const amountDue = totalCharges + localTaxes + stateTaxes;
$("#thcf").val(totalHCF.toFixed());
$("#gallons").val(gallons.toFixed());
$("#amtDue").val(amountDue.toFixed(2));
$("#f15HCF").val(first15HCF.toFixed(2));
$("#next10HCF").val(next10HCF.toFixed(2));
$("#remHCF").val(remainingHCF.toFixed(2));
$("#wuc").val(waterUsageCharges.toFixed(2));
$("#stateTaxes").val(stateTaxes.toFixed(2));
$("#localTaxes").val(localTaxes.toFixed(2));
$("#sewerCharges").val(sewerCharges.toFixed(2));
$("#stormCharges").val(stormCharges.toFixed(2));
$("#totalCharges").val(totalCharges.toFixed(2));
$("#lateAmtDue").val((amountDue + 8.95).toFixed(2));
}); // Counter Reading End Lost Focus
}); // Lost Focus Event
}); // Document.Ready
</script>
}@model StellarWaterPoint5.Models.WaterBill
@{
ViewBag.Title = "Edit Water Bill";
}
<div class="push-down">
<h2>Edit or Process Process Water Bill</h2>
</div>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.HiddenFor(model => model.WaterBillId)
<div class="form-group">
@Html.LabelFor(model => model.InvoiceNumber, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-8">
@Html.EditorFor(model => model.InvoiceNumber, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.InvoiceNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.AccountNumber, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-8">
@Html.EditorFor(model => model.AccountNumber, new { htmlAttributes = new { @class = "form-control", id = "acntNbr" } })
@Html.ValidationMessageFor(model => model.AccountNumber, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 cream">Customer Name</label>
<div class="col-md-6">
<span class="form-control" id="custName"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 cream">Address</label>
<div class="col-md-6">
<span class="form-control" id="adrs"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-125">
<span class="form-control" id="city"></span>
</div>
<div class="col-md-125">
<span class="form-control" id="county"></span>
</div>
<div class="col-md-125">
<span class="form-control" id="state"></span>
</div>
<div class="col-md-125">
<span class="form-control" id="zip"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4 cream">Meter Details</label>
<div class="col-md-125">
<span class="form-control" id="mtrNbr"></span>
</div>
<div class="col-md-375">
<span class="form-control" id="meterDetails"></span>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.MeterReadingStartDate, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-2">
@Html.EditorFor(model => model.MeterReadingStartDate,
new { htmlAttributes = new { @class = "form-control", id = "mrsd"} })
@Html.ValidationMessageFor(model => model.MeterReadingStartDate, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.MeterReadingEndDate, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.MeterReadingEndDate,
new { htmlAttributes = new { @class = "form-control", id = "mred", type = "date" } })
@Html.ValidationMessageFor(model => model.MeterReadingEndDate, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.BillingDays, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.BillingDays, new { htmlAttributes = new { @class = "form-control", id = "days" } })
@Html.ValidationMessageFor(model => model.BillingDays, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.CounterReadingStart, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-2">
@Html.EditorFor(model => model.CounterReadingStart, new { htmlAttributes = new { @class = "form-control", id = "crs" } })
@Html.ValidationMessageFor(model => model.CounterReadingStart, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.CounterReadingEnd, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.CounterReadingEnd, new { htmlAttributes = new { @class = "form-control", id = "cre" } })
@Html.ValidationMessageFor(model => model.CounterReadingEnd, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.TotalHCF, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.TotalHCF,
new { htmlAttributes = new { @class = "form-control", id = "thcf" } })
@Html.ValidationMessageFor(model => model.TotalHCF, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-2"> </div>
<label class="control-label col-md-125"> </label>
<div class="col-md-125"> </div>
@Html.LabelFor(model => model.TotalGallons, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.TotalGallons, new { htmlAttributes = new { @class = "form-control", id = "gallons" } })
@Html.ValidationMessageFor(model => model.TotalGallons, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.First15HCF, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-2">
@Html.EditorFor(model => model.First15HCF, new { htmlAttributes = new { @class = "form-control", id = "f15HCF" } })
@Html.ValidationMessageFor(model => model.First15HCF, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.Next10HCF, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.Next10HCF,
new { htmlAttributes = new { @class = "form-control", id = "next10HCF" } })
@Html.ValidationMessageFor(model => model.Next10HCF, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.RemainingHCF, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.RemainingHCF,
new { htmlAttributes = new { @class = "form-control", id = "remHCF" } })
@Html.ValidationMessageFor(model => model.RemainingHCF, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.SewerCharges, htmlAttributes: new { @class = "control-label col-md-4 cream" })
<div class="col-md-2">
@Html.EditorFor(model => model.SewerCharges,
new { htmlAttributes = new { @class = "form-control", id = "sewerCharges" } })
@Html.ValidationMessageFor(model => model.SewerCharges, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.StormCharges, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.StormCharges,
new { htmlAttributes = new { @class = "form-control", id = "stormCharges" } })
@Html.ValidationMessageFor(model => model.StormCharges, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.WaterUsageCharges, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.WaterUsageCharges,
new { htmlAttributes = new { @class = "form-control", id = "wuc" } })
@Html.ValidationMessageFor(model => model.WaterUsageCharges, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-2"> </div>
<label class="control-label col-md-125"> </label>
<div class="col-md-125"> </div>
@Html.LabelFor(model => model.TotalCharges, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.TotalCharges,
new { htmlAttributes = new { @class = "form-control", id = "totalCharges" } })
@Html.ValidationMessageFor(model => model.TotalCharges, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-2"> </div>
@Html.LabelFor(model => model.LocalTaxes, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.LocalTaxes,
new { htmlAttributes = new { @class = "form-control", id = "localTaxes" } })
@Html.ValidationMessageFor(model => model.LocalTaxes, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.StateTaxes, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.StateTaxes,
new { htmlAttributes = new { @class = "form-control", id = "stateTaxes" } })
@Html.ValidationMessageFor(model => model.StateTaxes, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-4"> </label>
<div class="col-md-2"> </div>
@Html.LabelFor(model => model.PaymentDueDate, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.PaymentDueDate, new { htmlAttributes = new { @class = "form-control", type = "date" } })
@Html.ValidationMessageFor(model => model.PaymentDueDate, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.AmountDue, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.AmountDue,
new { htmlAttributes = new { @class = "form-control", id = "amtDue" } })
@Html.ValidationMessageFor(model => model.AmountDue, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="col-md-4 cream"> </label>
<div class="col-md-2"> </div>
@Html.LabelFor(model => model.LatePaymentDueDate, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.LatePaymentDueDate,
new { htmlAttributes = new { @class = "form-control", type = "date" } })
@Html.ValidationMessageFor(model => model.LatePaymentDueDate, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => model.LateAmountDue, htmlAttributes: new { @class = "control-label col-md-125 cream" })
<div class="col-md-125">
@Html.EditorFor(model => model.LateAmountDue,
new { htmlAttributes = new { @class = "form-control", id = "lateAmtDue" } })
@Html.ValidationMessageFor(model => model.LateAmountDue, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<label class="control-label col-md-5">
@Html.ActionLink("Water Bills", "Index", null, htmlAttributes: new { @class = "water-nav" })
</label>
<div class="col-md-7">
<input type="submit" value="Save this Water Bill" class="btn btn-primary" />
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
method: "GET",
dataType: "json",
url: "/api/Customers",
success: function (data) {
$.each(data, function (index, client) {
if (client["AccountNumber"] === $("#acntNbr").val()) {
$("#mtrNbr").text(client["MeterNumber"]);
$("#custName").text(client["FirstName"] + " " + client["LastName"]);
$("#adrs").text(client["Address"]);
$("#city").text(client["City"]);
$("#county").text(client["County"]);
$("#state").text(client["State"]);
$("#zip").text(client["ZIPCode"]);
} // if
}); // $.each
} // Success
}); // $.ajax
$.ajax({
method: "GET",
dataType: "json",
url: "/api/WaterMeters",
success: function (data) {
$.each(data, function (index, meter) {
if (meter["MeterNumber"] === $("#mtrNbr").text()) {
$("#meterDetails").text(meter["Make"] + " " + meter["Model"] + " (" + meter["MeterSize"] + ")");
// $("#mrsd").val(meter["DateLastUpdate"]);
// $("#crs").val(meter["CounterValue"]);
} // if
}); // $.each
} // Success
}); // $.ajax
$("#acntNbr").blur(function (event) {
$.ajax({
method: "GET",
dataType: "json",
url: "/api/Customers",
success: function (data) {
$.each(data, function (index, client) {
if (client["AccountNumber"] === $("#acntNbr").val()) {
$("#mtrNbr").text(client["MeterNumber"]);
$("#custName").text(client["FirstName"] + " " + client["LastName"]);
$("#adrs").text(client["Address"]);
$("#city").text(client["City"]);
$("#county").text(client["County"]);
$("#state").text(client["State"]);
$("#zip").text(client["ZIPCode"]);
} // if
}); // $.each
} // Success
}); // $.ajax
$.ajax({
method: "GET",
dataType: "json",
url: "/api/WaterMeters",
success: function (data) {
$.each(data, function (index, meter) {
if (meter["MeterNumber"] === $("#mtrNbr").text()) {
$("#meterDetails").text(meter["Make"] + " " + meter["Model"] + " (" + meter["MeterSize"] + ")");
$("#mrsd").val(meter["DateLastUpdate"]);
$("#crs").val(meter["CounterValue"]);
} // if
}); // $.each
} // Success
}); // $.ajax
$.ajax({
method: "GET",
dataType: "json",
url: "/api/WaterBills",
success: function (data) {
$.each(data, function (index, invoice) {
if (invoice["AccountNumber"] === $("#acntNbr").val()) {
$("#mrsd").val(invoice["MeterReadingEndDate"]);
$("#crs").val(invoice["CounterReadingEnd"]);
} // if
}); // $.each
} // Success
}); // $.ajax
$("#mred").change(function (event) {
var meterReadingStartDate = Date.parse($("#mrsd").val());
var meterReadingEndDate = Date.parse($("#mred").val());
var days = (meterReadingEndDate - meterReadingStartDate) / 86400000;
$("#days").val(days.toFixed());
}); // Meter Reading End Date Lost Focus
$("#cre").blur(function (event) {
const counterReadingStart = parseInt($("#crs").val());
const counterReadingEnd = parseInt($("#cre").val());
const totalHCF = counterReadingEnd - counterReadingStart;
const gallons = totalHCF * 748; // 748.05
var first15HCF = totalHCF * 3.612;
var next10HCF = 0, remainingHCF = 0;
if (totalHCF <= 15) {
first15HCF = totalHCF * 3.612;
next10HCF = 0;
remainingHCF = 0;
}
else if (totalHCF <= 25) {
first15HCF = 15 * 3.612;
next10HCF = (totalHCF - 15) * 3.918;
remainingHCF = 0;
}
else {
first15HCF = 15 * 3.612;
next10HCF = 10 * 3.918;
remainingHCF = (totalHCF - 25) * 2.2763;
}
const waterUsageCharges = first15HCF + next10HCF + remainingHCF;
const sewerCharges = waterUsageCharges * 0.252;
const stormCharges = waterUsageCharges * 0.0025;
const totalCharges = waterUsageCharges + sewerCharges + stormCharges;
const localTaxes = totalCharges * 0.0152;
const stateTaxes = totalCharges * 0.005;
const amountDue = totalCharges + localTaxes + stateTaxes;
$("#thcf").val(totalHCF.toFixed());
$("#gallons").val(gallons.toFixed());
$("#amtDue").val(amountDue.toFixed(2));
$("#f15HCF").val(first15HCF.toFixed(2));
$("#next10HCF").val(next10HCF.toFixed(2));
$("#remHCF").val(remainingHCF.toFixed(2));
$("#wuc").val(waterUsageCharges.toFixed(2));
$("#stateTaxes").val(stateTaxes.toFixed(2));
$("#localTaxes").val(localTaxes.toFixed(2));
$("#sewerCharges").val(sewerCharges.toFixed(2));
$("#stormCharges").val(stormCharges.toFixed(2));
$("#totalCharges").val(totalCharges.toFixed(2));
$("#lateAmtDue").val((amountDue + 8.95).toFixed(2));
}); // Counter Reading End Lost Focus
}); // Lost Focus Event
}); // Document.Ready
</script>
}@model StellarWaterPoint5.Models.WaterBill
@{
ViewBag.Title = "Delete Water Bill";
}
<div class="push-down">
<h2>Delete Water Bill</h2>
</div>
<hr />
<div class="containment">
<dl class="dl-horizontal common-font cream">
<dt>@Html.DisplayNameFor(model => model.WaterBillId)</dt>
<dd>@Html.DisplayFor(model => model.WaterBillId)</dd>
<dt>@Html.DisplayNameFor(model => model.InvoiceNumber)</dt>
<dd>@Html.DisplayFor(model => model.InvoiceNumber)</dd>
<dt>@Html.DisplayNameFor(model => model.AccountNumber)</dt>
<dd>@Html.DisplayFor(model => model.AccountNumber)</dd>
<dt>@Html.DisplayNameFor(model => model.MeterReadingStartDate)</dt>
<dd>@Html.DisplayFor(model => model.MeterReadingStartDate)</dd>
<dt>@Html.DisplayNameFor(model => model.MeterReadingEndDate)</dt>
<dd>@Html.DisplayFor(model => model.MeterReadingEndDate)</dd>
<dt>@Html.DisplayNameFor(model => model.BillingDays)</dt>
<dd>@Html.DisplayFor(model => model.BillingDays)</dd>
<dt>@Html.DisplayNameFor(model => model.CounterReadingStart)</dt>
<dd>@Html.DisplayFor(model => model.CounterReadingStart)</dd>
<dt>@Html.DisplayNameFor(model => model.CounterReadingEnd)</dt>
<dd>@Html.DisplayFor(model => model.CounterReadingEnd)</dd>
<dt>@Html.DisplayNameFor(model => model.TotalHCF)</dt>
<dd>@Html.DisplayFor(model => model.TotalHCF)</dd>
<dt>@Html.DisplayNameFor(model => model.TotalGallons)</dt>
<dd>@Html.DisplayFor(model => model.TotalGallons)</dd>
<dt>@Html.DisplayNameFor(model => model.First15HCF)</dt>
<dd>@Html.DisplayFor(model => model.First15HCF)</dd>
<dt>@Html.DisplayNameFor(model => model.Next10HCF)</dt>
<dd>@Html.DisplayFor(model => model.Next10HCF)</dd>
<dt>@Html.DisplayNameFor(model => model.RemainingHCF)</dt>
<dd>@Html.DisplayFor(model => model.RemainingHCF)</dd>
<dt>@Html.DisplayNameFor(model => model.SewerCharges)</dt>
<dd>@Html.DisplayFor(model => model.SewerCharges)</dd>
<dt>@Html.DisplayNameFor(model => model.StormCharges)</dt>
<dd>@Html.DisplayFor(model => model.StormCharges)</dd>
<dt>@Html.DisplayNameFor(model => model.WaterUsageCharges)</dt>
<dd>@Html.DisplayFor(model => model.WaterUsageCharges)</dd>
<dt>@Html.DisplayNameFor(model => model.TotalCharges)</dt>
<dd>@Html.DisplayFor(model => model.TotalCharges)</dd>
<dt>@Html.DisplayNameFor(model => model.LocalTaxes)</dt>
<dd>@Html.DisplayFor(model => model.LocalTaxes)</dd>
<dt>@Html.DisplayNameFor(model => model.StateTaxes)</dt>
<dd>@Html.DisplayFor(model => model.StateTaxes)</dd>
<dt>@Html.DisplayNameFor(model => model.PaymentDueDate)</dt>
<dd>@Html.DisplayFor(model => model.PaymentDueDate)</dd>
<dt>@Html.DisplayNameFor(model => model.AmountDue)</dt>
<dd>@Html.DisplayFor(model => model.AmountDue)</dd>
<dt>@Html.DisplayNameFor(model => model.LatePaymentDueDate)</dt>
<dd>@Html.DisplayFor(model => model.LatePaymentDueDate)</dd>
<dt>@Html.DisplayNameFor(model => model.LateAmountDue)</dt>
<dd>@Html.DisplayFor(model => model.LateAmountDue)</dd>
</dl>
<h3 class="common-font cream">Are you sure you want to delete or cancel this water bill?</h3>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-actions no-color">
<input type="submit" value="Delete this Water Bill" class="btn btn-primary" /> <span class="cream">::</span>
@Html.ActionLink("Water Bills", "Index", null, htmlAttributes: new { @class = "water-nav" })
</div>
}
</div>Finalizing the Application
Most of the time, it is a good idea to apply a common design to most webpages of a website. In ASP.NET, such a design is created as a layout view.
Practical Learning: Finalizing the Application
| Account # | Meter # | First Name | Last Name | Address | City | County | State | ZIP Code |
| 9279-570-8394 | 799-28-461 | Thomas | Stones | 10252 Broward Ave #D4 | Frederick | Frederick | MD | 21703 |
| 4820-375-2842 | 392-44-572 | Akhil | Koumari | 748 Red Hills Rd | Roanoke | VA | 24012 | |
| 7518-302-6895 | 207-94-835 | Grace | Brenner | 4299 Peachtree Court | Rockville | Montgomery | MD | 20853 |
| 2038-413-9680 | 938-75-869 | Amidou | Gomah | 2075 Rose Hills Ave | Washington | DC | 20004 | |
| 5938-074-5293 | 592-84-957 | Marie | Rath | 582G Dunhill Ave | Lanham | Prince George | MD | 20706 |
Payment Due Date: 08/27/2022 Late Payment Due Date: 09/13/2022
| Invoice # | Account # | Meter Reading End Date | Current Meter Reading | Payment Due Date | Late Payment Due Date |
| 835064 | 4820-375-2842 | 07/31/2022 | 109998 | 08/28/2022 | 09/14/2022 |
| 283746 | 2038-413-9680 | 7/30/2022 | 137975 | 8/27/2022 | 9/13/2022 |
| 575020 | 9279-570-8394 | 08/07/2022 | 6275 | 08/04/2022 | 08/20/2022 |
| 360550 | 7518-302-6895 | 11/07/2022 | 118 | 12/01/2022 | 12/15/2022 |
| 826407 | 2038-413-9680 | 10/27/2022 | 138012 | 11/24/2022 | 12/10/2022 |
|
|
|||
| Home | Copyright © 2005-2025, FunctionX | Wednesday 04 May 2022 | Home |
|
|
|||