Ajax Form in Asp.Net Core MVC and Validations

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>

That's all about this article.

Create Azure Key Vault and Access in Asp.Net Core Application

Azure Key Vault is a cloud service that helps teams securely store connection string, passwords, etc, and access them. Today in the article we will learn how to create the Key Vault in Azure Portal and how to access secrets in our code. 

Step 1: Go to Azure Portal and search Key Vault and create it. 

 

Step 2: Enter Key Vault Name, Resource Group, Region, etc as mentioned the below screenshot.

Press Review + Create button. 

Step 3: It will check validation in the background and it will create a new Key Vault. 

Step 4: Click on Your Key Vault and go to Secrets and Press Generate/Import button.

 

Step 5: Create a new secret with any name. I have created a new secret dbpwd. Press Create button.

 

Till now, we have created the Key Vault in the Azure Portal and created the secret too. Let’s fetch this secret value in the Code. Let’s create a sample in Asp.Net Core API application and fetch the secret.

Create/Open Visual Studio Web/API application. In my example, I have created Asp.Net Core 3.1 Application.

 Step 1: Go to Program.cs, In line number 35, I have specified my Key Vault URL. You can specify your Key Vault URL. if you are not aware of your URL then go to Azure Portal and click on the Key Vault and see in the Overview Tab. You can find the URL.

 

Note: I have used default credentials in line 27. I have logged in to Visual studio with the same credentials as I'm logged in on the Azure portal.

Step 2: Go to Controller and fetch Key Vault Secret.

I have created a new endpoint, kV, and fetch the secret value.

Step 3: Run the API Project

 

You can see it fetched the secret value in the browser. This is all about this article. I hope you like it.