Tuesday 12 December 2017

Client Side RadioButton validation in ASP.Net MVC Razor using jQuery

Client Side RadioButton validation in ASP.Net MVC Razor using jQuery

Description:

In this example we explain that how to validate RadioButton in Razor View in MVC.or client side validation for the RadioButton in MVC Razor using jQuery. Or how to perform client side validation for RadioButton in Asp.Net MVC Razor using jQuery.

Here we demonstrate that how to perform client side validation for the RadioButton using Model class and Data Annotation attributes in MVC.
Model:

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

Controller:

public class EmployeeController : Controller
    {

        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Index(EmployeeModel emp)
        {
            return View();
        }
    }

View:

@model RadioButton_Validation_MVC.Models.EmployeeModel

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Client Side RadioButton validation in ASP.Net MVC Razor using jQuery</title>
</head>
<body>
    @using (Html.BeginForm("Index", "Employee", 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>


0 comments:

Post a Comment