Creating new partial view with model parameter

Question

I have a website where you search a database by client name. Then both client-info and the different projects this client might be a part of show up as tabels using partial views. I want the user to be able to chose a project by clicking the row or a link(does not matter). Then the last partial view will be rendered with the product information for that clients project.

Client -> Project -> Products

I cant really wrap my head around how to solve this with my current solution. I need to pass a parameter in form of an int with project id from my partial view where i click the chosen project. The project Id is needed to find the correct order/product.

Thanks in advance for any pointers or help.

HomeController

public class HomeController : Controller
    {
        Scaleit_testDB_Context db = new Scaleit_testDB_Context();
        ViewModel vm = new ViewModel();


        // GET: Home
        public ActionResult Index()
        {
            return View(vm);
        }

  //Search Function
        [HttpPost]
        public ActionResult Index(string searchTerm)
        {
            vm.AllClients = GetClients();
            vm.AllProjects = GetProjects();
            vm.AllViewNewOrderSum = GetSums();
            Scaleit_testDB_Context db = new Scaleit_testDB_Context();
            if (string.IsNullOrEmpty(searchTerm))//Fix this!
            {
                vm.AllClients = new List<Client>();
            }
            else
            {
                vm.AllClients = db.Clients.Where(x => x.Name.Equals(searchTerm)).ToList();
                vm.AllViewNewOrderSum = db.ViewNewOrderSums.Where(x => x.ClientName.Equals(searchTerm)).ToList();
            }
            return View(vm);
        }
}

Index View

@using Main.Models;
@using Main.Controllers;
@model Main.Models.ViewModel

@* Searchbox and submit-btn *@
@using (Html.BeginForm())
{
    <b>Kundenavn:</b>
    @Html.TextBox("searchTerm", null, new { id = "txtSearch" })
    <input type="submit" value="🔍 Search" class="btn btn-primary" id="btn-search" />
}

@if (Model.AllClients != null && Model.AllClients.Count() > 0)
{
<div class="card-container">
    <div class="card border-primary mb-3 card-client" style="max-width: 40rem;">
        <div class="card-header">Kunde</div>
        <div class="card-body">
            <table class="table table-hover">
                @foreach (Client client in Model.AllClients)
                {
                    @Html.Partial("_Client", client)
                }
            </table>
        </div>
    </div>
    <div class="card border-primary mb-3 card-project">
        <div class="card-header">Projekt</div>
        <div class="card-body">
            <table class="table table-hover">
                @foreach (Project project in Model.AllProjects)
                {
                    foreach (Client client in Model.AllClients)
                    {
                        if (project.ClientID == client.ID)
                        {

                            @Html.Partial("_Project", project)
                        }
                    }
                }
            </table>
        </div>
    </div>
</div>
}

Partial View _Project

@model Main.Models.Project

<tr>
    <th>Prosjekt:</th>
    <td>@Html.DisplayFor(m => m.Name)</td>// This is where i want to click and
                                          // render a partial view of the 
                                          // products
</tr> 
<tr>
    <th>Adresse:</th>
    <td>@Html.DisplayFor(m => m.Address1)</td>
    @if (Model.Address2 != null)
    {
        <td>@Html.DisplayFor(m => m.Address2)</td>
    }
    <td>@Html.DisplayFor(m => m.PostCodeID)</td>
</tr>

The program runs as expected as of now. The functionality has not yet been implemented.

Answer 1

There are multiple ways to do this. If you want to do it with jQuery, you can call an action. Pass the project id as parameter and return a partial view.

        $.post(
            '@Url.Action("GetInformation", "Project")?projectId=123',
            function (data) {
                $("#placeToDisplayInformation").append(data);
            }
        );

    [HttpPost]
    public PartialViewResult GetInformation(string projectId)
    {
        // ...

        return PartialView("...", ...);
    }