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

Question

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

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

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

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

返回视图(mymodel);

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

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

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

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

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

提前致谢

Answer 1

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

我认为在模式弹出窗口中显示结果的最简单方法是使用 partial view 和 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>
    }

默认/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" />

弹出提交数据到action：

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

这是新的结果：