Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89
Bạn hãy đăng nhập hoặc đăng ký
Khoanglang89

NHẬN THIẾT KẾ WEBSITE/ SOFTWARE - LÀM ĐỒ ÁN TỐT NGHIỆP, ĐỒ ÁN CHUYÊN MÔN NGÀNH CÔNG NGHỆ THÔNG TIN


You are not connected. Please login or register

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down  Thông điệp [Trang 1 trong tổng số 1 trang]

Admin

Admin

Admin
Admin
Loading
Tham khảo Entity Framework Tham khảo Bootstrap Modal
Chú ý kẻo nhầm nhọt sang trồng trọt giữa 2 từ "Modal" và "Model". Modal là dialog của Bootstrap, còn Model là 1 class bất kỳ. (trong mô hình MVC)

Entity Framework (EF) code first

Code first là phương pháp tạo các class Model sau đó phát sinh ra database. Đây là cách thức phát triển ứng dụng nhanh khi chưa có database. Bằng cách sử dụng code first bạn cũng có thể tạo dữ liệu ban đầu cho database của mình. Sau đây mình sẽ hướng dẫn cách sử dụng EF code first, sẽ rất đơn giản thôi.
Mình sẽ tạo 1 project ASP.NET MVC 5 (VS 2013) để có thể sử dụng Bootstrap có sẵn trong project. Lưu ý là từ ASP.NET MVC 5 trở lên thì mới tích hợp sẵn Bootstrap. Nếu bạn dùng các phiên bản thấp hơn, Bootstrap cũng dễ dàng được thêm vào bằng cách download từ trang chủ của Bootstrap

Thêm 1 Model

Thêm model bằng cách right-click vào thư mục Models trong project > Add > Class...
Bạn có thể tùy chỉnh nhiều attribute trong các Properties, nhưng trong phần này mình sẽ không nói đến cho đơn giản. Model như sau:
1 2 3 4 5 6 public class Item

{

public int Id { get; set; }

public string Name { get; set; }

public double Price { get; set; }

}
view raw mvc_model.cs hosted with ❤ by GitHub
Bây giờ là tạo database. Class tạo database được viết:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 public class ApplicationDbContext : IdentityDbContext

{

public ApplicationDbContext()

: base("DefaultConnection", throwIfV1Schema: false)

{

}

 

public static ApplicationDbContext Create()

{

return new ApplicationDbContext();

}

 

public DbSet Items { get; set; }

}
view raw mvc_code_first_database.cs hosted with ❤ by GitHub
Class này kế thừa lớp
Code:
DbContext
và nằm trong namespace
Code:
System.Data.Entity;
Trong dbcontext mình tạo 1 table Items bằng cách khai báo 1 properties có kiểu là DbSet, khi database được tạo ra, 1 table có tên Items sẽ được thêm vào database.
Trong phương thức khởi tạo của lớp context này lại được kế thừa từ phương thức khởi tạo của lớp cha với 1 tham số là tên của chuỗi kết nối. Mở file web.config ra và thêm vào chuỗi kết nối như sau:
1 2 3 4 5


connectionString="Server=.\SQL2012; Database=EStore; Integrated Security=True"

providerName="System.Data.SqlClient" />


view raw mvc_code_first_web.config hosted with ❤ by GitHub
Tất nhiên là bạn phải chỉnh lại connectionString cho phù hợp với máy tính của mình rồi.
Vậy là ta đã có Model, database context, chuỗi kết nối. Bây giờ nếu muốn khởi tạo giá trị ban đầu cho database, các bạn làm thêm 1 class nữa như sau: (nếu không muốn khởi tạo giá trị ban đầu bạn có thể bỏ qua bước này)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 public class EStoreInitialize : DropCreateDatabaseIfModelChanges

{

protected override void Seed(ApplicationDbContext context)

{

var items = new List

{

new Item {Name="Mouse",Price=50},

new Item {Name="Keyboard", Price=100},

new Item {Name="Fan",Price=200}

};

 

items.ForEach(i => context.Items.Add(i));

}

}
view raw code_first_database_init.cs hosted with ❤ by GitHub
Class này kế thừa từ
Code:
DropCreateDatabaseIfModelChanges
và override phương thức
Code:
Seed
để thêm dữ liệu vào. Và cuối cùng, mở file Global.asax ra và thêm phương thức khởi tạo dữ liệu vào
Code:
Appication_Start
1 2 3 4 5 6 7 8 9 protected void Application_Start()

{

Database.SetInitializer(new EStoreInitialize());

 

AreaRegistration.RegisterAllAreas();

FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);

RouteConfig.RegisterRoutes(RouteTable.Routes);

BundleConfig.RegisterBundles(BundleTable.Bundles);

}
view raw code_first_global_asax.cs hosted with ❤ by GitHub
OK, vậy là xong EF code first. Khá đơn giản phải không?!

EStoreController

Tạo mới 1 controller bằng cách right-click vào thư mục Controllers > Add > Controller...
Trong controller mới tạo, tạo 1 thể hiện của database context để sử dụng, đồng thời trong phương thức Index sẽ liệt kê ra danh sách các Item có trong table Items
1 2 3 4 5 6 7 8 9 10 11 public class EStoreController : Controller

{

private ApplicationDbContext _db = new ApplicationDbContext();

 

public ActionResult Index()

{

var items = _db.Items.ToList();

 

return View(items);

}

}
view raw code_first_éhopcontroller.cs hosted with ❤ by GitHub
Tạo View cho Action Index bằng cách right-click vào Index Action > Add View...
Ngắm sơ qua View của Index, mình sẽ đi chi tiết sau
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 @using BootstrapModalExample.Models

@model IEnumerable

 

 

@{

ViewBag.Title = "Index";

int i = 1;

}

 

Index



 





















@foreach (var item in Model)

{













}



# Item Price

Add New Item



@*Add New Item*@

@(i++) @item.Name @item.Price











@*





*@



view raw code_first_index.html hosted with ❤ by GitHub
Chưa có gì khó hiểu phải không? Ở đây mình hiển thị danh sách các Item ra bằng vòng lặp foreach với Model là danh sách các Item.

Bootstrap Modal

Trước tiên là hiểu về modal và cách sử dụng. Mở tài liệu về modal của bootstrap tại đây. Copy phần example và dán vào View Index để test thử. button add new item sẽ mở modal với 2 attribute quan trọng là data-toggle='modal' và data-target='#myModal'. Chú ý là nếu với thẻ a, bạn có thể sử dụng href='#myModal' để thay cho data-target. Còn nếu là button thì sử dụng attribute data-target.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

Index



 





















...



# Item Price


class="pull-right btn btn-info btn-add"

data-toggle="modal"

data-target="#myModal">Add New Item



 




view raw modal_example.html hosted with ❤ by GitHub
Kết quả
 Entity Framework Code First CRUD sử dụng Bootstrap Modal  Phantienquang-blogspot-bootstrap-modal-demo
Và giờ, vấn đề đặt ra là: với mỗi action add, update, delete bạn có một modal riêng. Bạn có thể viết cả 3 modal trong cùng trang Index, nhưng phải nói là cách đó không khả thi (Khó khi load data vào mỗi modal, html trùng lặp và dài vô tận). Vậy giải pháp là gì?
Mình sẽ sử dụng 3 "kỹ thuật"

  1. Đưa mỗi modal vào 1 PartialView, tất nhiên cũng sẽ có chuyện html lặp lại nhưng đó là vấn đề nâng cao. Mỗi khi click vào liên kết, gọi đến Action và Action đó trả về PartialView để load modal. Sở dĩ lại dùng PartialView vì nó sẽ trả về kết quả là View mà không có Layout, nói dễ hiểu là nó chỉ có trả về những gì (html, css, js...) nằm trong cái PartialView đấy thôi.
  2. PartialView trả về sẽ được load bằng jquery load function. Tham khảo jquery load.
  3. Cuối cùng, việc load modal sẽ được thực hiện bằng javascript chứ không dùng html (html attribute) nữa.

Đầu tiên mình sẽ làm cụ thể với việc thêm mới.
Bước 1: Đưa modal Add vào PartialView
PartialView dễ dàng có được bằng cách giống hệt như thêm mới 1 View. Mình đặt tên cho PartialView này là _Add.cshtml. Vậy nội dung của _Add là gì?
Mình sẽ không đưa nguyên cục modal vào _Add mà chỉ cần đưa những thứ phía trong thẻ div.modal-dialog. Khi nhấn vào liên kết add, modal _Add sẽ được load lại vào #myModal bằng jquery load.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
view raw modal_add_example.html hosted with ❤ by GitHub
Khi đó, modal ở Index chỉ còn lại "cái khung"
1 2 3 4 5 6 7 8 9 10 11


view raw modal.html hosted with ❤ by GitHub
Và button add chỉ còn đơn giản thế này, không cần attribute vì mình sẽ sử lý trong javascript.
1 Add New Item
view raw button_add_modal.html hosted with ❤ by GitHub
Bước 2: Gọi modal
Việc gọi modal trong javascript được thực hiện như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

$(document).ready(function () {

 

$('.btn-add').click(function (e) {

 

/*

* hủy liên kết

*

* việc này quan trọng

* nếu không hủy liên kết, modal sẽ không được load đúng cách

* vì action sẽ trả về 1 trang html trống với partialview

*

* cách tương tự return false; cách này thực hiện ở cuối method

*/

e.preventDefault();



var $modal = $('#myModal');

var $modalDialog = $('.modal-dialog');

var href = $(this).prop('href');

 

// không cho phép tắt modal khi click bên ngoài modal

var option = { backdrop: 'static' };

 

// kiểm tra (logic, điều kiện...)

 

// load modal

$modalDialog.load(href, function () {

$modal.modal(option, 'show');

});

});

 

}); // document ready


view raw load_modal.js hosted with ❤ by GitHub
Chú ý:

  1. Nếu bạn đặt đoạn script này trong Index, bạn phải đặt trong @section scripts. Vì sao thì bạn cũng biết rồi đấy, trong _Layout, jquery được load phía sau @RenderBody, nếu không đặt trong @section scripts (section này load phía dưới jquery) thì các jquery function sẽ không hoạt động.
  2. Thêm 1 action trong EStoreController và trả về PartialView("_Add")

1 2 3 4 public ActionResult Add()

{

return PartialView("_Add");

}
view raw partial_add.cs hosted with ❤ by GitHub
Cùng xem lại trang Index.cshtml 1 cách tổng quát
 Entity Framework Code First CRUD sử dụng Bootstrap Modal  Modal-index
Bước 3: Hoàn thiện form Add
Bây giờ mình sẽ hoàn thiện các chức năng còn lại. Đầu tiên là ở PartialView _Add.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 @using BootstrapModalExample.Models

@model Item

 

@using (Html.BeginForm("Add", "EStore", FormMethod.Post, htmlAttributes: new { @class = "form-add" }))

{

 

@Html.AntiForgeryToken()

 



}
view raw _add.cshtml hosted with ❤ by GitHub
Cuối cùng: Add Action
Tiếp theo sẽ là Action Add
1 2 3 4 5 6 7 8 9 10 11 12 13  

[HttpPost]

[ValidateAntiForgeryToken]

public ActionResult Add(Item item)

{

if (!ModelState.IsValid)

return RedirectToAction("Index");

 

_db.Items.Add(item);

_db.SaveChanges();

 

return RedirectToAction("Index");

}
view raw action_add.cs hosted with ❤ by GitHub
Kết quả
 Entity Framework Code First CRUD sử dụng Bootstrap Modal  Modal-add-item
Đơn giản phải không? Các hành động cập nhật hay xóa hoàn toàn tương tự, các bạn có thể tự viết hoặc tham khảo trong source code bên dưới nhé.

Source code

Bootstrap Modal Example

http://phantienquang.blogspot.com/2014/10/ef-code-first-crud-with-bootstrap-modal.html

https://khoanglang89.forumvi.com

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

Bài viết mới cùng chuyên mục

      Permissions in this forum:
      Bạn không có quyền trả lời bài viết