فرم ثبت نام با MVC

فرم ثبت نام با mvc

فرم ثبت نام با MVC ، در این مقاله به ایجاد یک صفحه ثبت نام و ورود به سایت با استفاده از ASP.NET MVC در MVC خواهیم پرداخت.

مطالبی که قبلا بلد بودیم و استفاده می کردیم:

  •  Razor Engine
  •  And MVC (Model, View, Controller)
  •  Data Annotations

و مواردی که می خواهیم استفاده کنیم:

  • Scaffolding
  •  Introduction to Context class
  • Connection String
  • Debugging

ما به دو تا نرم افزار نیاز داریم:

  •  Visual Studio 2017
  •  SQL Server

اگر شما نرم افزار sql را نصب ندارید نگران نباشید زمانی که visual خود را نصب کردید می توانید آن را چک نمایید که ببینید در سیستم نصب شده است یا نه، به صورت زیر:

فرم ثبت نام با MVC

فرم ثبت نام با MVC

شما می تونیداز طریق localdb دیتابیس را نصب نمایید ولی اگر باز هم نصب نکردید پیشنهاد می کنم که ابتدا آن را نصب نمایید سپس این آموزش را ادامه دهید.

ابتدا visual خود را باز کنید و یک پروژه ی خالی از نوع mvc ایجاد نمایید به صورت زیر:

فرم ثبت نام با MVC

فرم ثبت نام با MVC

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

 
using System;  
using System.ComponentModel;  
using System.ComponentModel.DataAnnotations;  
   
namespace RegistrationApp.Models  
{  
    public class Student  
    {  
        [Required(ErrorMessage = "Please Enter Name e.g. John Doe")]  
        [StringLength(30, MinimumLength = 3)]  
        public string Name { get; set; }  
   
        [Required]  
        [EmailAddress]  
        public string Email { get; set; }  
   
        [Required]  
        [Compare("Email")]  
        public string RetypeEmail { get; set; }  
   
        [DisplayName("Phone Number")]  
        public string Phone { get; set; }  
   
        [RegularExpression("^[0-9+]{5}-[0-9+]{7}-[0-9]{1}$")]  
        [Required]  
        public string Cnic { get; set; }  
   
        [Range(18, 25)]  
        public string Age { get; set; }  
   
        [StringLength(35)]  
        public string City { get; set; }  
   
        public string Address { get; set; }  
   
        [Required]  
        [DataType(DataType.Date)]  
        public DateTime? DateOfBirth { get; set; }  
    }  
}  

فرم ثبت نام با MVC

با استفاده از روش scaffolding شما می توانید چهار عملیات افزودن-ویرایش –حذف را داشته باشید.

ماکروسافت کار شما را راحت کرده است و به شما کمک می کند که ۴ عملیات را بدون نوشتن کد داشته باشید.

ولی با استفاده از scaffolding شما فقط باید ۴ عمل اصلی را داشته باشید و هیچ کار دیگر را نمی توان کرد برای همین بهتر است که خودتان کد نویسی کنید باعث می شود از خودتان یک برنامه نویس بسازید.

زیرا عملیات CRUD باعث می شود که دیگر خودتان کد نویسی انجام ندهید و یک سری کد آماده را در اختیار شما قرار می دهد.

برای اینکه بخواهید قالب این عملیات را سفارشی کنید باید از T4 ها استفاده کنید ولی برای scaffolding روی گزینه ی Controller کلیک راست نمایید مانند تصویر زیر و scaffolding را ایجاد نمایید.

فرم ثبت نام با MVC

فرم ثبت نام با MVC

در پنجره ی بالا همان طور که میبینید وقتی این گزینه را انتخاب می کنید تمام view های مورد نظر را هم برای شما ایجاد می کند.

همان طور که می بینید عملیات با استفاده از Entity Framework انجام می شود.چند دقیقه طول می کشد که view ها و controller های شما ایجاد شود.

اگر گزینه ی بالای را بزنید فقط برای شما عملیات CRUD را انجام می دهد برای درست کردن view ها باید روی آن ها کلیک راست کنید و آن را ایجاد نمایید.

Entity Framework چیست؟

قبل از استفاده از EF برای افزودن اطلاعات و ارتباط با دیتابیس از Ado,net استفاده می کردند و برای قرار دادن اطلاعات از dstsset استفاده می کردند .

استفاده از این تکنولوژی دردسر های زیادی داشت و اینکه خیلی طول می کشید تا داده را درست کنند برای همین با استفاده از این تکنولوژی کد نویسی هم کمتر شد و برای برنامه نویسان هم کار راحت تر شد.

حالا بحث EF را برای بعدا می گذاریم برای ساخت view یک پنجره به صورت زیر برای شما باز می شود:

فرم ثبت نام با MVC

فرم ثبت نام با MVC

Model Class

ما از کلاس student که نوشتیم استفاده می کنیم و برای دیتابیس هم از data contex استفاده می کنیم.

این کلاس data contex در واقع کلاس Model و پایگاه داده ی ما را به هم وصل می کند روی contex کلیک کنید و کلاس مورد نظر را انتخاب نمایید به صورت زیر:

پنجره ای که باز شده است باید به صورت زیر باشد:

فرم ثبت نام با MVC

فرم ثبت نام با MVC

هدف از گرینه های تیک خورده ی بالا چیست؟

شما بااستفاده از کتابخانه های اسکریپتی می توانید برای فرم خودتان validation ایجاد نمایید برای همین این تیک برای شما می خورد به صورت تصویر بالا.

همان طور که می دانید validation های دو نوع مختلف هستند:

  • Client Side
  •  Server Side

ما قبلا برای اینکه از validation ها استفاده کنیم از سمت سرور این کار را می کردیم ولی حالا می خوایم در سمت کلاینت این کار را انجام دهید.

ماکروسافت چند کتابخانه در سمت کلاینت معرفی کرده است که به صورت زیر است که با استفاده از این کتابخانه های سمت کلاینت می توانیم اعتبار سانجی سمت کلاینت داشته باشیم

دو کتابخانه ای که باید اضافه کنید به صورت زیر است:

  •  jquery.validate.min.js
  •  jquery.validate.unobtrusive.min.js

زمانی که آن ها را اضافه می کنید به صورت زیر است:

  •  jquery.validate.min.js
  • jquery.validate.unobtrusive.min.js

فرم ثبت نام با MVC

فرم ثبت نام با MVC

ممکن است به ارور زیر بخورید:

فرم ثبت نام با MVC

فرم ثبت نام با MVC

اگر می خواهید یک برنامه نویس قوی باشید اصلا نترسید وتا جایی که ممکن است با این خطاها بازی کنید.

این خطا به شما می گوید هر زمان که یک مدل کلاس ایجاد می کنید قبل از ساختن هر چیزی یک بار پروژه ی خودتان را build کنید و بعد شروع به کار کنید.

Ctrl + Shift + B =این باعث می شود که یک بار پروژه ی شما build شود.

در واقع مشکل از خود کلاسی است که ایجاد شده است ما برای همین کلاس را در visual می نویسیم چون خود کلای که نوشته ایم دارای ارور است و باید اول آن را رفع کنیم وبعد پروژه مان را build نماییم.

Controller را مانند قبل ایجاد نمایید یک خطا می بینید.

فرم ثبت نام با MVC

فرم ثبت نام با MVC

این خطا به شما می گوید که شما یک کلاس ایجاد کردید ولی هیچ کلید اصلی ندارد.

شما باید ابتدا به آن یک کلید اصلی اضافه نمایید

مانند کد زیر

public int Id { get; set; }  

و حالا یک بار دیگر عملیات rebuild را انجام دهید حالا می بینید که درست کار می کند و بعد می توانید view های خودتان را اضافه نمایید.

حالا می توانید نمای کلی پروژه ی خود را ببینید که به صورت زیر است:

فرم ثبت نام با MVC

فرم ثبت نام با MVC

عملیات Crud را با استفاده از Scaffolding ایجاد کردیم که آن را در خط های بعدی بررسی می کنیم اما اکنون می خواهیم نحوه ی صدا زدن action ih در خواست ها را در مرورگر خود ببینیم.

ConnectionString

رشته ی اتصال به دیتابیس یه صورت زیر خواهد بود.

connectionStrings/connectionStrings  

برای اتصال به بانک باید رشته ی زیر را بنویسید:

connectionStrings
  add name="RegistrationAppContext" connectionString="Data Source=(localdb)\MSSQLLocalDB; Initial Catalog=RegistrationAppContext-20180228230139; Integrated Security=True; MultipleActiveResultSets=True; AttachDbFilename=|DataDirectory|RegistrationAppContext-20180228230139.mdf" providerName="System.Data.SqlClient" /
/connectionStrings

هدف از نوشتن رشته ی اتصال چیست؟

رشته ی اتصال رشته ای است که به شما اطلاعات دقیق در مورد نام سرور و دیتابیس تون و نام کاربری و کلمه عبور مربوط به هاست را به شما می دهد.

اگر شما از دیتابیس local استفاده می کنید یک دیتابیس داخل خود پروژه تون دارید ایجاد می کنید و یک رشته ارتباطی داخل خود برنامه ی شما ایجاد می کند ولی رشته اتصالی داخل برنامه کار جالبی نیست و شما باید یک رشته ی اتصالی و یک دیتابیس داشته باشید.

زمانی که شما از پایگاه داده local استفاده می کنید و برنامه تونو اجرا می گیرید داخل برنامه تون دیتابیس اجرا می شود و در زمان اجرای برنامه دیتابیسی که داخل برنامه هست صدا زده می شود و کمی طول می کشد تا برنامه اجرا شود و داده ها از دیتابیس محلی خوانده شود.
در تصویر زیر از دیتابیس محلی استفاده شده است و جدول دانش آموز در آن ایجاد شده است

فرم ثبت نام با MVC

فرم ثبت نام با MVC

ولی این روش زیاد توصیه نمی شود ما باید ابتدا دیتابیس را طراحی کنیم و بعد در دیتابیس آن را ایجاد کنیم و بعد آن را توسعه دهیم.

زمانی که برنامه اجرا شد اعتبار سنجی هایی را که درست کردیم آن ها را بررسی می کنیم

فرم ثبت نام با MVC

فرم ثبت نام با MVC

چگونه یک رشته ارتباطی به راحتی بنویسیم؟

حالا شاید بخواهید دیتابیس را اجیاد کنید به صورت محلی دیتابیس برای خودتان نسازید باید مراحل زیر را طی نمایید.

فرم ثبت نام با MVC

فرم ثبت نام با MVC

همان طور که در تصویر بالا می بینید برای شما نام سرور را می پرسد و همین طور اگر شما در مراحل نصب نام کاربری و کلمه ی عبور تعریف کرده باشید باید آن ها را هم وارد کنید تا بتواند به دیتابیس متصل شوید.

برای اتصال به دیتابیس از کد زیر می توانید استفاده کنید:

Server=Servername + semi colon (;)  
OR  
Data Source= Servername + semi colon (;)  
add name="RegistrationAppContext" connectionString="Server=DESKTOP-2FA7R8U;" providerName="System.Data.SqlClient" /

برای ایجاد دیتابیس از کد زیر می توانید استفاده نمایید

Database=Databasename + semi colon (;)  
//OR  
Initial Catalog= Databasename + semi colon (;)  
add name="RegistrationAppContext" connectionString="Server= DESKTOP-2FA7R8U;Database=RegistrationApp;" /

بهترین روش برای نام گذاری دیتابیس این است که نام دیتابیس شما همنام پروژه تان باشد که به شما یادآوری شود.
اگر نام کاربری و کلمه عبور تعریف نکرده باشید به صورت زیر خواهد بود:

Trusted_Connection=True;  
//OR  
Integrated Security=True;  
lt;add name="RegistrationAppContext" connectionString="Server= DESKTOP-2FA7R8U;Database=RegistrationApp;Trusted_Connection=True;" / 

اما به یاد داشته باشید که برای امنیت بهتر در رشته ی اتصال بهتر است زمانی که از نام کاربری و یا کلمه ی عبور استفاده نمی کنید از Trusted_Connection در کد هایتان استفاده نمایید

Trusted_Connection=True;  
//OR  
Integrated Security=True;  
add name="RegistrationAppContext" connectionString="Server= DESKTOP-2FA7R8U;Database=RegistrationApp;Trusted_Connection=True;" /

چون ما با نرم افزار ssms کار می کنیم پس باید از این خط استفاده نمایمم به صورت زیر:

providerName="System.Data.SqlClient" 

این کد به ما می گویدکه شما می توانید از هر دستوری در کد خودتان استفاده نمایید.
در نهایت رشته ی اتصال به صورت زیر خواهد بود:

add name="RegistrationAppContext" connectionString="Server= DESKTOP-2FA7R8U;Database=RegistrationApp;Trusted_Connection=True;"providerName="System.Data.SqlClient" /

حالا این برنامه را می توانید اجرا کنید نمای کلی دیتابیس به صورت زیر خواهد بود:

فرم ثبت نام با MVC

فرم ثبت نام با MVC

حالا می خواهیم در مورد اعتبار سنجی ها صحبت کنیم

در مورد اعتبار سنجی سمت clientاین نوع اعتبار سنجی سمت مرورگر اتفاق می افتد و پاسخ فوری سمت مرورگر انجام می شود.

آن ها قبل از ارسال به سمت سرور در مرورگر ظاهر می شوند و در مورد چگونه وارد کردن اطلاعات به شما توضیح داده می شود
مانند:

  •  HTML5
  •  Javascript code
  • JQuery

این زبان های برنامه نویسی عملکرد بهتری دارد و می توانند سفارشی هم شوند.

اعتبار سنجی سمت سرور

این اعتبار سنجی ها سمت سرور انجام می شود و بعد در فرم نشان داده می شود.

در سمت کلاینت پیام ها بدون در خواست ارسال ظاهر می شود

فرم ثبت نام با MVC

فرم ثبت نام با MVC

اعتبار سنجی الگوی CNIC ما خوب نیست.

نگران نباشید و به برنامه اضافه کنید و برنامه را مجدداً اجرا کنید.

هنگامی که ما بر روی ثبت کلیک می کنیم مرورگر جدید ایجاد می شود و باز می شود.

اما وقتی که به شکل نادرست پر می کنیم همان لحظه پیامی را در کنار فیلد خود میبینیم.

این اعتبار سنجی های سمت client فعال هستند و همان جا در فرم نمایش داده می شوند.

فرم ثبت نام با MVC

فرم ثبت نام با MVC

زمانی که شما صفحه ی create را باز می کنید صفحه ی بالا باز میشود که می بینید کتابخانه های آن اضافه شده است.

شما حتما فکر می کنید که این کتابخانه ها چگونه کار می کنند.

این کتابخانه ها در صفحه ی layout قرار دارند اما شما چگونه می خواهید بفهمید که کدام صفحه به این فرم نیاز دارد و به اعتبار سنجی ها باید کار کند.

کار سخت هست و درست نیست که در یک صفحه هم که نیاز به اعتبار سنجی ندارد شما اعتبار سنجی برای آن اضافه کنید.

Server Side Validation چگونه کار می کند؟

ما میدانیم که فرم صفحه ی create نیاز به اعتبار سنجی دارد برای همین در این قسمت فرم اعتبار سنجی را برای آن فعال  می کنیم مانند قطعه کد زیر که نوشتیم:

فرم ثبت نام با MVC

فرم ثبت نام با MVC

شما با استفاده از کد بالا می توانید به فرم تان بگویید که اگر مدل شما نیاز به اعتبار سنجی دارد آن را فعال کند و اگر مدل شما معتبر نیست دیگر نیازی نیست که اعتبار سنجی استفاده شود.

Debugging

در نهایت شما در این مقاله مطالب زیادی را یاد گرفتید:

  1. اینکه چگونه breakpoint را چک کنید با F9
  2. اینکه چگونه عملیات اشکال زدایی انجام دهید با F5
  3. اینکه شما چکونه یک صفحه را ایجاد نمایید.

فرم ثبت نام با MVC

فرم ثبت نام با MVC

شما می توانید از طریق این پنجره ای که در بالا قرار دارد تعداد خطای خود را چک کنید.

از ۰ بیشتر شد یعنی برنامه شما دارای خطا است و باید آن را برطرف کنید.

  • پسورد: www.mspsoft.com
زهره سلطانیان

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    rahmat پاسخ

    سلام
    ممنون بابت آموزشتون
    سورسش کجاست؟

      مسعود شریفی پور پاسخ

      آموزش به صورت کامل داده شده است.
      مشکل چیست ؟