ASP NetMVC Core Ajax Web API Load PartialView AJAX

Screenshot from the tutorial

Loading Partial Views with AJAX in ASP.NET Core MVC

In modern web applications, user experience is a priority. One effective way to enhance user experience is to load parts of a web page dynamically, without requiring a full page refresh. This can be achieved using AJAX (Asynchronous JavaScript and XML) in combination with Partial Views in ASP.NET Core MVC. In this tutorial, we'll explore how to implement this functionality effectively.

What is a Partial View?

A Partial View in ASP.NET Core MVC is a segment of a page that can be rendered independently. It allows you to break down your views into smaller, reusable components, enhancing maintainability and performance.

Setting Up Your ASP.NET Core MVC Project

Before we dive into the AJAX implementation, ensure you have an ASP.NET Core MVC project set up. If you don’t have one, you can create it using the .NET CLI:

dotnet new mvc -n AjaxPartialViewDemo
cd AjaxPartialViewDemo
dotnet run

Once your project is running, let’s create a controller and a Partial View that we will load via AJAX.

Creating the Controller

1. Add a new Controller: Right-click on the Controllers folder, select Add > Controller, and choose the MVC Controller - Empty template. Name it HomeController.

2. Implement the Action Methods: Add the following code to HomeController.cs:

using Microsoft.AspNetCore.Mvc;

namespace AjaxPartialViewDemo.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        public IActionResult LoadPartialView()
        {
            // Returning the Partial View
            return PartialView("_MyPartialView");
        }
    }
}

Creating the Partial View

1. Add a Partial View: In the Views/Home directory, create a new file named _MyPartialView.cshtml.

2. Add Content to the Partial View: Open _MyPartialView.cshtml and add the following HTML content:

<div>
    <h3>This is a Partial View loaded via AJAX!</h3>
    <p>The content of this view is loaded asynchronously without refreshing the page.</p>
</div>

Building the Main View

Now, let’s set up the main view where we will trigger the AJAX call.

1. Edit the Index View: Open Index.cshtml in the Views/Home directory and replace its content with the following:

@{
    ViewData["Title"] = "AJAX Partial View Demo";
}

<h2>@ViewData["Title"]</h2>

<button id="loadPartial">Load Partial View</button>
<div id="partialViewContainer"></div>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#loadPartial').click(function () {
                $.ajax({
                    url: '@Url.Action("LoadPartialView", "Home")',
                    type: 'GET',
                    success: function (result) {
                        $('#partialViewContainer').html(result);
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
}

Explanation of the Code

• Button to Load Partial View: A button with id="loadPartial" is created to trigger the AJAX call.
• Container for Partial View: An empty div with id="partialViewContainer" is where the Partial View will be injected.
• jQuery AJAX Call: When the button is clicked, an AJAX GET request is initiated to the LoadPartialView action. On success, the HTML received is injected into the #partialViewContainer.

Running the Application

1. Run your application using the following command:

dotnet run

2. Navigate to http://localhost:5000 (or the port displayed in your terminal).

3. Click the "Load Partial View" button. You should see the content of the Partial View loaded dynamically without a page refresh.

Conclusion

Using AJAX to load Partial Views in ASP.NET Core MVC enhances the interactivity of your web applications. This technique allows you to create a smoother user experience by updating parts of the page asynchronously. With a few lines of JavaScript and a well-structured MVC architecture, you can significantly improve your web app's performance and usability.

Feel free to experiment with different content in your Partial Views and explore additional functionalities in AJAX to take your application to the next level!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios