How to do an ajax like page update in asp dotnet 8?

 To achieve AJAX-like page updates in ASP.NET without using Blazor, you can leverage several techniques including using ASP.NET MVC's Partial Views, Ajax.BeginForm, or jQuery AJAX methods while keeping JavaScript to a minimum. Here’s a detailed guide on how to do this:

1. Using Partial Views with Ajax.BeginForm

ASP.NET MVC provides the Ajax.BeginForm helper which can be used to submit forms asynchronously.

Step-by-Step:

1. Create a Partial View:

   Create a partial view that will be updated asynchronously.

   Views/Shared/_MyPartialView.cshtml:

   html
   
   @model MyApp.Models.MyModel
   
   <div id="partialContent">
       <p>Current Value: @Model.Value</p>
   </div>
   

2. Create a Controller Action for the Partial View:

   Create an action that returns the partial view.

   Controllers/HomeController.cs:

   csharp
   
   using Microsoft.AspNetCore.Mvc;
   using MyApp.Models;
   
   public class HomeController : Controller
   {
       public IActionResult UpdatePartial()
       {
           var model = new MyModel { Value = "Updated Value" };
           return PartialView("_MyPartialView", model);
       }
   }
   

3. Create a View with Ajax.BeginForm:

   Use Ajax.BeginForm to submit the form asynchronously and update the partial view.

   Views/Home/Index.cshtml:

   html
   
   @model MyApp.Models.MyModel
   @using Microsoft.AspNetCore.AjaxHelper;
   
   <h2>AJAX Form Example</h2>
   
   @Ajax.BeginForm("UpdatePartial", "Home", new AjaxOptions
   {
       HttpMethod = "POST",
       UpdateTargetId = "partialContent"
   })
   {
       <input type="submit" value="Update Partial View" />
   }
   
   <div id="partialContent">
       @Html.Partial("_MyPartialView", Model)
   </div>
   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery-unobtrusive-ajax/jquery.unobtrusive-ajax.min.js"></script>
   

4. Enable Unobtrusive AJAX:

   Ensure jQuery and jquery.unobtrusive-ajax are included in your project. These libraries help in handling the AJAX form submission without writing explicit JavaScript.

2. Using jQuery AJAX

For more control, you can use jQuery's $.ajax method to load partial views dynamically.

Step-by-Step:

1. Create a Partial View and Controller Action:

   Use the same partial view and controller action from the previous example.

2. Create a View with jQuery AJAX:

   Use jQuery to handle the AJAX call and update the DOM.

   Views/Home/Index.cshtml:

   html
   
   @model MyApp.Models.MyModel
   
   <h2>AJAX Example with jQuery</h2>
   
   <button id="updateButton">Update Partial View</button>
   
   <div id="partialContent">
       @Html.Partial("_MyPartialView", Model)
   </div>
   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
   <script>
       $(document).ready(function () {
           $('#updateButton').click(function () {
               $.ajax({
                   url: '@Url.Action("UpdatePartial", "Home")',
                   type: 'GET',
                   success: function (result) {
                       $('#partialContent').html(result);
                   },
                   error: function (xhr, status, error) {
                       alert('An error occurred: ' + error);
                   }
               });
           });
       });
   </script>
   

3. Using ASP.NET Core Razor Pages with Partial Updates

If you are using Razor Pages, you can achieve a similar effect by using partial page updates.

Step-by-Step:

1. Create a Partial Page:

   Create a partial page to be updated.

   Pages/Shared/_MyPartialPage.cshtml:

   html
   
   @model MyApp.Pages.MyPartialPageModel
   
   <div id="partialContent">
       <p>Current Value: @Model.Value</p>
   </div>
   

2. Create a Razor Page Model:

   Create a page model for the partial page.

   Pages/Shared/MyPartialPage.cshtml.cs:

   csharp
   
   using Microsoft.AspNetCore.Mvc.RazorPages;
   
   public class MyPartialPageModel : PageModel
   {
       public string Value { get; set; }
   
       public void OnGet()
       {
           Value = "Updated Value";
       }
   }
   

3. Create a Main Page with AJAX:

   Use jQuery to handle the AJAX request.

   Pages/Index.cshtml:

   html
   
   @page
   @model MyApp.Pages.IndexModel
   
   <h2>AJAX Example with Razor Pages</h2>
   
   <button id="updateButton">Update Partial View</button>
   
   <div id="partialContent">
       <partial name="_MyPartialPage" model="@Model" />
   </div>
   
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   
   <script>
       $(document).ready(function () {
           $('#updateButton').click(function () {
               $.ajax({
                   url: '@Url.Page("/Shared/MyPartialPage")',
                   type: 'GET',
                   success: function (result) {
                       $('#partialContent').html(result);
                   },
                   error: function (xhr, status, error) {
                       alert('An error occurred: ' + error);
                   }
               });
           });
       });
   </script>
   

Summary

By using these methods, you can achieve AJAX-like page updates in ASP.NET without writing JavaScript explicitly, though jQuery is still used under the hood to handle the AJAX requests. The approaches include:

• Partial Views with Ajax.BeginForm: Simplifies form submission and partial updates with minimal JavaScript.
• jQuery AJAX: Provides more control over the AJAX request and response handling.
• ASP.NET Core Razor Pages with AJAX: Allows partial updates in Razor Pages applications with AJAX.

These techniques ensure smooth user experiences with dynamic updates, minimizing full-page reloads and improving application responsiveness.