Display Message by Status Ajax in Asp.Net Core MVC, C#.Net, jQuery

In today's article I will show how you can display a message box by ajax call in asp.net core 8 mvc using c#.net, jQuery, Entity framework core and bootstrap. Now for this article first we will create new asp.net core mvc application using .NET core 8 and design a login page.

First we will create a SQL database table which holds login detail.

In this login page we will validate user id and password from database and if user added correct user id and password, we would display a green color message to user and if user added wrong detail, we would display a message with red background. Here we will decorate message by using bootstrap css. So, let's start. Please check the below code.

public class UserLogin
{
    public string LoginId { get; set; } = string.Empty;
    public string Password { get; set; } = string.Empty;
}

Now let's write code to validate user is at controller end from database using c#.net

[HttpGet]
public IActionResult Index()
{
    UserLogin userLogin = new UserLogin();
    return View();
}
[HttpPost]
public int Index(UserLogin userLogin)
{
    EmployeeContext employeeContext = new EmployeeContext();
    var status = employeeContext.EmpLogins.Where(m => m.LoginId == userLogin.LoginId && 
    m.Password == userLogin.Password).FirstOrDefault();
    if (status != null)
    {
        return 1;
    }
    else
    {
        return 0;
    }
}

Above code I have validate user from database. If user added correct login detail system will return 1 otherwise it will return 0. Now let's create a view and add the below code in it.

@model UserLogin
@{
    ViewData["Title"] = "Index";
}
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    <div class="" id="divMessage"></div>
    <div class="page-wrapper box-content">
        <label>Login Id:</label>
        @Html.TextBoxFor(m => m.LoginId, new { @class = "form-control", @id = "txtLoginId" })<br />
        <label>Password:</label>
        @Html.PasswordFor(m => m.Password, new { @class = "form-control", @id = "txtPassword" })<br />
    </div>
    <input type="button" value="Login" id="btnLogin" onclick="javascript: Login();" />
}
<script>
    var Login=function(){
      $("#btnLogin").val("Please wait...");
      $.ajax({
        url: "/Home/Index/",
        type: 'POST',
        data : {LoginId : $("#txtLoginId").val(),Password: $("#txtPassword").val()},
        success: function(response){
             $("#divMessage").show();
            if(response==0){
                $("#divMessage").removeClass("alert alert-success").addClass("alert alert-danger");
                $("#divMessage").html("Error!! You have entered wrong detail.");
            }else{
                
                 $("#divMessage").removeClass("alert alert-danger").addClass("alert alert-success");
                 $("#divMessage").html("Success full login");
                 setTimeout(function() {window.location.href = "/Home/Success/"; }, 2000);
            }
             $("#btnLogin").val("Login");
         },
        error: function(error){
          console.log(error)
        }
    });
    }
</script>

In above code I have used TextBoxFor and PasswordFor control to request user the credential. In next line I have added reference of jQuery library. I have used ajax function to make a client call without refreshing the page. By passing the login detail. At controller end I have validated the login detail from database by using entity framework. If user have added wrong credential on that case a bootstrap red banner message will display with error message.

On other hand if user added correct credential, he would get a success message with bootstrap CSS enabled green success banner. After 2 seconds you will be redirected to success page. Now lets run the application to check the output.