在 ASP.NET MVC Core 中以弹出模式显示搜索结果的最佳实践

Question

我正在将值（搜索字符串）从表单传递到控制器操作方法，在该方法中我执行一些活动以从数据库中查找特定记录，然后将结果传递到 ViewBag 或模型以显示产生一个视图。

最简单的方法是将结果作为模型（或视图模型）传递给视图......类似于：

1- 将字符串从表单传递到控制器。

2- 在控制器方法中，执行搜索并将其保存到 list/var ..

return 查看（我的模型）；

3- 在视图中..我们可以说

@foreach（模型中的变量项） { ... table 此处显示列和数据等。 }

问题是，如何在模式弹出窗口中显示结果而不是视图？

有很多不同的 JQuery 或 JavaScript 的建议，但有没有更简单的解决方案？

有没有类似（简单地）在弹出模式中显示视图的东西？

提前致谢

Answer 1

is there anything like (simply) show me the view in a popup modal ?

我认为在模态弹出窗口中显示结果的最简单方法是使用 局部视图和 ajax.

这里就免不了要创建一个视图来存放模态弹窗需要显示的内容。当然，你只需要创建一个局部视图而不是一个视图

这里有一个简单的演示供大家参考：

主视图：

更新：

   @{
        ViewData["Title"] = "Testpop";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
    
    <h1>Testpop</h1>
    
    <form>
        <input id="Text1" type="text" />
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="showPop">Open Modal</button>
    
        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog   modal-lg">
    
                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body ">
                        <div id="popup">
                        </div>
                    </div>
                    <div class="modal-footer">
                       <button type="button" class="btn btn-primary" data-dismiss="modal" id="submitModal">Submit</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
    
            </div>
        </div>
    
    </form>
    
    @section Scripts{
        <script>
            $('#showPop').click(function () {
                 var url = '@Url.Action("GetPartialView", "Default")';
                $.ajax({
                    url: url,
                    type: 'post',
                    data: { "para": $("#Text1").val()},
                    success: function (data) {
                        $('#popup').html(data);
                    }
                });
            })

$('#submitModal').click(function () {
            var url = '@Url.Action("GetData", "Default")';
            $.ajax({
                url: url,
                type: 'post',
                data: { "data": $("input[name='data']").val() },
                success: function () {
                    $("#Text1").val("");
                    alert("pass successfully!");
                   
                }
            });
        });
        </script>
    }

Default/GetPartialView 动作：

[HttpPost]
        public IActionResult GetPartialView(string para)
        {
             //get data
            var model = _context.Person.Where(x=>x.Name == para).ToList();
            return PartialView("_PopView",model);
        }

_PopView.cshtml局部视图：

    @model IEnumerable<Person>
    
    
    <table class="table table-bordered">
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Nome_Tipo</td>
        </tr>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @item.Id
            </td>
            <td>
                @item.Name
            </td>
            <td>
                @item.Nome_Tipo
            </td>
        </tr>
    }
    </table>
<input id="data" type="text" name="data" />

弹出提交数据到操作：

[HttpPost]
        public IActionResult GetData(string data)
        {
            //do anything.
            return Ok();
        }

这是新的结果：

在 ASP.NET MVC Core 中以弹出模式显示搜索结果的最佳实践

Best practice to show search result in a popup modal in ASP.NET MVC Core

asp.net-mvc

modal-dialog

asp.net-core

更新：