Validate Checkbox Selected or Not in Asp.net Core MVC Using jQuery

In today's article I will show a tutorial with an example how you can validate that user have selected the checkbox or not in asp.net core mvc application using jQuery and c#.net. Here I am going to use asp.net core 8 mvc with c#.net. Here I am using Html.CheckBoxFor. So, for this article first we will create a new asp.net core 8 mvc application and add a model class file and add the below code in it.

public class Pagecheck
{
   public bool SelectionStatus { get; set; }
}

Here in above code, I have defied a property. It is for binding the checkbox. After this we will add a controller class file and add a HttpGet method on it.

[HttpGet]
public IActionResult Page()
{
    return View();
}

Above I have created a HttpGet method named as Page(). Now we will create a view for the action method and add the below code in it.

 @model Pagecheck
@{
	ViewData["Title"] = "Page";
	<script src="~/lib/jquery/dist/jquery.min.js"></script>
}
@using (Html.BeginForm("Page", "Home", FormMethod.Post))
{
	<table width="200px">
		<tr>
			<td colspan="2">
				<div class="alert-danger" id="divmessage" style="display:none">Please select checkbox</div>
			</td>
		</tr>
		<tr>
			<td>@Html.CheckBoxFor(m => m.SelectionStatus, new { @class = "form-check"})</td>
			<td><label for="SelectionStatus">codemantra99</label></td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="Submit" onclick="return Validate();" />
			</td>
		</tr>
	</table>
	<div style="color:red;">@ViewBag.Message</div>
}
<script>
	var Validate=function(){
		var status=$("#SelectionStatus").prop('checked');
		if(status==false){
			$("#divmessage").show();
		}
		return status;
	}
</script>

In above code I have added the reference of model class. In next step I have added reference of jQuery library. So, this reference we required to validate the checkbox is selected or not. Now let's bind the checkbox.

Before bind I have displayed the message is user did not select the option. Please check the jQuery code.

<script>
	var Validate=function(){
		var status=$("#SelectionStatus").prop('checked');
		if(status==false){
			$("#divmessage").show();
		}
		return status;
	}
</script>

In above code I have first I have validated whether the checkbox is selected r not. If it is not selected, I am making the message appear for user to select the checkbox. Otherwise returning checked status as true or false. If it is checked we are moving to controller, where the HttpPost method execution happen. On click of submit button the validation method has been called.

[HttpPost]
public IActionResult Page(Pagecheck pagecheck)
{
    if (pagecheck.SelectionStatus)
    {
        ViewBag.Message = "Thanks you for selection";
    }
    return View();
}

Here we are getting the selected value of the checkbox control with the help of control name which is SelectionStatus. Pagecheck is passed as parameter which is having SelectionStatus property. After getting the value I have validated whether the value is true or not if it is true on that case, we are assigning the value to ViewBag to display in view. Now we have done run the code to check output.