Let's learn how to send a request to the Controller using Ajax. Sending requests to the Controller is a common need. Here we will learn how we can send the request through ajax. The first step is to include scripts in the folder.
Include Ajax Scripts
First, you need to ensure you have ajax-unobtrusive scripts in the folder. If not please download and add to the wwwroot or you can right-click on Wwwroot
Add-->Client Side Library
Search for ajax and install it. It will automatically add all the scripts in the www root.
Add Ajax in the form tag
<form method="post" data-ajax="true" data-ajax-complete="mycompelte" data-ajax-success="mysuccess" asp-action="AddHotel" asp-controller="Hotel" data-ajax-loading="#myloader">
data-ajax="true"
data-ajax-complete="mycompelte" (Complete Event, create javascript method of any name)
data-ajax-success="mysuccess" (Success Event, create javascript method of any name, In this example, I have used mysuccess method name)
asp-action="AddHotel" (MVC Method Name)
asp-controller="Hotel" (MVC Controller Name)
data-ajax-loading="#myloader" (For Loader)
<div class="d-flex justify-content-center">
<div role="Status" class="spinner-border" id="myloader" style="display:none;">
<span class="sr-only">Loading....</span>
</div>
</div>
Once you press the submit button it automatically sends the request to Add Hotel method asynchronously. Once the work is done it runs the success and completes the javascript method.
Now, let's learn how to add validation.
public class HotelModel
{
public int HotelId { get; set; }
[Required(ErrorMessage = "*")]
public string HotelName { get; set; }
[Required(ErrorMessage = "*")]
public string Address { get; set; }
}
For this, you need to use asp-validation-for property in the span tag, shown below. For input control, you can use @Html.TextBoxFor or input asp-for.
<input asp-for="HotelName" />
<span asp-validation-for="HotelName" class="text-danger"></span>
@Html.TextBoxFor(d => d.Address,new{style="width:75%;"})
<span asp-validation-for="Address" class="text-danger"></span>
Also, you need to include the necessary files to run the validations.
1. JQuery
2. JQuery.Validate
3. JQuery.Validate. unobtrusive
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script type="text/javascript">
function mysuccess(data) {
}
</script>
