在ASP.NET MVC Core

问题描述

我正在将值(搜索字符串)从表单传递到控制器操作方法,在该方法中,我执行一些活动以从db查找特定记录,然后将结果传递给ViewBag或模型,以便在其中显示结果视图。

最简单的方法是将结果作为模型(或viewmodel)传递到视图。.类似:

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

在执行搜索并将其保存到列表/ var后,在控制器方法中使用

2-。

return View(mymodel);

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

@foreach(模型中的变量项) { ...此处的表格显示列和数据.etc }

问题是,代替视图,我如何在模式弹出窗口中显示结果?

使用许多不同的JQuery或JavaScript的建议很多,但是有没有更简单的解决方案?

有没有像(简单地)以弹出模式向我展示视图的东西?

预先感谢

解决方法

有没有像(简单地)以弹出模式向我展示视图的东西?

我认为在模式弹出窗口中显示结果的最简单方法是使用部分视图和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,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" />

弹出将数据提交给操作:

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

这是新结果: enter image description here