Я долгое время пытался отобразить детали элемента списка, когда мы щелкаем элемент списка, но я могу отобразить только статический контакт с помощью этого кода:
<div id="contactdetail">
@await Component.InvokeAsync("ContactDetails", new { id = 1})
</div>
В MVC мы можем вызвать представление с помощью JQuery, подобного этому:
$("#listitem").click(function () {
$("#contactdetail").load('/ContactDetails/Invoke')
})
но здесь используются только страницы razor и структура 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, в котором я называю эту загрузку 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>Обратитесь к частичному методу в Index.chtml.cs:
public IActionResult OnPostContactPartial(int id)
{
Debug.WriteLine("func called {0}", id);
Contact contact = contactDetails.GetContact(id);
return Partial("_contactDetail", contact);
}
Если я не передаю какой-либо идентификатор, а просто передаю конкретный контакт (например, контакт с идентификатором 3), он работает нормально, т.е. когда я нажимаю на любой контакт ITem, он отображается, но когда я передаю поле идентификатора, я получаю ошибка 404.
Вот моя папка в каталоге: 
Пожалуйста, помогите мне. Как я могу это сделать. Спасибо
