làm trang đăng nhập bằng asp.net mvc

Nay mình tiếp tục với một ví dụ về Login & Register in ASP.NET MVC 5, trong vài chia sẻ bài viết trước, ta cũng đã làm qua một vài ví dụ về việc(Tạo project, Install Bootstrap,EntityFramework, Connect Database, Form Validation) trong bài này mình sẽ vận dụng những kiến thức trước để làm nhé
Chuẩn bị:

Đang xem: Làm trang đăng nhập bằng asp.net mvc

– Tạo project ASP.NET MVC 5: File->New project – Install Bootstrap,Entity Framework: Click right project->Manager Nutget Packages – Create Database:Click right thư mục App_Data->Add SQL Server Database

Các bước trên mình đã làm trong các bài chia sẻ trước, bạn có thể xem lại nhé, giờ ta hãy tạo table Users trong database của ta

*

Sau khi ta đã tạo Table Users, thì ta cần tạo mô hình thiết lập các thuộc tính trong table Users như sau:
Models/User.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; namespace ProjectMVC5.Models public string FirstName public string LastName "+
+.")> public string Email "^(?=.*)(?=.*)(?=.*d).$")> public string Password public string ConfirmPassword public string FullName() } }

Trong các thuộc tính trên bạn có thể xem lại bài Form Validation in ASP.NET MVC 5. Để hiểu hơn nhé

Tiếp tục tạo file Connect database như sau: Models/DB_Entities.cs

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data.Entity; using System.Data.Entity.ModelConfiguration.Conventions; namespace ProjectMVC5.Models public DbSet<User> Users protected override void OnModelCreating(DbModelBuilder modelBuilder) } }

Để connect được database ta cần copy câu lênh dưới đây dán vào tệp Web.config trong project của ta.

<connectionStrings> <add name="DatabaseMVC5" connectionString="Data Source=(LocalDb)MSSQLLocalDB;Initial Catalog=DatabaseMVC5;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|DatabaseMVC5.mdf" providerName="System.Data.SqlClient" /> </connectionStrings>

Ok vậy ta có thể connect đến database và truy vấn dữ liệu table mà ta muốn rồi!

Tiếp tục ta cần tạo file HomeController.cs trong thư mục Controllers, để cấu hình cài đặt các chức năng như (Login,Register,Logout)

using System; using System.Text; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using ProjectMVC5.Models; using System.Security.Cryptography; namespace ProjectMVC5.Controllers else } //GET: Register public ActionResult Register() //POST: Register public ActionResult Register(User _user) else } return View(); } public ActionResult Login() public ActionResult Login(string email,string password) else } return View(); } //Logout public ActionResult Logout() //create a string MD5 public static string GetMD5(string str) return byte2String; } } }

Bạn nhìn thấy file bên trên, ta chỉ việc kiểm tra các giá trị tự View gửi đến Controller, và xử lý chúng thôi.
Bạn xem chức năng
Register(): Tại đây ta kiểm tra xem, Email đã tồn tại chưa, nếu chưa thì thêm vào dữ liệu, còn nếu đã tồn tại, thì thông báo email đó đã tồn tại
Login(): Kiểm tra thông tin (Email,Password) trong dữ liệu xem, nếu chính xác, ta sẽ gắn session cho người dùng, và chuyển hướng về trang chủ
Logout(): Ta clear session đi
GetMD5(): Dùng chuyển đổi một chuỗi về dạng mã hóa MD5

Vậy là ta đã cấu hình bộ điều khiển chức năng đã xong, bạn chỉ việc tạo các khung nhìn cho người dùng đăng ký, đăng nhập thôi

Views/Home/Register.cshtml

<div class="row justify-content-md-center"> <div class="col-md-5">
Html.ValidationMessageFor(m => m.FirstName, "", new ) </div> <div class="form-group">
Html.ValidationMessageFor(m => m.LastName, "", new ) </div> <div class="form-group">

Xem thêm: Hướng Dẫn Đăng Ký Thẻ Atm Vietcombank Miễn Phí Mới Nhất, Đăng Ký Mở Thẻ Trực Tuyến

if (ViewBag.error != null) </div> <div class="form-group">
Html.ValidationMessageFor(m => m.Password, "", new ) </div> <div class="form-group">
Html.ValidationMessageFor(m => m.ConfirmPassword, "", new ) </div> <div class="form-group"> <input type="submit" name="submit" class="btn btn-danger" value="Register"/> </div> </div> </div> } </div> </div>

Views/Home/Login.cshtml

<div class="row justify-content-md-center"> <div class="col-md-4"> <div class="card"> <div class="card-header"> Login </div> <div class="card-body">
using (Html.BeginForm("Login", "Home", FormMethod.Post)) ) </div> <div class="form-group">
Html.PasswordFor(m => m.Password, new ) </div> <div class="form-group"> <input type="submit" name="submit" class="btn btn-primary" value="Login"/> </div> } </div> </div> </div> </div>

Views/Home/Index.cshtml

<div class="row justify-content-md-start"> <div class="col-md-4"> <div class="card"> <div class="card-header"> Wellcome </div> <div class="card-body">
if (Session<"FullName"> != null) </div> </div> </div> </div>

Demo

*

*

*

Bài viết 100DaysOfCode Query Builder in Laravel 5.8 Create Bottom Tab Navigator in React Native Create Navigation in React Native Install React Native on PC and Mac Create Middleware in Laravel 5.8 Blade Templating in Laravel 5.8 Seeder and Model Factory in Laravel 5.8 Migrations in Laravel 5.8 Create Model in Laravel 5.8 Controllers in Laravel 5.8 Route in Laravel 5.8 Create Project Laravel 5.8 using Composer Create Crud using PHP OOP Search Pagination in PHP Create CRUD(create,read,update,delete) in PHP Create a Login Form Using PHP + AJAX Create a Login Form Using PHP Create a Login Form Using Html/Css
Bài viết xem nhiều ASP.NET MVC 5 Login and Register Hướng dẫn tạo Form đăng ký thành viên Login Remember bằng Php Hướng dẫn tạo Menu Ngang bằng CSS Hướng dẫn kết hợp Nodejs + Vuejs Create Login in React Native and NodeJS Hướng dẫn phân trang bằng Ajax Sử dụng Props trong Vuejs

Xem thêm: Cách Đăng Nhập Minecraft Launcher Trên Máy Tính, Tải Game Minecraft Miễn Phí

Bài viết mới Create Image Watermark using Nodejs Crawl Data Website Using NodeJS Restful API using ASP.NET Core Web API + React Create Register & Login using ASP Core 2.1 + React (part 2)

Xem thêm bài viết thuộc chuyên mục: Đăng nhập

Khuyễn Mãi Hot