اعتبارسنجی سمت کاربر RadioButton در MVC

در این مقاله قصد داریم چگونگی اعتبار سنجی سمت کاربرRadioButton در ASP.Net MVC Razor با استفاده از jQuery را توضیح دهیم.

اعتبار سنجی سمت سرور با استفاده از Model class و صفت Data Annotation انجام میشود.

پیکربندی bundles و فعال سازی اعتبار سنجی سمت سرور :

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

Model :

کلاس مدل شامل یک property است که دارای صفت Required} Data Annotation} است.

در هر MSDN ، صفت Data Annotation برای MVC تهیه شده است که برای اعتبار سنجی سمت سرور و سمت کلاینت است و هیچگونه کد اضافی را شما نباید بنویسید.

صفت های Data Annotation میتوانند در Linq to Sql ، Entity data model و بقیه data model ها استفاده میشود.

Required} Data Annotation} دارای یک property برای اعلام خطا است که مقدار string میگیرد.

این خطا هنگامی که کاربر آن فیلد را پر نکرده باشد و دکمه Submit را زده باشد رخ میدهد.

public class PersonModel
{
    [Required(ErrorMessage = "Gender is required.")]
    public string Gender { get; set; }
}

Controller :

کنترلر شامل دو اکشن متد است.

یک اکشن متد برای مدیریت عملیات GET

که در این اکشن یک view ساده برگردانده میشود.

یک اکشن متد برای مدیریت عملیاتPost

در این اکشن هنگامی که فرم submit میشود ، Object کلاس PersonModel به این متد ارسال میشود.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
 
    [HttpPost]
    public ActionResult Index(PersonModel person)
    {
        return View();
    }
}

view :

در داخل view ، در خط اول کلاس personModel برای view تعریف شده است.

view شامل یک HTML Form که با استفاده از متد html.beginForm با پارامتر های آن ساخته شده است.

ActionName : اسم اکشن است. در این مورد اسم اکشن index است.

ControllerName : اسم کنترلر است. در این مورد اسم کنترلر home است.

FormMethod : این نوع متد ارسالی GET یا Post را تعریف میکند. که در این مورد post است.

در داخل view سه HtmlHelper داریم که در اینجا استفاده شده است.

1- html.Label- نمایش متن برای هر RadioButton.

2- Html.RadioButtonFor- ساختن یک RadioButton برای Model property.

3-Html.ValidationMessageFor- نمایش پیغام خطا برای اعتبار سنجی ها.

و کلیدی برای submit کردن فرم در این صفحه وجود دارد.

bundleهای jQuery و اعتبار سنج jQuery در آخر مدل با استفاده از متد Script.Render میتوانند render شوند.

@model RadioButton_Validation_MVC.Models.PersonModel
 
@{
    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;
        }
 
        .error {
            color: red;
        }
    </style>
</head>
<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <table>
            <tr>
                <td>@Html.DisplayFor(m => m.Gender)</td>
                <td>
                    @Html.Label("Male")
                    @Html.RadioButtonFor(model => model.Gender, "M")
                    @Html.Label("Female")
                    @Html.RadioButtonFor(model => model.Gender, "F")
                </td>
                <td>@Html.ValidationMessageFor(m => m.Gender, "", new { @class = "error" })</td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Submit"/></td>
                <td></td>
            </tr>
        </table>
    }
</body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
</html>

خروجی :