Thêm các thành phần ASP.NET MVC Framework

Thêm các thành phần ASP.NET MVC Framework

https://www.devcurry.com/2013/05/adopting-aspnet-mvc-enhancements-in.html?fbclid=IwAR3SvSIfHn71IRl7VpYxFleL1Wvgn6dLdcvnXylmEMm5zUNsHJIiJ9ufA9c

Áp dụng các cải tiến ASP.NET MVC trong Dự án biểu mẫu web hiện có

Bài viết này nằm trong Series Hướng dẫn ASP.NET MVC 101 của

chúng tôi Bất cứ khi nào chúng tôi bắt đầu với dự án Greenfield, đó là một dự án mới, chúng tôi thích sử dụng công nghệ mới nhất trong nhóm công nghệ cho đến khi nhóm làm việc thoải mái. Tuy nhiên, các dự án Greenfield là khá hiếm; các dự án bổ sung và cải tiến, thường được gọi là các dự án trường nâu, là con đường phía trước cho các ứng dụng hiện có trong Doanh nghiệp. Trong các dự án này, chúng tôi thường được bổ sung các công nghệ hoặc khung được xác định trước và đánh giày là mới nhất và lớn nhất có thể có nghĩa là sự chậm trễ không cần thiết và sự bất ổn. Sau tất cả 'đừng sửa những gì không hỏng' phải không?

Với kịch bản này, thông thường có các dự án ASP.NET 2.0 Web Forms được thiết lập tốt cần cải tiến. Nếu các cải tiến đủ độc lập, như trong việc tạo ra các Màn hình mới với chức năng mới, điều đó sẽ không có cách nào được 'nhúng' vào chức năng hiện có. Chúng ta có thể nghỉ ngơi sạch sẽ và phát triển chức năng mới trong ASP.NET MVC bằng cách trộn và kết hợp các Biểu mẫu Web với MVC. 

Hôm nay chúng ta sẽ xem xét các cảnh báo, gotchas và GUID chúng ta cần quan tâm để thực hiện điều này.

Bắt đầu - Nâng cấp Giải pháp biểu mẫu web của bạn

Giả sử ứng dụng cũ của chúng tôi được xây dựng bằng ASP.NET 2.0 hoặc 3.5 trong Visual Studio 2010. 



Điều đầu tiên chúng tôi muốn làm là nâng cấp Giải pháp lên sử dụng Visual Studio 2012. Tôi đang sử dụng phiên bản VS Express ở đây để nó hợp lý cho hầu hết các bạn không có phiên bản Professional hoặc Ultimate. 

Để nâng cấp, điều đầu tiên cần làm là mở Giải pháp trong VS 2012. Trừ khi bạn có các thành phần bên thứ ba rất cụ thể phụ thuộc hoàn toàn vào các phiên bản .NET Framework cũ hơn, việc di chuyển phải liền mạch và bạn sẽ nhận được Báo cáo di chuyển tương tự như bên dưới 



Nếu bạn thấy Solution Explorer của bạn bây giờ, Dự án đã được thiết lập. 



Xây dựng lại giải pháp tại thời điểm này để đảm bảo mọi thứ đang được xây dựng tốt.

Nâng cấp tất cả các cách lên .NET 4.5

Nâng cấp mặc định là .NET 4.0. Hãy nâng cấp tất cả lên 4,5. Để thực hiện việc này, nhấp chuột phải vào thư mục Dự án ở trên và chọn Thuộc tính. Trong tab Ứng dụng , tìm Khung mục tiêu và đặt thành .NET Framework 4.5 . Nó sẽ cảnh báo rằng điều này đòi hỏi phải đóng và mở lại giải pháp. Đi cho nó. 

Xây dựng lại và chạy dự án để thấy rằng mọi thứ đang hoạt động tốt.

Thêm các thành phần ASP.NET MVC Framework

Bây giờ, hãy thêm hỗ trợ MVC Framework vào Ứng dụng của chúng tôi. Nhờ Nuget, đây là một quá trình khá dễ dàng. Đối với những người mới sử dụng Nuget, hãy đọc NuGet - The Visual Studio Sweetner .

Nhấp chuột phải vào giải pháp và chọn Quản lý gói Nuget. Chọn nút Trực tuyến và tìm kiếm ASP.NET MVC . Kết quả sẽ tương tự như sau 



Cài đặt gói Microsoft ASP.NET MVC 4 . Chấp nhận bất kỳ thỏa thuận cấp phép bổ sung và để cài đặt hoàn tất. 

Tiếp theo chúng ta phải cài đặt các gói bổ sung sau. Chúng tôi cũng có thể làm điều đó từ Bảng điều khiển quản lý gói Nuget . Các lệnh cho mỗi lệnh được hiển thị bên dưới 

jQuery 

PM> gói cài đặt jQuery -version 1.9.1

Lý tưởng nhất là chúng tôi sẽ không chỉ định phiên bản, vì hiện tại có mâu thuẫn giữa khung xác thực jQuery 2 và jQuery. Vì vậy, chúng tôi sẽ gắn bó với 1.9.1. 

Xác thực jQuery 

PM> gói cài đặt jQuery.Validation 

Newtonsoft JSON

PM> gói cài đặt Newtonsoft.Json 

jQuery UI Thư viện kết hợp 

PM> gói cài đặt jquery.ui.combined 

Modernizer

PM> Cài đặt gói hiện đại 

jQuery Xác thực không phô trương

PM> gói cài đặt Microsoft.jQuery.Unazedrusive.Validation 
PM> gói cài đặt Microsoft.jQuery.Unazedrusive.Ajax

Tối ưu hóa Microsoft ASP.NET Web

PM> gói cài đặt Microsoft.AspNet.Web.Optimization 

WebGreas (cập nhật): Gói Tối ưu hóa Web cài đặt WebGreas 1.0. Chúng ta nên cập nhật nó mới nhất (1.3 tại thời điểm viết).

PM> Gói cập nhật WebGreas

Đang cập nhật Web.config

Bây giờ, các phụ thuộc của chúng ta đã được thiết lập, hãy cập nhật Web.config thành WebPages 2.0 không thể, Xác thực không phô trương và cũng thêm các không gian tên cho MVC. 

Cài đặt ứng dụng

Chúng tôi thêm các mục sau vào nút <configure> nút 

<appSinstall> 
<add key = "webpages: Version" value = "2.0.0.0" /> 
<add key = "webpages: Đã bật" value = "false" /> 
<add key = "PreserveLoginUrl" value = "true" /> 
<add key = "ClientValidationEnables" value = "true" /> 
<add key = "UnazedrusiveJavaScriptEnabled" value = "true" /> 
</ appSinstall> 
System.Web cài đặt

Bên trong nút System.Web, chúng tôi thêm các không gian tên sau đây và cài đặt khung thời gian chạy. 

<system.web> 
... 
<httpR.78 targetFramework = "4.5" /> 
<page controlRenderingCompabilitiesVersion = "4.0"> 
  <namepaces> 
   <add namepace = "System.Web.Helpers" /> 
   <add namepace = "System.Web.Mvc" /> 
   <add namepace = "System.Web.Mvc.Ajax" /> 
   <add namepace = "System.Web.Mvc.Html" /> 
   <add namepace = "System.Web.Optimization" /> 
   <add namepace = "System.Web.Routing" /> 
   <add namespace = "System.Web.WebPages" /> 
  </ namespace> 
</ trang> 
... 
</system.web>
  
Cài đặt thời gian chạy

Bên trong nút <runtime>, chúng tôi thêm các chuyển hướng ràng buộc lắp ráp sau. Thêm nút <runtime> nếu nó không tồn tại. 

<runtime> 
  <assemblyBinding xmlns = "urn: schemas-microsoft-com: asm.v1"> 
    < DepAssugging > 
      <assemblyIdentity name = "System.Web.Helpers" publicKeyToken = "31bf3856ad364e35" /> 
      <bindRed -2.0.0.0 "newVersion =" 2.0.0.0 "/> 
    </       DepAssugging>       <DepAssugging 
    > 
<assemblyIdentity name =" System.Web.Mvc "publicKeyToken =" 31bf3856ad364e35 "/> 
<bindRedirect oldVersion =". 0,0 " 


      <assemblyIdentity name = "System.Web.WebPages" PublicKeyToken = "31bf3856ad364e35" /> 
      <bindingRedirect oldversion = "1.0.0.0-2.0.0.0" newVersion = "2.0.0.0" /> 
    </ dependentAssembly> 
    <dependentAssembly> 
      <tên assemblyIdentity = "WebGreas" publicKeyToken = "31bf3856ad364e35" /> 
      <bindRedirect oldVersion = "0.0.0.0-1.3.0.0" newVersion = "1.3.0.0" /> 
    </ DepAssugging > 
  </ assemblyBinding> 
</ runtime>
  
Cho đến nay. Xây dựng và chạy lại ứng dụng để đảm bảo không có gì bị hỏng.

Thêm hỗ trợ công cụ MVC cho dự án

Bây giờ chúng ta đã cài đặt các phụ thuộc MVC, chúng ta sẽ có thể tạo Trình điều khiển và Chế độ xem MVC. Thật không may khi chúng tôi nhấp chuột phải vào Solution Explorer, các tùy chọn này không xuất hiện. Để làm điều này, chúng ta cần Unload dự án của chúng tôi và hack một ProjectType GUID vào csproj xml. 
Để dỡ dự án, nhấp chuột phải vào nút dự án trong Solution Explorer và chọn 'Unload Project'. Nút dự án chuyển sang màu xám và được đánh dấu là không có sẵn. Nhấp chuột phải vào nó và nhấp vào Chỉnh sửa <Tên dự án>.



Xác định vị trí nút <ProjectTypeGuids> trong csproj xml. 



Thêm GUID sau vào nó {E3E379DF-F4C6-4180-9B81-6769533ABE47}; lúc bắt đầu. Nút <ProjectTypeGuids> cuối cùng phải giống như sau 



Làm thế nào tôi có được GUID đó? Sumit Maitra để giải cứu người đã thiết kế một mẫu dự án MVC :). Tải lại Dự án và Nhấp chuột phải vào bất kỳ nút nào trong Dự án Web, bạn sẽ có thể thấy phím tắt 'Thêm Trình điều khiển'.

Tiếp theo Gói, Bộ lọc và Khu vực

Mẫu Dự án MVC tiêu chuẩn có thư mục App_Start có các lớp tĩnh để khởi tạo Gói, Tuyến đường và Bộ lọc. Hãy để chúng tôi thêm chúng bằng tay. 

1. Thêm thư mục App_Start 

2. Thêm BundleConfig.cs và đăng ký các gói jQuery jQuery và các tệp CSS UI UI như sau 

lớp tĩnh công khai BundleConfig 
{ 
public static void RegisterBundles (BundleCollection bundles) 
{ 
  bundles.Add (new ScriptBundle ("~ / bundles / jquery "). Bao gồm ( 
   " ~ / Sc scripts / jquery- {phiên bản} .js ")); 
  bundles.Add (new ScriptBundle ("~ / bundles / jqueryui"). Bao gồm ( 
   "~ / Sc scripts / jquery-ui- {version} .js")); 
  bundles.Add (ScriptBundle mới ("~ / bundles / jqueryval"). 
   "~ / Sc scripts / jquery.unazedrusive *", 
   "~ / Sc scripts / jquery.validate *")); 
  bundles.Add (new ScriptBundle ("~ / bundles / Modernizr"). Bao gồm ( 
   "~ / Sc scripts / Modernizr- *")); 
  bundles.Add (new StyleBundle ("~ / Content / css"). Bao gồm ("~ / Content / site.css")); 
  bundles.Add (new StyleBundle ("~ / Content / Themes / base / css"). Bao gồm ( 
   "~ / Content / Themes / base / jquery.ui.core.css", 
   "~ / Content / Themes / base / jquery .ui.resizable.css ", 
   " ~ / Nội dung / chủ đề / cơ sở / jquery.ui.selectable.css ", 
   " ~ / Nội dung / chủ đề / cơ sở / jquery.ui.accordion.css ", 
   " ~ / Nội dung / chủ đề /base/jquery.ui.autocomplete. 

   "~ / Nội dung / chủ đề / cơ sở / jquery.ui.dialog.css", 
   "~ / Nội dung / chủ đề / cơ sở / jquery.ui.slider.css", 
   "~ / Nội dung / chủ đề / cơ sở / jquery.ui.tabs .css ", 
   " ~ / Nội dung / chủ đề / cơ sở / jquery.ui.datepicker.css ", 
   " ~ / Nội dung / chủ đề / cơ sở / jquery.ui.proTHERbar.css ", 
   " ~ / Nội dung / chủ đề / cơ sở / jquery .ui.theme.css ")); 
} 
} 
3. Nếu bạn muốn MVC chặn các lỗi chưa xử lý, hãy thêm lớp FilterConfig này. Khác, bạn có thể hoãn nó cho đến khi bạn cần đăng ký một Bộ lọc khác. 

lớp công khai FilterConfig 
{ 
void static void RegisterGlobalFilters (bộ lọc GlobalFilterCollection) 
{ 
  bộ lọc.Add (new HandleErrorAttribution ()); 
} 
}

Buộc tất cả chúng lên

Bây giờ chúng ta đã xác định các tệp khởi động, hãy liên kết chúng và gọi chúng từ Application_Start trong Global.asax. Nếu bạn không có Global.asax thì hãy thêm nó vào thư mục gốc của Dự án Web. 
Phương thức Application_Start cuối cùng trông như sau 

được bảo vệ void Application_Start () 
{ 
    AreaRegistration.Register ALLAreas (); 
    FilterConfig.RegisterGlobalFilters (GlobalFilters.Filters); 
    BundleConfig.RegisterBundles (BundleTable.Bundles); 
}

Nó cần các không gian tên bổ sung này 

bằng System.Web.Optimization; 
sử dụng System.Web.Routing; 
sử dụng System.Web.Securance; 
sử dụng System.Web.SessionState; 
  
Bây giờ tất cả chúng ta đã sẵn sàng để thêm chức năng mới bằng cách sử dụng ASP.NET MVC Framework.

Thêm một khu vực

Nhấp chuột phải vào nút Project và chọn Add-> Area. Để tìm hiểu thêm về Khu vực, hãy kiểm tra Khu vực trong ASP.NET MVC là Tính năng hữu ích

Cung cấp tên Khu vực. Tôi gọi nó là v45 dưới đây cho biết cập nhật lên phiên bản 4.5. Hãy đặt tên theo yêu cầu của dự án của bạn. 



Điều này sẽ thêm cấu trúc thư mục sau vào Giải pháp 



Như bạn có thể thấy, chúng tôi có một lớp để Đăng ký Khu vực và sau đó để trống các thư mục Bộ điều khiển, Mô hình và Chế độ xem.

Thêm chức năng ASP.NET MVC vào biểu mẫu web

Thêm Entity Framework và Kiểm tra các hoạt động của CRUD MVC

Bây giờ MVC đã được thiết lập xong, hãy thêm EntityFramework vào hỗn hợp và phát triển ứng dụng CRUD đơn giản để kiểm tra. Yêu cầu của bạn có thể được 'tham gia' nhiều hơn để nói ít nhất. 

PM> gói cài đặt

EntityFramework Thêm _Layout.cshtm 

l 

Cập nhật tệp để chứa một dòng đánh dấu như sau 

<h2> Xin chào MVC </ h2>

Bây giờ, hãy thêm lớp Person sau vào thư mục Model trong vùng V45 của chúng tôi. 

lớp công khai Person 
{ 
public int Id {get; bộ; } 
Tên chuỗi công khai {get; bộ; } 
Địa chỉ chuỗi công khai {get; bộ; } 
}
  
Xây dựng dự án. Bây giờ, nhấp chuột phải vào thư mục Bộ điều khiển và chọn Thêm Bộ điều khiển.



Thiết lập Bộ điều khiển như trên và nhấn Thêm. Chạy Ứng dụng và điều hướng đến khung nhìn Index của bộ điều khiển Person như sau. Lưu ý lộ trình V45 / Người. 



Nhấp vào 'Tạo mới' và thêm Chi tiết cá nhân. 

 

Nhấn Tạo và voila! Người được lưu vào DB!

Chúng tôi vừa thêm chức năng MVC vào dự án ASP.NET WebForms !!

Phần kết luận

Trong thế giới thực, những thay đổi đối với các ứng dụng hiện có rất chậm xảy ra và viết lại gần như không bao giờ xảy ra. Tuy nhiên, chúng tôi phải tiếp tục chuyển sang phiên bản mới của khung và phương pháp phát triển mới hơn vì chúng có xu hướng an toàn hơn và hoạt động tốt hơn, chưa kể đến khía cạnh hỗ trợ. 

Giữ các vấn đề bảo trì này, chúng tôi đã thấy cách chúng tôi có thể di chuyển ứng dụng ASP.NET Web Forms sang .NET Framework mới nhất và sau đó thêm chức năng mới bằng cách sử dụng khung ASP.NET MVC 'mới hơn' giữ nguyên chức năng cũ. 

Tùy thuộc vào sự phụ thuộc của dự án hiện tại của bạn, số dặm của bạn có thể thay đổi đôi chút, tuy nhiên các bước chung vẫn giữ nguyên.