使用剃须刀页面和视图组件在特定列表项上单击时显示列表项的所有详细信息

Question

我已经尝试了很长时间来在我们点击列表项时显示列表项的详细信息，但我只能通过此代码显示静态联系人:

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

在 MVC 中，我们可以使用 Jquery 调用视图，类似于：

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

但是这里只使用剃刀页面和 Entity Core 框架，我应该怎么做，在这个过程中，我们还需要传递 Id，因为它将负责获取相应的联系人，然后加载视图。

我的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 其中包含列表和详细信息：

<!-- 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>

使用的局部视图方法：

加载详细信息方法：

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 文件，我在其中调用此加载详细信息：

<!-- 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>

联系 Index.chtml.cs 中的部分方法：

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

如果我不传递任何 Id 而只是传递一个特定的联系人（例如 - id 为 3 的联系人）那么它工作正常，即当我点击任何联系人 ITem 然后它显示，但是当我传递 Id字段然后我收到 404 错误。

这是我的文件夹目录：

请指导我该怎么做。谢谢

Answer 1

在 ContactDetailsViewComponent.cs 文件中使用 InvokeAsync 方法代替 Invoke

Answer 2

你可以像在mvc中一样在razor页面中使用ajax

首先新建一个razor页面，可以这样命名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;
    }
}

并在页面中添加详细联系信息ContactDetails.cs.cshtml（为了简单，我只显示了四个字段）

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

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

然后，在Index.chtml中，在锚点的点击功能中使用ajax：

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

结果：

使用剃须刀页面和视图组件在特定列表项上单击时显示列表项的所有详细信息

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

c#

asp.net-core

razor-pages

asp.net-core-viewcomponent