How to use Ajax form in ASP.NET Core – Razor Pages
In your article, I am going to show you how to use ajax form in ASP.NET Core 3.1. Also, I will give you an example to show you how to add a record to a table whit out refreshing page.
- Create a new project in ASP.NET Core (Razor Page)
- Create a .cs file called TestModel.cs and add following code:
public class TestModel
{
public int id { get; set; }
public string name { get; set; }
public int age { get; set; }
public string email { get; set; }
}
- Create a Partial View called _Table.cshtml in Share folder and add below codes:
@model IList<TestModel>
@{
if (Model != null)
{
foreach (var item in Model)
{
<tr>
<th scope="row">@item.id</th>
<td>@item.name</td>
<td>@item.age</td>
<td>@item.email</td>
</tr>
}
}
}
- In _Layout.cshtml add -ajax.js (See the source code)
<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>
- Add a gif loading file to project wwwroot (find the source file)
- In Index.cshtml file add following codes:
<div>
<section id="progressInternal" class="loaderInternal my-center-div" style="display: none;z-index: 1000">
<img src="~/loading.gif" class=" my-center" style="width: 10em;z-index: 1000" />
</section>
<table class="table" id="">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody id="panel">
<partial name="_Table" model="Model.lsName"/>
</tbody>
</table>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<form class="form-horizontal" method="post" data-ajax="true" data-ajax-method="post" data-ajax-mode="update" data-ajax-loading="#progressInternal" data-ajax-update="#panel" data-ajax-complete="completed" data-ajax-failure="failed">
<div class="card-body">
<h4 class="card-title">Add a new user</h4>
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group row">
<label for="fname2" class="col-sm-3 text-right control-label col-form-label">ID</label>
<div class="col-sm-9">
<input type="number" class="form-control" asp-for="Input.id">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group row">
<label for="lname2" class="col-sm-3 text-right control-label col-form-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" asp-for="Input.name">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-lg-6">
<div class="form-group row">
<label for="uname1" class="col-sm-3 text-right control-label col-form-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" asp-for="Input.age">
</div>
</div>
</div>
<div class="col-sm-12 col-lg-6">
<div class="form-group row">
<label for="nname" class="col-sm-3 text-right control-label col-form-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" asp-for="Input.email">
</div>
</div>
</div>
</div>
</div>
<hr>
<hr>
<div class="card-body">
<div class="form-group mb-0 text-right">
<button type="submit" class="btn btn-info waves-effect waves-light">Save</button>
<button type="button" class="btn btn-dark waves-effect waves-light">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
@section scripts{
<partial name="_ValidationScriptsPartial" />
<script>
failed = function (xhr) {
alert(`Status: {xhr.status}, Status Text: {xhr.statusText}`);
};
completed = function (xhr) {
document.getElementById("progressInternal").style.display = "none";
};
</script>
}
<style>
.loaderInternal {
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
-moz-opacity: 0.8;
display: none;
right: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
.my-center-div {
display: flex;
align-items: center;
justify-content: center;
}
.my-center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
- In Index.cshtml.cs file add following codes:
public class IndexModel : PageModel
{
private readonly ILogger<IndexModel> _logger;
public IndexModel(ILogger<IndexModel> logger)
{
_logger = logger;
}
[BindProperty]
public TestModel Input { get; set; }
public List<TestModel> lsName { get; set; }
public void OnGet()
{
lsName = GetDataFromDatabase();
}
public IActionResult OnPost()
{
List<TestModel> lsTestModel = new List<TestModel>();
lsTestModel = GetDataFromDatabase();
lsTestModel.Add(new TestModel() { id = Input.id, name = Input.name, age = Input.age, email = Input.email });
lsName = lsTestModel;
return Partial("_Table", lsTestModel);
return Page();
}
public List<TestModel> GetDataFromDatabase()
{
List<TestModel> lsTestModel = new List<TestModel>();
lsTestModel.Add(new TestModel() { id = 1, name = "Kamal", age = 38, email = "habibi.kamal@yahoo.com" });
lsTestModel.Add(new TestModel() { id = 2, name = "Austin", age = 18, email = "Austin@cutecodes.com" });
lsTestModel.Add(new TestModel() { id = 3, name = "Biff", age = 21, email = "Biff@cutecodes.com" });
lsTestModel.Add(new TestModel() { id = 4, name = "Bode", age = 25, email = "Bode@cutecodes.com" });
return lsTestModel;
}
}
- Run the project and see the result:
- By changing data-ajax-mode="replace" to before, after, or replace in form see the changes.
