Render partial view from Html.ActionLink

Question

I'm currently new using Razor Pages, the thing is that I'm trying to load a Partial View from a Main View but I'm really strugling because the lack of documentation that I'm founding.

My application is a ASP.NET Core Razor Pages with .NET 8.0

This is how my main view looks:

@page "/"
@using Project.Pages
@model PageModel

@section Scripts
{

}

<div class="titulo">
    <div id="iconoPagina" class="float-left gm_iconoCentralita3cx mr-3" runat="server">
    </div>
    <div class="float-left">
        <h1 id="titulo" class="cabecera_Negro"></h1>
    </div>
</div>
<div class="caja col-12 mt-3 py-4">
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container">
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                @foreach (var value in Model.People)
                {
                    <li class="nav-item">
                        @Html.ActionLink(@value.name, "LoadData", "People", new { id1 = value.id1, id2 = value.id2}, new { @class = "sbmt" })
                    </li>
                }
                </ul>
            </div>

            <div id="partialView">
                
            </div>
        </div>
    </nav>

</div>

This is my controller:

using Project.Models.ViewModel;
using Microsoft.AspNetCore.Mvc;

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

        public IActionResult LoadData(int id1, int id2)
        {
            PersonalViewModel model = APICall.GetData<PersonalViewModel >(id1, id2, "APIRestEndPoint");

            return PartialView("_PartialView", model);
        }
    }
}

The APICall.GetData is just a function that I create that call my APIRest to obtain the data, everything works fine here.

I found that in my Program.cs I need to create a MappControllerRoute in order to my Html.ActionLink works, if I remove this code the links will have a href empty:

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=People}/{action=LoadData}/{id1}&{id2}");

The thing is that everything works fine, but when the partialview is invoked from the controller it gives me an error telling Object reference not set to an instance of an object but I dont know because when I check the viewmodel has data.

I would like to know why the routes are necessary because everywhere I check only using the Html.ActionLink will call the Controller without any addition

Answer 1

but when the partialview is invoked from the controller it gives me an error telling Object reference not set to an instance of an object

Make sure you return the partialview with the correct model. Below I test it with Users model:

 public class Users
  {
      public int Id { get; set; } 
      public string Name { get; set; }    
  }

LoadData:

public IActionResult LoadData(int id1, int id2)
    {
         //PersonalViewModel model = APICall.GetData<PersonalViewModel>(id1, id2, "APIRestEndPoint");
         var model = new Users() { Name="aa",Id=1};
         return PartialView("_PartialView", model);
     }

_PartialView:

@model PartialRazor.Models.Users

@Model.Name

@Model.Id

result:

I would like to know why the routes are necessary

The ASP.NET Core MVC template generates conventional routing code , maybe you use Html.ActionLink in it before. The Razor template doesn't have the route for mvc, so you need to add.

builder.Services.AddControllersWithViews();
...
app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

You can have a look at Routing to controller actions in ASP.NET Core to know more.