Card

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.

  1. Create a new project in ASP.NET Core (Razor Page)
  2. 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; }
    }
  1. 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>
        }
    }
}
  1. In _Layout.cshtml add -ajax.js (See the source code)

    <script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>

 

  1. Add a gif loading file to project wwwroot (find the source file)

 

  1. 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>

 

  1. 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;
        }
    }
  1. Run the project and see the result:

Ajax Form

  1. By changing data-ajax-mode="replace" to before, after, or replace in form see the changes.

 

Recent Comments