پروژه‌ی عملی – اعتبارسنجی داده های فرم

آموزش ASP.NET Core
آموزش ASP.NET Core

سلام ، با آخرین جلسه از آموزش پروژه خوش آمدگویی در خدمت شما هستم در این جلسه از آموزش ASP.NET Core قصد دارم تا نحوه اعتبارسنجی فرم ها در ASP.NET Core را به شما آموزش دهم .

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

بدون اعتبارسنجی فرم ها ، کاربران ممکن است داده های بی معنی و یا حتی فرم خالی را ارسال کنند . معمولا در یک پروژه ی MVC اعتبارسنجی را در سطح مدل انجام می دهند  نه در سطح نما یا رابط کاربری ، این به معنی آن است که قوانین اعتبار داده هاباید در یک محل (مدل داده ها) اعمال شود . MVC برای اعتبارسنجی داده های فرم از فضای نام System.ComponentModel.DataAnnotations استفاده می کند که باید به مدل پروژه اضافه شود. مدل GuestResponse را به صورت زیر ویرایش کنید :

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;

namespace WellComeProject.Models
{
    public class GuestResponse
    {
        [Required(ErrorMessage ="وارد نمودن نام الزامی است.")]
        public string Name { get; set; }  // نام

        [Required(ErrorMessage = "وارد نمودن نام خانوادگی الزامی است.")]
        public string Family { get; set; } // نام خانوادگی 

        [Required(ErrorMessage = "وارد نمودن شماره تماس الزامی است.")]
        public string Phone { get; set; } // شماره تلفن

        [Required(ErrorMessage = "لطفا حضور و یا عدم حضور خود را در جشن اعلام کنید.")]
        public bool?  WillAttend { get; set; } // اعلام حضور یا عدم حضوردرجشن
    }
}

MVC به صورت خودکار در زمان اجرای فرایند مقیدسازی مدل ، صفت های بالا را برای اعتبارسنجی داده های ورودی مورد توجه قرار می دهد. در کد بالا از صفت [()Required] استفاده نموده ایم تا کاربر را وادار کنیم که همه داده های فرم را وارد نماید .

در کلاس کنترلر برای کشف مشکلات احتمالی اعتبارداده ها ، از خاصیت ModelState.IsValid استفاده شده است. کلاس پایه Controller دارای خاصیتی به نام ModelState است که اطلاعات مفیدی در مورد تبدیل داده های درخواست HTTP به اشیا کلاس در اختیار می گذارد . اگر مقدار ModelState.IsValid برابر True باشد ، MVC در کاربرد محدودیت های اعتبارسنجی کلاس مشکلی نداشته است . در این وضعیت می توان نمای Thanks را با اطمینان نشان داد .

از سویی دیگر در وضعیتی که مقدار ModelState.IsValid برابر False باشد با خطاهای اعتبارسنجی برخورد داشته ایم . شی برگشت داده شده توسط خاصیت ModelState شامل جزئیات خطاهای پیش آمده است. با این حال ، از آنجا که فراوانی متد ()View بدون هیچ پارامتری ، به شکل خودکار کاربر را از وقوع این خطاها با خبر می کند . نیازی به کاوش در جزئیات خصوصیت ModelState نخواهد بود. کنترلر WellCome را به صورت زیر ویرایش کنید:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using WellComeProject.Models;

namespace WellComeProject.Controllers
{
    public class WellCome : Controller
    {
        public ViewResult Index()
        {
            ViewBag.WellCome = "سلام مهمان گرامی به جشن ما خوش آمدید";
            return View();
        }

        [HttpGet]
        public ViewResult Create()
        {
            return View();
        }

        [HttpPost]
        public ViewResult Create(GuestResponse guestResponse) 
        {
            if(ModelState.IsValid)
            {
                Repository.AddResponse(guestResponse);
                return View("Thanks", guestResponse);
            }

            else
            {
                return View();
            }
            
        }

        public ViewResult ListGuests()
        {
            return View(Repository.Responses.Where(r=>r.WillAttend==true));
        }
    }
}

زمانی که MVC نمایی را نشان می دهد . Razor به همه خطاهای اعتبارسنجی دسترسی دارد.بنابراین با استفاده از Tag Helper های مناسب می توان کاربر را از پیشامد این خطاها با خبر کرد. کد زیر ، صفات اضافه شده مربوط به Tag Helper های یاد شده به نمای Create را نشان می‌دهد.

@model WellComeProject.Models.GuestResponse
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
    <link href="~/css/site.css" rel="stylesheet" />
    <style>
        .container {
            margin-top: 40px;
            direction: rtl;
            width:40% !important;
            line-height: 28px;
        }
        label{
            font-weight:100 !important;
        }
    </style>
</head>
<body>
    <div class="container alert alert-info">
        <form asp-action="Create" method="post">
            <div asp-validation-summary="All"></div>
            <p>
                <label asp-for="Name">نام </label>
                <input asp-for="Name" class="form-control" />
            </p>

            <p>
                <label asp-for="Family">نام خانوادگی </label>
                <input asp-for="Family" class="form-control" />
            </p>

            <p>
                <label asp-for="Phone">تلفن </label>
                <input asp-for="Phone" class="form-control"/>
            </p>

            <p>
                <label>آیا در مهمانی شرکت خواهید کرد ؟</label>
                <select asp-for="WillAttend" class="form-control">
                    <option value="">انتخاب کنید</option>
                    <option value="True">بله</option>
                    <option value="False">خیر</option>
                </select>
            </p>

            <button type="submit" class="pull-left btn btn-success">ارسال اطلاعات فرم</button>
            
        </form>
    </div>
</body>
</html>

صفت as-validation-summary در عنصر div به کار می‌رود و لیستی از خطاها را هنگام نمایش نما ، نشان می‌دهد. محتوای صفت گفته شده از مقدار شمارشی ValidationSummary گرفته می‌شود که مشخص کننده‌ی نوع خطاهایی است که این صفت باید دارا باشد . در اینجا از All (نمایش همه ی خطاها) استفاده شده است برای آشنایی بیشتر با چگونگی کارکرد این صفت ، پس از اجرای برنامه ، تنها نام را وارد کنید و بقیه فیلدها رو خالی رها کنید.

متد اکشن زمانی که تمام محدودیت های به کار رفته در کلاس GuestResponse برآورده نشده باشند، نمای Thanks را نمایش نخواهد داد. به عنوان مزیت دیگری در کاربرد مقیدسازی مدل ، توجه کنید که اطلاعات وارد شده در فیلد name مقدار خود را در برگشت از سرور و نمایش خطاها ، حفظ کرده است.

بسیار خب ، این جلسه آموزشی هم به پایان رسید درصورتی که سوالی ، انتقادی و یا پیشنهادی در مورد آموزش ASP.NET Core داشتید حتما در قسمت نظرات پست مطرح کنید.

 

فیلم آموزشی asp.net core 2

آرزو ابراهیمی
بیش از 6 سال است که زمینه طراحی و توسعه سایت فعالیت می‌کنم، طراح و برنامه نویس انواع سامانه‌های تخصصی پزشکی، مناقصات، فروشگاهی و … بودم و هستم و هدفم در سایت میزفا ارائه اطلاعات بروز و ناب در زمینه طراحی سایت است. تا از این طریق بتونم تجربیات و دانسته های خودم را با تمامی علاقمندان به مباحث طراحی سایت به اشتراک بزارم .

فیلم آموزشی asp.net core 2

2 نظر

2 پاسخ

  1. خانم ابراهیمی
    ممنون از زحماتتون
    این دوره تموم شده یا ادامه میدین؟

    1. با سلام …. این دوره ادامه دارد و من درحال حاضر مشغول به آماده سازی فصل ها جهت انتشار آموزش ویدیویی در سایت هستم … موفق باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=