XÂY DỰNG ỨNG DỤNG WEB THEO MÔ HÌNH MVC VỚI CƠ SỞ DỮ LIỆU LINQ TO SQL... M C TIÊU: Ụ Xây dựng ứng dụng MVC với ASP.Net và SQL server.. Ứng dụng minh họa là xây dựng các trang Xem, thêm
Trang 1XÂY DỰNG ỨNG DỤNG WEB THEO MÔ HÌNH MVC VỚI CƠ SỞ DỮ LIỆU LINQ TO SQL.
Trang 2A M C TIÊU: Ụ
Xây dựng ứng dụng MVC với ASP.Net và SQL server
Ứng dụng minh họa là xây dựng các trang Xem, thêm, xóa, sửa dữ liệu cho các bảng trong ứng dụng “ASP.Net MVC Application News”
Để xây dựng được ứng dụng chúng ta cần các công cụ phần mềm hỗ trợ sau:Visual studio 2013 (Nếu2010/2012 thì cần cài thêm bộ MVC 5), SQL server
2005 /2008/2012
Trang 3B N I DUNG: Ộ
Bài tập 1 Tạo mới project:
Mở Visual Studio 2013 chọn File -> New -> Project để tạo 1 ứng dụng mới
Chọn loại Project Visual C# => Web => ASP.Net web Application
=>Tên project là QLSanpham
Hình 1: Màn hình tạo mới Project Website ASP.Net
Trang 4Hình 2: Màn hình chọn loại Project Website là MVC.
Bài tập 2 Tạo cơ sở dữ liệu :
Trong SQLServer tạo CSDL QLSanpham gồm 2 bảng và lưu file lệnh vào thư mục Database\CSDLQLSanpham.sql:
Trang 6Bài tập 3: Kết nối CSDL với ứng dụng
Hình 3 Kết nối CSQL
Trang 7Hình 4 Copy server name
Hình 5 Test và kiểm ra cơ sở dữ liệu.
Hình 6 Lấy cơ sở dữ liệu.
Trang 8Hình 7 Data tables sau khi add models.
Trang 9Hình 8 Kéo 2 tables vào trong và add controllers.
Hình 9 Chọn MVC5 Controllers - … và add
Phần layout của trang web ( copy và pass vào layoutUser)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<style>
.my-header {
background-color: #000000;
text-align: center;
padding: 10px 0;
Trang 10}
.my-container {
padding: 30px 100px 75px 100px; }
.my-footer {
background-color: black;
text-align: center;
padding: 0;
position: fixed;
bottom: 0;
width: 100%;
}
.my-footer {
text-decoration-color: aliceblue; }
body {
margin: 0;
background-color: #a6a6bb;
}
.my-title {
color: white;
text-align: center;
}
.my-button {
background-color: black;
padding: 10px;
margin: 5px;
font-size: 15px;
font-weight: 600;
color: white;
border-radius: 4px;
border-style: solid;
border-color: crimson;
width: 150px;
}
my-button:hover {
background-color: palegoldenrod; color: crimson;
}
Trang 11my-button:visited {
background-color: lemonchiffon; color: crimson;
}
.my-table {
text-align: left;
}
legend {
font-weight: bold;
}
fieldset {
width: 40%;
padding: 0 70px;
}
td.data {
width: 300px;
}
td input, select {
width: 100%;
height: 28px;
border-radius: 4px;
border: 1px solid grey;
margin: 5px 0;
}
.text-danger {
color: #f74242;
}
.button-default {
background-color: cadetblue; font-weight: 600;
color: white;
border-radius: 4px;
border: 1px solid grey;
padding: 5px;
min-width: 70px;
}
button-default:hover {
Trang 12color: darkblue;
background-color: gainsboro;
}
</style>
</head>
<body>
<div class="my-header">
<h1 class="my-title">HỆ THỐNG QUẢN LÝ SẢN PHẨM</h1>
<div class="row">
<a href="/Sanpham/Index"><input type="button" class="my-button" value="Trang chủ" /></a>
<input type="button" class="my-button" value="Loại sản phẩm" />
<a href="/Sanpham/Index"><input type="button" class="my-button" value="Sản phẩm" /></a>
</div>
</div>
<div class="my-container">
@RenderBody()
</div>
<div class="my-footer">
<h4>© Test - Kết nối Linq | 13DTHC03</h4>
</div>
</body>
</html>
Tạo layout:
Hình 10 Tạo layoutUser
Trang 13Hình 11 Code layoutUser ( đã có ở trên copy rồi pass vào thôi).
Quay lại Controllers Sanpham
Trang 14Hình 12 Code Mở hình ảnh zoom lên xem code nhé!
Trang 15Add Index.
Trang 16Hình 13 Code trong trang Index
Ti p t c add views đ t l i tên Details ế ụ ặ ạ
Hình 14 Code Details viết lại thôi
Trang 17Add Views trong Create đ t tên Create luôn ặ
Hình 15 Code trong Create.cshtml
Trang 18T ươ ng t Edit ự
Hình 16 Code Edit
Trang 19T ươ ng t Delete ự
Trang 20Sau đó Run ki m tra và k t qu : ể ế ả