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

Question

我将一个值(搜索字符串)从表单传递到 Controller 操作方法，在该方法中我执行一些事件以从数据库中查找特定记录，然后将结果传递到 ViewBag 或模型以便在中显示结果一个 View 。

最简单的方法是将结果作为模型(或 View 模型)传递给 View ......类似于:

1- 将字符串从表单传递到 Controller 。

2- 在执行搜索并将其保存到列表/var 之后，在 Controller 、方法中..

返回 View (我的模型)；

3- 在 View 中..我们可以说

@foreach(模型中的变量项) { ...表在这里显示列和数据..等。

问题是，我怎样才能在模式弹出窗口中显示结果而不是 View ？

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

有没有类似(简单地)在弹出模式中显示 View 的东西？

提前致谢

Answer 1

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

我认为在模态弹出窗口中显示结果的最简单方法是使用部分 View 和 ajax。

这里，你不能避免创建一个 View 来存储需要在模态弹出窗口中显示的内容。当然，您只需要创建一个部分 View ，而不是一个 View 。

这里有一个简单的demo供大家引用:

主视图:

更新:

   @{
        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>
    }

默认/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 局部 View :

    @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" />

弹出向 Action 提交数据:

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

这是新的结果: