c# - 使用剃须刀页面和查看组件单击特定列表项时显示列表项的所有详细信息

问题描述

当我们单击列表项时，我一直在尝试显示列表项的详细信息，但我只能通过此代码显示静态联系人：

    <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 中联系 Partial 方法：

        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 错误。

这是我的文件夹目录：

请指导我我该怎么做。谢谢

标签： c#asp.net-corerazor-pagesasp.net-core-viewcomponent

c# - 使用剃须刀页面和查看组件单击特定列表项时显示列表项的所有详细信息

问题描述

解决方案

推荐阅读