Я пытаюсь добавить Bootstrap Modal, чтобы разрешить поиск из БД. Мне удалось заставить модальное окно работать, но я не знаю, как продвинуться вперед, чтобы включить поиск из БД. Я использую . Net Core 3.1 Razor Pages с Entity Framework Core и Bootstrap Modal . Любое руководство действительно поможет.
Модель объекта: Contact.cs
namespace WebApplication1.Models
{
public class Contact
{
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
}
}
Страница макета
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication1</title>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<div class="container pt-5">
<main role="main" class="pb-3">
@RenderBody()
</main>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="~/js/site.js" asp-append-version="true" defer></script>
@RenderSection("Scripts", required: false)
</body>
</html>
Частичное представление: _ContactModalPartial.cs html
@ модель WebApplication1.Models.Contact Search contact × Close Search
Index.cs html
@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}
<div class="text-center">
<button type="button" class="btn btn-primary" data-toggle="ajax-modal" data-url="@Url.Page("Index", "ContactModalPartial")">
Search contact
</button>
<div id="modal-placeholder"></div>
</div>
Index.cs html .cs
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using WebApplication1.Models;
namespace WebApplication1.Pages
{
public class IndexModel : PageModel
{
public PartialViewResult OnGetContactModalPartial()
{
return new PartialViewResult
{
ViewName = "_ContactModalPartial",
ViewData = new ViewDataDictionary<Contact>(ViewData, new Contact { })
};
}
}
}
Сайт. js
$(function () {
var placeholderElement = $('#modal-placeholder');
$('button[data-toggle="ajax-modal"]').click(function (event) {
var url = $(this).data('url');
$.get(url).done(function (data) {
placeholderElement.html(data);
placeholderElement.find('.modal').modal('show');
});
});
});