Controller:

using PhanMemTinhTienDien.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using PagedList;
using System.Data.Entity.Migrations;

namespace PhanMemTinhTienDien.Controllers
{
public class KhachHangController : Controller
{
TinhTienDienEntities data = new TinhTienDienEntities();
// GET: KhachHang
public ActionResult KHlist(int? page,int? pageSize, string SearchString)
{
var khachHangs = from l in data.TKhachHangs
select l;

if (!String.IsNullOrEmpty(SearchString))
{
khachHangs = khachHangs.Where(s => s.MaKH.Contains(SearchString));
}
if (page == null)
{
page = 1;
}
if (pageSize == null)
{
pageSize = 10;
}
ViewBag.PageSize = pageSize;
/*var TKhachHangs = data.TKhachHangs.ToList();*/
return View(khachHangs.ToList().ToPagedList((int)page, (int)pageSize));
}
public ActionResult KHCreate()
{
return View();
}
[HttpPost]
public ActionResult KHCreate(TKhachHang KH)
{
data.TKhachHangs.Add(KH);
data.SaveChanges();
return RedirectToAction("KHlist");
}
public ActionResult KHEdit( string makh)
{
TKhachHang Kh = data.TKhachHangs.Find(makh);
return View(Kh);
}
[HttpPost]
public ActionResult KHEdit(TKhachHang KH)
 {
TKhachHang K = data.TKhachHangs.Find(KH.MaKH);
K.NgaySinh = KH.NgaySinh;
K.SDT = KH.SDT;
K.DiaChi = KH.DiaChi;
data.SaveChanges();
return RedirectToAction("KHlist");
}
public ActionResult KHDetails( string makh)
{
TKhachHang KH = data.TKhachHangs.Find(makh);
return View(KH);
}
public ActionResult KHDelete(string makh)
{
TKhachHang KH = data.TKhachHangs.Find(makh);
return View(KH);
}
[HttpPost]
public ActionResult KHdelete(string makh)
{
TKhachHang KH = data.TKhachHangs.Find(makh);
data.TKhachHangs.Remove(KH);
data.SaveChanges();
return RedirectToAction("KHlist");
}

}
}

List:
@*@model IEnumerable<PhanMemTinhTienDien.Models.TKhachHang>*@
@using PagedList.Mvc;
@using PagedList;
@model IPagedList<PhanMemTinhTienDien.Models.TKhachHang>
@{
ViewBag.Title = "KHList";
Layout = "~/Views/KhachHang/_LayoutKH.cshtml";
}
<link href="~/Content/bootstrap-grid.min.css" rel="stylesheet" />
<font size="6">
<p>
@Html.ActionLink("Thêm Khách Hàng", "KHCreate", new { @class = " navbar-default -
warning" })
</p>
</font>
<div style="overflow-x:auto;">
<table class="table" border="1" style="border: 1px solid double">
<tr>

<th style="text-align:center;">
<font size="4" color="LightGoldenRodYellow">Mã Khách Hàng</font>
</th>
<th style="text-align:center;">
<font size="4" color="LightGoldenRodYellow">Ngày Sinh</font>
</th>
 <th style="text-align:center;">
<font size="4" color="LightGoldenRodYellow">Địa Chỉ</font>
</th>
<th style="text-align:center">
<font size="4" color="LightGoldenRodYellow">Số Điện Thoại</font>
</th>
<th style="text-align:center" colspan="3">
<font size="4" color="LightGoldenRodYellow">Tùy Chọn</font>
</th>
</tr>
@if (Model != null && Model.Any())
{
var i = 1;
<tbody>
@foreach (var item in Model)
{
<tr>
<td style="text-align:center">
<font color="LightGoldenRodYellow">@Html.DisplayFor(modelItem =>
item.MaKH)</font>
</td>
<td style="text-align:center">
<font color="LightGoldenRodYellow">@String.Format("{0:dd/MM/yyyy}",
item.NgaySinh)</font>
</td>
<td style="text-align:left">
<font color="LightGoldenRodYellow">@Html.DisplayFor(modelItem =>
item.DiaChi)</font>
</td>
<td style="text-align:center">
<font color="LightGoldenRodYellow">@Html.DisplayFor(modelItem =>
item.SDT)</font>
</td>
<td style="background-color:blanchedalmond; font-size:medium">
@Html.ActionLink("Sửa", "KHEdit", new { makh = item.MaKH }, new { @class =
"fa fa-edit text-success" })
</td>
<td style="background-color:blanchedalmond">
@Html.ActionLink("Chi Tiết", "KHDetails", new { makh = item.MaKH }, new
{ @class = "fa fa-dedent text-success" })
</td>
<td style="background-color:blanchedalmond">
@Html.ActionLink("Xóa", "KHDelete", new { makh = item.MaKH }, new
{ @class = "fa fa-archive text-success" })
</td>
</tr>
}

</tbody>
}
<link href="~/Content/bootstrap-grid.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
</table>
<font size="3">
<div style="text-align:left;">
@Html.PagedListPager(Model, page => Url.Action("KHlist",
new { page, pageSize = ViewBag.PageSize}))
</div>
 </font>
</div>

Thêm:

@model PhanMemTinhTienDien.Models.TKhachHang

@{
ViewBag.Title = "Create";
Layout = "~/Views/KhachHang/_LayoutKHCreate.cshtml";
}

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<center><font size="5" style="color:crimson"> Thêm Thông Tin Khách

Hàng</font></center>
<br />
<table border="2" align="center" style="background-color:aquamarine" class="auto-style1"
width="100%" height="100%">
<tr>
<td style="width:145px" align="left"> Mã Khách Hàng</td>
<td style="width: 1000px">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.EditorFor(model => model.MaKH, new { htmlAttributes = new { @class =
"form-control" } })
@Html.ValidationMessageFor(model => model.MaKH, "", new { @class = "text-danger"
})
<td>
</tr>
<tr>
<td style="width:145px" align="left"> Ngày Sinh</td>
<td style="width: 1000px" align="left">
<input type="text" id="dt1" name="NgaySinh" class="form-control"/>
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
@section scripts{
@Scripts.Render("~/budles/jqueryval")
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function () {
$("#dt1").datepicker({ format: 'dd/mm/yyyy' });
});
</script>
}
<td>
</tr>
<tr>
<td style="width:140px" align="left">Địa Chỉ</td>
 <td>
@Html.EditorFor(model => model.DiaChi, new { htmlAttributes = new { @class =
"form-control" } })
@Html.ValidationMessageFor(model => model.DiaChi, "", new { @class = "text-
danger" })
</td>
</tr>
<tr>
<td style="width:140px" align="left">Số Điện Thoại</td>
<td>
@Html.EditorFor(model => model.SDT, new { htmlAttributes = new { @class = "form-
control" } })
@Html.ValidationMessageFor(model => model.SDT, "", new { @class = "text-
danger" })
<td>
</tr>
<tr>
<td colspan="2">
<div class="form-group">
<div class="col-md-7">
<input type="submit" value="Đồng ý" cl ass="btn btn-default" />
</div>
</div>
</td>
<tr>
</table>
}

Xóa:

@model PhanMemTinhTienDien.Models.TKhachHang

@{
ViewBag.Title = "KHDelete";
Layout = "~/Views/KhachHang/_LayoutKHCreate.cshtml";
}
<div>
<center><font size="5" style="color:crimson">Xóa Khách Hàng</font></center><br />
<table border="2" align="center" style="background-color:aquamarine" class="auto-
style1" width="100%" height="100%">
<tr>
<td style="width:145px" align="left"> Mã Khách Hàng</td>
<td align="left">@Html.DisplayFor(model => model.MaKH)</td>
</tr>
<tr>
<td style="width:145px" align="left">Ngày Sinh</td>
<td align="left">@Html.DisplayFor(model => model.NgaySinh)</td>
</tr>
<tr>
<td style="width:145px" align="left">Địa Chỉ</td>
<td align="left">@Html.DisplayFor(model => model.DiaChi)</td>
</tr>
 <tr>
<td style="width:145px" align="left">Số Điện Thoại</td>
<td align="left">@Html.DisplayFor(model => model.SDT)</td>
</tr>
<tr>
<td colspan="2" align="center">
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-actions no-color">
<input type="submit" value="Delete" class="btn btn-default" />
</div>
}
</td>
</tr>
</table>
</div>

Sửa:

@model PhanMemTinhTienDien.Models.TKhachHang

@{
ViewBag.Title = "Edit";
Layout = "~/Views/KhachHang/_LayoutKHCreate.cshtml";
}

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()

<center><font size="5" style="color:crimson"> Sửa Thông Tin Khách Hàng</font></center>

<br />
<table border="2" align="center" style="background-color:aquamarine" class="auto-style1"
width="100%" height="100%">
<tr>
<td style="width:145px" align="left"> Mã Khách Hàng</td>
<td style="width: 1000px" align="left">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
@Html.DisplayFor(model => model.MaKH, new { htmlAttributes = new { @class =
"form-control" } })
@Html.ValidationMessageFor(model => model.MaKH, "", new { @class = "text-danger"
})
<td>
</tr>
<tr>
<td style="width:145px" align="left"> Ngày Sinh</td>
<td style="width: 1000px" align="left">
<input value="@String.Format("{0:dd/MM/yyyy}", Model.NgaySinh)" type="text"
id="dt1" name="NgaySinh" class="form-control" />
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
@section scripts{
 @Scripts.Render("~/budles/jqueryval")
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function () {
$("#dt1").datepicker({ format: 'dd/mm/yyyy' });
});
</script>
}
<td>
</tr>
<tr>
<td style="width:140px" align="left">Địa Chỉ</td>
<td>
@Html.EditorFor(model => model.DiaChi, new { htmlAttributes = new { @class =
"form-control" } })
@Html.ValidationMessageFor(model => model.DiaChi, "", new { @class = "text-
danger" })
</td>
</tr>
<tr>
<td style="width:140px" align="left">Số Điện Thoại</td>
<td>
@Html.EditorFor(model => model.SDT, new { htmlAttributes = new { @class = "form-
control" } })
@Html.ValidationMessageFor(model => model.SDT, "", new { @class = "text-
danger" })
<td>
</tr>
<tr>
<td colspan="2">
<div class="form-group">
<div class="col-md-7">
<input type="submit" value="Đồng ý" cl ass="btn btn-default" />
</div>
</div>
</td>
<tr>
</table>
}

Chi Tiết:
@model PhanMemTinhTienDien.Models.TKhachHang

@{
ViewBag.Title = "KHDetails";
Layout = "~/Views/KhachHang/_LayoutKHCreate.cshtml";
}

<div>
<center><font size="5" style="color:crimson">Chi Tiết Khách Hàng</font></center><br />
<table border="2" align="center" style="background-color:aquamarine" class="auto-style1"
width="100%" height="100%">
<tr>
<td style="width:145px" align="left"> Mã Khách Hàng</td>
<td align="left">@Html.DisplayFor(model => model.MaKH)</td>
</tr>
 <tr>
<td style="width:145px" align="left">Ngày Sinh</td>
<td align="left">@Html.DisplayFor(model => model.NgaySinh)</td>
</tr>
<tr>
<td style="width:145px" align="left">Địa Chỉ</td>
<td align="left">@Html.DisplayFor(model => model.DiaChi)</td>
</tr>
<tr>
<td style="width:145px" align="left">Số Điện Thoại</td>
<td align="left">@Html.DisplayFor(model => model.SDT)</td>
</tr>
</table>
</div>

Datetime:
<tr>
<td style="width:145px" align="left"> Ngày Sinh</td>
<td style="width: 1000px" align="left">
<input type="text" id="dt1" name="NgaySinh" class="form-control"/>
<link href="~/Content/bootstrap-datepicker.css" rel="stylesheet" />
@section scripts{
@Scripts.Render("~/budles/jqueryval")
<script src="~/Scripts/bootstrap-datepicker.js"></script>
<script>
$(document).ready(function () {
$("#dt1").datepicker({ format: 'dd/mm/yyyy' });
});
</script>
}
<td>
</tr>

Search:

<div class="form-group form-inline" align="left">

@using (Html.BeginForm("KHList", "KhachHang", FormMethod.Get))
{
 <font size="4" color="LightGoldenRodYellow">Tìm Khách Hàng:
@Html.TextBox("SearchString", "", new { @class = "form-control" })</font>
<input type="submit" class="btn btn-default" value="search" />

}
</div>

var khachHangs = from l in data.TKhachHangs

select l;

if (!String.IsNullOrEmpty(SearchString))
{
khachHangs = khachHangs.Where(s => s.MaKH.Contains(SearchString));
}

Drowdown:

<li class="dropdown active">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Thông Tin<b
class="caret"></b></a>
<ul class="dropdown-menu agile_short_dropdown">
<li><a href="~/KhachHang/KHList">Khách Hàng</a></li>
<li><a href="typography.html">Khu Vực</a></li>
<li><a href="typography.html">Điện Kế</a></li>
<li><a href="typography.html">Hóa Đơn</a></li>
<li><a href="typography.html">Đơn Giá</a></li>
<li><a href="typography.html">Chi Tiết Hóa Đơn</a></li>
</ul>
</li>