001.
<!DOCTYPE html>
002.
<html>
003.
<head>
004.
<meta charset=
"utf-8"
>
005.
<meta http-equiv=
"X-UA-Compatible"
content=
"IE=edge"
>
006.
<meta name=
"viewport"
content=
"width=device-width, initial-scale=1"
>
007.
<title>.: Customer App :. Web API2 Á KnockOutJS</title>
008.
<meta charset=
"utf-8"
/>
009.
<!-- CSS -->
010.
<link href=
"../Content/bootstrap.min.css"
rel=
"stylesheet"
/>
012.
</head>
013.
<body>
014.
<nav class=
"navbar navbar-default navbar-fixed-top"
>
015.
<div class=
"container-fluid"
>
016.
<div class=
"navbar-header"
>
017.
<button type=
"button"
class=
"navbar-toggle collapsed"
data-toggle=
"collapse"
data-target=
"#bs-example-navbar-collapse-1"
aria-expanded=
"false"
>
018.
<span class=
"sr-only"
>Toggle navigation</span>
019.
<span class=
"icon-bar"
></span>
020.
<span class=
"icon-bar"
></span>
021.
<span class=
"icon-bar"
></span>
022.
</button>
023.
<a class=
"navbar-brand"
href=
"#"
>WEB API2 - KnockOutJS</a>
024.
</div> <!-- END HEADER NAV -->
025.
</div> <!-- END CONTAINER -->
026.
</nav><!-- END NAV-->
027.
<div class=
"container"
style=
"margin-top: 7%;"
>
028.
<div class=
"row"
>
029.
<div class=
"col-md-4"
>
030.
<!-- FORM -->
031.
<div class=
"panel panel-default"
>
032.
<div class=
"panel-heading"
> <span class=
"glyphicon glyphicon glyphicon-tag"
aria-hidden=
"true"
></span> <b>Add New Customer</b></div>
033.
<div class=
"panel-body"
>
034.
<form>
035.
<div class=
"form-group"
style=
"display:none;"
>
036.
<label
for
=
"CustomerID"
>Customer ID</label>
037.
<input type=
"text"
id=
"CustomerID"
class=
"form-control"
data-bind=
"value:CustID"
placeholder=
"Customer ID"
/>
038.
</div><!-- END CUSTOMER ID -->
039.
<div class=
"form-group"
>
040.
<label
for
=
"FirstName"
>First Name</label>
041.
<input type=
"text"
id=
"FirstName"
class=
"form-control"
data-bind=
"value:FirstName"
placeholder=
"First Name"
/>
042.
</div><!-- END FIRST NAME -->
043.
<div class=
"form-group"
>
044.
<label
for
=
"LastName"
>Last Name</label>
045.
<input type=
"text"
id=
"LastName"
class=
"form-control"
data-bind=
"value: LastName"
placeholder=
"Last Name"
/>
046.
</div><!-- END LAST NAME -->
047.
<div class=
"form-group"
>
048.
<label
for
=
"Email"
>Email</label>
049.
<input type=
"email"
id=
"Email"
class=
"form-control"
data-bind=
"value: Email"
placeholder=
"Email"
/>
050.
</div> <!-- END EMAIL -->
051.
<div class=
"form-group"
>
052.
<label
for
=
"Country"
>Country</label>
053.
<select class=
"form-control"
data-bind=
"options: CountryList, value: Country, optionsCaption: 'Select your Country ...' "
></select>
054.
</div> <!-- END COUNTRY -->
055.
<button type=
"button"
class=
"btn btn-success"
data-bind=
"click: addNewCustomer"
id=
"Save"
>
056.
<span class=
"glyphicon glyphicon glyphicon-floppy-disk"
aria-hidden=
"true"
></span> Save
057.
</button>
058.
<button type=
"button"
class=
"btn btn-info"
data-bind=
"click: clearFields"
id=
"Clear"
>
059.
<span class=
"glyphicon glyphicon glyphicon-refresh"
aria-hidden=
"true"
></span> Clear
060.
</button>
061.
<button type=
"button"
class=
"btn btn-warning"
data-bind=
"click:updateCustomer "
style=
"display:none;"
id=
"Update"
>
062.
<span class=
"glyphicon glyphicon glyphicon-pencil"
aria-hidden=
"true"
></span> Update Customer
063.
</button>
064.
<button type=
"button"
class=
"btn btn-default"
data-bind=
"click:cancel "
style=
"display:none;"
id=
"Cancel"
>
065.
<span class=
"glyphicon glyphicon glyphicon-remove"
aria-hidden=
"true"
></span> Cancel
066.
</button>
067.
</form> <!-- END FORM -->
068.
</div> <!-- END PANEL BODY-->
069.
</div><!-- END PANEL-->
070.
</div> <!-- END col-md-4 -->
071.
<div class=
"col-md-8"
>
072.
<div class=
"panel panel-default"
>
073.
<div class=
"panel-heading"
><span class=
"glyphicon glyphicon glyphicon-stats"
aria-hidden=
"true"
></span><b> Charting Customer</b> </div>
074.
<div class=
"panel-body"
>
075.
<!-- <img src=
"images/Chart.png"
style=
"width:60%; margin:6px 70px;"
/> -->
076.
<div id=
"line-chart"
style=
"height: 300px;"
></div><br /><br />
077.
</div> <!-- END PANEL-BODY-->
078.
</div> <!-- END PANEL-->
079.
</div> <!-- END col-md-8-->
080.
</div>
081.
<div class=
"row"
>
082.
<div class=
"col-md-12"
>
083.
<div class=
"panel panel-default"
>
084.
<div class=
"panel-heading"
>
085.
<span class=
"glyphicon glyphicon glyphicon-zoom-in"
aria-hidden=
"true"
></span> <b>Customer List </b>
086.
<div class=
"loadingZone"
style=
"color: #000; display:block; float:right; display:none;"
> <img src=
"../images/animated.gif"
/> Refresh Data ...</div>
087.
</div>
088.
<div class=
"panel-body"
>
089.
<table class=
"table table-hover"
>
090.
<thead>
091.
<tr>
092.
<th><span class=
"glyphicon glyphicon glyphicon-eye-open"
aria-hidden=
"true"
></span></th>
093.
<th>
#</th>
094.
<th>First Name</th>
095.
<th>Last Name</th>
096.
<th>Email</th>
097.
<th>Country</th>
098.
<th></th>
099.
</tr>
100.
</thead> <!-- END THEAD -->
101.
<tbody data-bind=
"foreach: customerList"
>
102.
<tr>
103.
<td> <button type=
"button"
class=
"btn btn-default btn-xs"
data-bind=
"click: $root.detailCustomer"
> <span class=
"glyphicon glyphicon glyphicon-eye-open"
aria-hidden=
"true"
></span></button> </td>
104.
<td> <span data-bind=
"text: CustID"
></span> </td>
105.
<td> <span data-bind=
"text: FirstName"
></span></td>
106.
<td> <span data-bind=
"text: LastName"
></span></td>
107.
<td> <span data-bind=
"text: Email"
></span> </td>
108.
<td> <span data-bind=
"text: Country"
></span> </td>
109.
<td>
110.
<button type=
"button"
class=
"btn btn-danger btn-xs"
>
111.
<span class=
"glyphicon glyphicon glyphicon-trash"
aria-hidden=
"true"
data-bind=
"click: $root.deleteCustomer"
></span>
112.
</button>
113.
</td>
114.
</tr>
115.
</tbody> <!-- END TBODY -->
116.
</table> <!-- END TABLE -->
117.
</div>
118.
</div>
119.
</div>
120.
</div>
121.
</div> <!-- END CONTAINER-->
122.
<!-- JS -->
123.
<!-- jQuery (necessary
for
Bootstrap's JavaScript plugins) -->
124.
<script src=
"../Scripts/jquery-3.3.1.min.js"
></script>
125.
<!-- Include all compiled plugins (below), or include individual files as needed -->
126.
<script src=
"../Scripts/bootstrap.min.js"
></script>
127.
<script src=
"../Scripts/knockout-3.4.2.js"
></script>
130.
<!-- app.js-->
131.
<script src=
"../Scripts/KnockoutDemo.js"
></script>
132.
</body>
133.
</html>