توضیحات و دانلود

فرم ثبت نام کاربر با پایگاه داده چارچوب Entity Framework در ASP.Net MVC
0 0
فرم ثبت نام کاربر با پایگاه داده چارچوب Entity Framework در ASP.Net MVC

با سلام  در این مقاله، با یک مثال توضیح خواهیم داد که چگونه یک فرم ثبت نام کاربری ساده ایجاد کنیم که کاربرمیتواند در ASP.Net MVC Razor ثبت نام کند. فرم ثبت نام (درج) داده ها را در پایگاه داده با استفاده از Entity Framework ذخیره می کند.
کاربر فرم ثبت نام را با اطلاعاتی مانند نام کاربری، رمز عبور، آدرس ایمیل و غیره پر خواهد کرد و این جزئیات در جدول پایگاه داده ذخیره خواهد شد.
فرم ثبت نام نیز اطمینان حاصل خواهد کرد که نام کاربری و ایمیل های تکراری با تایید اینکه آیا نام کاربری و آدرس ایمیل در جدول وجود ندارد، ذخیره نمی شوند.
پیکربندی بسته های نرم افزاری و فعال کردن اعتبار سنجی Client Side
اعتبار سنجی فرم ثبت نام کاربر در Client Side با استفاده از Model داده های حاشیه نویسی و jQuery انجام می شود.
توجه :

به طور پیش فرض اعتبار سنجی انجام شده با استفاده از ویژگی Annotation داده Server Side است. و از این رو برای ایجاد آن در Client Side، باید Client Side validation فعال باشد.
بانک اطلاعاتی
برای این مقاله یک پایگاه داده جدید به نام LoginDB ایجاد کرده ایم که حاوی جدول زیر به نام Users است.

توجه :

شما می توانید جدول پایگاه داده SQL را با کلیک روی لینک دانلود کنید. فایل SQL را دانلود کنید
روش ذخیره شده برای وارد کردن جزئیات کاربر
روش ذخیره شده زیر برای وارد کردن اطلاعات کاربر مانند نام کاربری، رمز عبور و آدرس ایمیل مورد استفاده قرار می گیرد.
روش ذخیره شده برای اولین بار بررسی می کند که آیا نام کاربری ارائه شده در حال حاضر وجود دارد، اگر بله، آن را 1 (-1)  بازگشت می دهد.
سپس روش ذخیره شده بررسی می کند که آیا آدرس ایمیل ارائه شده در حال حاضر وجود دارد، اگر بله، آن را منفی 2 (-2) بازگشت می دهد.
اگر هر دو نام کاربری و آدرس ایمیل معتبر باشند، ضبط خواهد شد و UserId خودکار تولید شده توسط روش ذخیره شده بازگردانده می شود.

CREATE PROCEDURE [dbo].[Insert_User]
       @Username NVARCHAR(20),
       @Password NVARCHAR(20),
       @Email NVARCHAR(30)
AS
BEGIN
       SET NOCOUNT ON;
       IF EXISTS(SELECT UserId FROM Users WHERE Username = @Username)
       BEGIN
              SELECT -1 AS UserId -- Username exists.
       END
       ELSE IF EXISTS(SELECT UserId FROM Users WHERE Email = @Email)
       BEGIN
              SELECT -2 AS UserId -- Email exists.
       END
       ELSE
       BEGIN
              INSERT INTO [Users]
                        ([Username]
                        ,[Password]
                       ,[Email]
                        ,[CreatedDate])
              VALUES
                        (@Username
                        ,@Password
                        ,@Email
                        ,GETDATE())
             
              SELECT SCOPE_IDENTITY() AS UserId -- UserId                     
     END
END

پیکربندی Entity Framework
برای اتصال به پایگاه داده باید چارچوب Entity را پیکربندی کنید.
هنگامی که به انتخاب پایگاه داده رسیدید ، باید جدول کاربران و روش Insert_User Stored را همانطور که در زیر نشان داده شده انتخاب کنید.

هنگامی که دکمه Finish کلیک می شود، UserModel آماده است همانطور که در زیر نشان داده شده است.

 

گام بعدی این است که روش Insert_User Stored را با عملیات درج چارچوب Entity وارد کنید. برای انجام این کار، شما باید بر روی دکمه Right کلیک کنید، مدل Entity را انتخاب کرده و Mapped Procedure Map را که در زیر نشان داده شده انتخاب کنید.

هنگامی که پنجره جزئیات Mapping باز است، شما باید بر روی <Select Insert Function> کشویی کلیک کنید و روش Insert_User Stored را انتخاب کنید.

در نهایت از نتایج پیوندهای ستون ، بر روی افزودن پیوند نتیجه کلیک کنید و در UserId مقدار را تایپ و سپس بر روی سلول بعدی در ستون اپراتور کلیک کرده و به طور خودکار ویژگی UserId را در  ویژگی مربوط به ستون Cell را نمایش دهید .
توجه :

ALIAS برای ستون بازگشتی در Procedure Insert_User Store UserId است و از این رو در مقدار بازگشتی به property است، استفاده می شود.

Model
نیازی به کلاس Model برای این پروژه وجود ندارد، زیرا ما از کلاس Model Entity Framework استفاده می کنیم که به طور خودکار تولید می شود. شما آن را در Solution Explorer پیدا خواهید کرد که در زیر نشان داده شده است.

حالا شما باید Class User.cs را باز کنید و مطالب زیر را داشته باشید.

namespace User_Registration_MVC
{
    using System;
    using System.Collections.Generic;
   
    public partial class User
    {
        public int UserId { get; set; }
        public string Username { get; set; }
        public string Password { get; set; }
        public string Email { get; set; }
        public System.DateTime CreatedDate { get; set; }
        public Nullable<System.DateTime> LastLoginDate { get; set; }
    }
}

حالا شما نیاز به اضافه کردن حاشیه نویسی داده ها اعتبار و همچنین یک ویژگی اضافی ConfirmPassword به عنوان نشان دادن در زیردارید .
توجه :

قبل از بازسازی Model Entity Framework، باید نسخه ای از این کلاس را نگه دارید یا تغییرات آن را انجام دهید، همانطور که همه تغییرات شما تغییر خواهد کرد.

namespace User_Registration_MVC
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
 
    public partial class User
    {
        public int UserId { get; set; }
 
        [Required(ErrorMessage = "Required.")]
        public string Username { get; set; }
 
        [Required(ErrorMessage = "Required.")]
        public string Password { get; set; }
 
        [Required(ErrorMessage = "Required.")]
        [Compare("Password", ErrorMessage = "Passwords do not match.")]
        public string ConfirmPassword { get; set; }
 
        [Required(ErrorMessage = "Required.")]
        [EmailAddress(ErrorMessage = "Invalid email address.")]
        public string Email { get; set; }
       
        public System.DateTime CreatedDate { get; set; }
       
        public Nullable<System.DateTime> LastLoginDate { get; set; }
    }
}

توجه :

برای توضیح Annotations های مختلف داده مورد استفاده ، ایمیل و تأیید اعتبار رمز عبور، لطفا به مقالات زیرمراجعه کنید :

اعتبار سنجی (validation) سمت کاربر با استفاده از ویژگی های Annotation و جی کوئری

تأیید اعتبار ایمیل Client Side با استفاده از ویژگی های Annotation و جی کوئری در ASP.Net MVC

استفاده از Annotations و جی کوئری در رمز عبور Client Side و تایید اعتبار رمز عبور در ASP.Net MVC

Controller
Controller متشکل از دو روش است.
روش  دست زدن به عملیات GET
در داخل این روش View بازگردانده می شود.
روش اداره عملیات POST
این روش عملیات POST را انجام می دهد و هنگامی که فرم نمایش داده می شود، هدف کلاس کاربر به این روش ارسال می شود.
شیء کلاس Model کاربر دریافت شده با استفاده از چارچوب Entity به پایگاه داده وارد می شود و مقدار بازگشتی از روش Insert_User Stored Procedure در ویژگی UserId از شی Object Class Model User گرفته می شود.
همانطور که قبلا ذکر شد، روش ذخیره شده Insert_User منفی 1 (-1)، منفی 2 (-2) یا UserId از رکورد وارد شده را بازگشت می دهد.
بر اساس مقادیر بازگشتی، یک پیام رشته در شی ViewBag که بعدا در نمایش با استفاده از جعبه پیام هشدار جاوا اسکریپت نمایش داده می شود تنظیم شده است.

public class HomeController : Controller
{
    // GET: Registration
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(User user)
    {
        UsersEntities usersEntities = new UsersEntities();
        usersEntities.Users.Add(user);
        usersEntities.SaveChanges();
        string message = string.Empty;
        switch (user.UserId)
        {
            case -1:
                message = "Username already exists.\\nPlease choose a different username.";
                break;
            case -2:
                message = "Supplied email address has already been used.";
                break;
            default:
                message = "Registration successful.\\nUser Id: " + user.UserId.ToString();
                break;
        }
        ViewBag.Message = message;
 
        return View(user);
    }
}

View
در داخل View، در خط اول، کلاس User Model به عنوان Model for View نمایش داده می شود.
Viewشامل یک فرم HTML است که با استفاده از روش Html.BeginForm با پارامترهای زیر ایجاد شده است.
ActionName - نام اکشن در این مورد  Index است.
ControllerName - نام Controller در این مورد خانه است.
FormMethod - این روش فرم را یعنی GET یا POST مشخص می کند. در این مورد به POST تنظیم خواهد شد.
در داخل View، سه تابع HTML Helper زیر استفاده می شود :
1. Html.TextBoxFor - ایجاد TextBox برای ویژگی Model.
2. Html.PasswordFor - ایجاد یک TextBox رمز عبور برای ویژگی Model.
3. Html.ValidationMessageFor - نمایش پیام اعتبار سنجی برای ویژگی ها .
همچنین دکمه Submit وجود دارد که هنگام کلیک، فرم ارسال می شود.
بسته های اسکریپت jQuery و jQuery اعتبارسنجی در انتهای Model با استفاده از تابع Scripts.Render رندر می شوند.
شیء پیام ViewBag برای NULL بررسی شده و اگر NULL نباشد، پیام رشته با استفاده از جعبه پیام هشدار جاوا اسکریپت نمایش داده می شود.

@model User_Registration_MVC.User
 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
    <style type="text/css">
        body {
            font-family: Arial;
            font-size: 10pt;
        }
 
        table {
            border: 1px solid #ccc;
            border-collapse: collapse;
        }
 
        table th {
            background-color: #F7F7F7;
            color: #333;
            font-weight: bold;
        }
 
        table th, table td {
            padding: 5px;
            border: 1px solid #ccc;
        }
 
        .error {
            color: red;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <th colspan="3">
                    Registration
                </th>
            </tr>
            <tr>
                <td>
                    Username
                </td>
                <td>
                    @Html.TextBoxFor(m => m.Username)
                </td>
                <td>
                    @Html.ValidationMessageFor(m => m.Username, "", new { @class = "error" })
                </td>
            </tr>
            <tr>
                <td>
                    Password
                </td>
                <td>
                    @Html.PasswordFor(m => m.Password)
                </td>
                <td>
                    @Html.ValidationMessageFor(m => m.Password, "", new { @class = "error" })
                </td>
            </tr>
            <tr>
                <td>
                    Confirm Password
                </td>
                <td>
                    @Html.PasswordFor(m => m.ConfirmPassword)
                </td>
                <td>
                    @Html.ValidationMessageFor(m => m.ConfirmPassword, "", new { @class = "error" })
                </td>
            </tr>
            <tr>
                <td>
                    Email
                </td>
                <td>
                    @Html.TextBoxFor(m => m.Email)
                </td>
                <td>
                    @Html.ValidationMessageFor(m => m.Email, "", new { @class = "error" })
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="Submit"/>
                </td>
                <td></td>
            </tr>
        </table>
    }
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryval")
    @if (@ViewBag.Message != null)
    {
        <script type="text/javascript">
            $(function () {
                alert("@ViewBag.Message")
            });
        </script>
    }
</body>
</html>

عکسها

جعبه پیام هنگام ثبت نام موفق

جعبه پیام هنگامی که نام کاربری وجود دارد

 

جعبه پیام هنگامی که آدرس ایمیل وجود دارد

رکورد کاربر وارد جدول شده است

 

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :