Display List Item all details when clicked on specific list Item using razor pages and View Component

Question

I have been trying for a long time to do display the details of the list item when we click on the list item but I am only able to display a static contact by this code :

    <div id="contactdetail">
        @await Component.InvokeAsync("ContactDetails", new { id = 1})
    </div>

In MVC we can call the view by using Jquery similar to this :

$("#listitem").click(function () {
        $("#contactdetail").load('/ContactDetails/Invoke')
    })

but here using only razor pages and Entity Core framework, how am I suppose to do this and in this, we also need to pass the Id as that will be responsible for getting the respective contact and then load the view.

My ContactDetailViewComponent.cs :

public class ContactDetailsViewComponent : ViewComponent
    {
        private readonly IContactDetails contactDetails;

        public Contact Contact { get; private set; }

        public ContactDetailsViewComponent(IContactDetails contactDetail)
        {
            this.contactDetails = contactDetail;
        }

        public IViewComponentResult Invoke(int id)
        {
            Console.WriteLine("Called {0}", id);
            var contact = contactDetails.GetContact(id);
            return View("Default", contact);
        }
    }
}

Index.chtml which contains both the list and details :

<!-- Contacts Heading -->
<h4 class="p-3 px-4 font-weight-bolder">Contacts</h4>

<!-- Parent container for the the below list and displaying addresses-->
<div class="container-fluid py-3 px-4  h-100">
    <div class="row">
        <!-- Column which contains the list of all the contacts present currently -->
        <div class="col-md-4 ">
            <ul class="list-group contact-list-cards">
                @foreach (var contact in Model.Contacts)
                {
                    <li class="list-group-item py-0 px-3 position-relative"
                       >
                        <a class="stretched-link contact-name  curson_pointer text-decoration-none name-heading m-0"
                           href="#"
                           id="listItem"
                           onclick="loadDetails(@contact.Id)" >@contact.Name </a>
                        <p class=" text-secondary m-0 mx-2 ">@contact.Email</p>
                        <p class=" text-secondary m-0 mx-2 mb-2">+91 @contact.MobileNumber</p>
                    </li>
                }
            </ul>
        </div>

        <!-- Column which will display the informaation when clicked on the specific list item of contact -->
        <div id="contactdetail">
            @await Component.InvokeAsync("ContactDetails", new { id = currentId })
        </div>

    </div>
</div>

Partial View method used :

Load details method :

function loadDetails(id)
    {
            console.log(id);
            $("#contactdetail").load("/Contacts/Index/OnPostContactPartial?id="+id,
            function (res, status, xhr) {
            if (status == "error") {
             console.log(status);
            alert("An error occurred while loading the results.");
            }
            });
            console.log($("#contactdetail"));
     }

Index.chtml file where I am calling this load Detials :

<!-- Parent container for the the below list and displaying addresses-->
<div class="container-fluid py-3 px-1  h-100">
    <div class="row">
        <!-- Column which contains the list of all the contacts present currently -->
        <div class="col-4 ">
            <ul class="list-group contact-list-cards">
                @foreach (var contact in Model.Contacts)
                {
                    <li class="list-group-item py-0 px-3 position-relative">
                        <a class="stretched-link contact-name  curson_pointer text-decoration-none name-heading m-0"
                           href="#"
                           id="listItem"
                           onclick="loadDetails(@contact.Id)" >@contact.Name </a>
                        <p class=" text-secondary m-0 mx-2 ">@contact.Email</p>
                        <p class=" text-secondary m-0 mx-2 mb-2">+91 @contact.MobileNumber</p>
                    </li>
                }
            </ul>
        </div>

        <!-- Column which will display the informaation when clicked on the specific list item of contact -->
        <div id="contactdetail" class="ml-5">
            <partial name="_contactDetail" model="@Model.Contacts.ElementAtOrDefault(0)" />
        </div>

    </div>
</div>

Contact Partial method in Index.chtml.cs :

        public IActionResult OnPostContactPartial(int id)
    {
        Debug.WriteLine("func called {0}", id);
        Contact contact = contactDetails.GetContact(id);
        return Partial("_contactDetail", contact);
    }

If I don't pass any Id and just pass a specific contact (ex - contact having id 3) then it is working fine i.e when I click on any contact ITem then it displays, but when I pass the Id field then I am getting a 404 error.

Here's my folder directory :

Please guide me How can I do this. Thanks

Answer 1

Use InvokeAsync method instead of Invoke in the ContactDetailsViewComponent.cs file

Answer 2

You can use ajax in razor page the same as that in mvc.

First, create a new razor page, you can call it ContactDetails.cs:

public class ContactDetailsModel : PageModel
{
    private readonly IContactDetails contactDetails;

    public ContactDetailsModel(IContactDetails _contactDetails)
    {
        contactDetails = _contactDetails;
    }

    public Contact Contact { get; set; }

    public void OnGet(int id)
    {
        var contact = contactDetails.GetContact(id);
        Contact = contact;
    }
}

And add Contact detail information in the Page ContactDetails.cs.cshtml(for simple, I just show the four fields)

@page
@model RazorTest.Pages.ContactDetailsModel
@{
    Layout = null;
}

@Model.Contact.Id
@Model.Contact.Name
@Model.Contact.Email
@Model.Contact.MobileNumber

Then, in Index.chtml, use ajax in the click function of the anchor:

<script>
    function loadDetails(contactId) {
        $.ajax({
            type: 'get',
            url: 'ContactDetails?id='+contactId,
            success: function (result) {
                $("#contactdetail").html(result);
            }
        })
    }
</script>

Result: