在 Razor 页面 OnPost 模型方法中触发 Show Modal Popup

Question

我试图在我的 razor 页面中调用 OnPost 方法后打开模式弹出窗口，但我找不到适合我的特定用例的最佳解决方案。

在我的 Razor 页面中，我有几个文本字段和一个“搜索”按钮，当单击该按钮时，它会根据用户在文本框中写入的文本在我的数据库中查找数据。此时我从数据库中获取数据并将其加载到一个列表中，然后将该列表传递到我的模式弹出窗口中包含的部分视图，通过检查浏览器中的 HTML 它正确地填充了它。我缺少的是下一步并显示模式弹出窗口。我尝试设置一些绑定属性来编辑模态属性，但这没有用（我知道，这不是最优雅的解决方案）。

下面是我的代码片段：

剃刀页面：

@page
@model Namespace.ResponderSchemaModel
@{
    ViewData["Title"] = "Responder Schema";
}

<form method="post">
    <div class="md-form input-group">
        <input type="tel" id="phone" name="phone" placeholder="Phone" />
        <input type="tel" id="responder" name="responder" placeholder="Responder" />
        <div class="input-group-append">
            <button class="btn btn-sm btn-red waves-effect m-0 px-3" type="submit" id="searchButton" asp-page-handler="SearchResponder">Search</button>
        </div>
    </div>
</form>

<div class="modal fade" tabindex="-1" role="dialog" id="details-modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Responders Found</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                @if (Model.Responders.Count > 1)
                {
                <partial name="_ResponderSearch" model="Model.Responders" />
                }
            </div>
        </div>
    </div>
</div>

页面模型：

public class ResponderSchemaModel : PageModel
{
    [BindProperty]
    public List<Object> Responders { get; set; }

    public void OnPostSearchExchange(string phone, string responder)
    {
        Responders = // Gets the data from the DB.
    }
}

局部视图：

@model List<Object>

<table id="searchResultTable" class="display nowrap table-sm table-striped table-hover table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Nnumber</th>
            <th>Sip</th>
        </tr>
    </thead>
    <tbody>
        @for (int i = 0; i < Model.Count; i++)
        {
        <tr>
            <td>@Model[i].Name</td>
            <td>@Model[i].Description</td>
            <td>@Model[i].Uri</td>
        </tr>
        }
    </tbody>
</table>

Answer 1

Bootstrap 模式可以通过 JavaScript 激活。您可以使用客户端脚本来检测部分是否已呈现，如果有则显示模态：

@section scripts{
    <script>
    $(function(){
        if($('#searchResultTable').length > 0){
            $('#details-modal').modal('show');
        }
    });
    </script>
}

https://getbootstrap.com/docs/4.0/components/modal/#via-javascript

在 Razor 页面 OnPost 模型方法中触发 Show Modal Popup

Trigger Show Modal Popup in Razor Page OnPost Model method

razor

bootstrap-modal

.net-core

razor-pages