如何在 MVC 中使用 ajax 调用同时打开弹出窗口和 post 数据到控制器

Question

我正在尝试在我的表单视图中实现搜索功能。搜索 window 在弹出窗口中打开（在部分视图中）并询问搜索查询 (figure)。现在用户输入所有搜索字段并发出 POST 请求，最终弹出窗口 window 显示 table 搜索结果。

窗体视图 （有打开弹出窗口的按钮window）

@Ajax.ActionLink("Search current form", "SearchAction", new { @id = "SearchBtn" }, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openPopup" }, new { @class ="btn btn-primary"})<br />
<div id="result" style="display:none"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $("#result").dialog({
            autoOpen: false,
            title: 'Search Window',
            resizable:0,
            width: 1000,
            height: 700,
            modal: true
        });
    });
    function openPopup() {
        $("#result").dialog("open");
    }
</script>

SearchForm 视图 （实现为部分视图）

@using (Html.BeginForm("SearchAction", "ViewModel", FormMethod.Post, new { @id = "searchform" }))
{
    //some form elements

    <div class="text-center">
        <input type="submit" value="Go" class="btn btn-primary"/>
    </div>
}


<div class="alert-danger">@ViewBag.emptyResult</div>

@if (Model != null)
{
    //display the search results 
}

现在要保留弹出窗口，我必须以与表单视图相同的方式将 Go 按钮绑定到 ajax 操作。此外，通过阅读此 How to pass formcollection using ajax call to an action?，我了解到 Ajax 操作将 JSON 数据发送到控制器中，而不是 FormCollection 可以轻松访问的键值对。所以我的问题是如何在我的搜索表单中实现提交按钮（Ajax.Actionlink），以便它使用 FormCollection 将数据发布到控制器并保留弹出窗口 window。

Answer 1

原来我只需要在搜索弹出窗口中为结果 table 定义一个占位符。

<div id="showData" class="text-center table table-bordered bg-light"></div>

现在使用 Ajax 调用

获取搜索结果

function GetSearchResult() {
        var searchParams = [];
        //get search queries from textbox ids

        $.ajax({
            type: 'POST',
            dataType: "json",
            traditional: true,
            data: {
                s: searchParams
            },
            url: "/{controller name} /{action}",
            success: function (result) {
                var col = [];
                if (isJson(result)) {
                    var sR = JSON.parse(result);
                    //create a html table using javascript and fill it which the result you got
                var divContainer = document.getElementById("showData");
                divContainer.innerHTML = "";
                divContainer.appendChild(table);  //table is what you created dynamically using javascript
                }
                else {
                    alert("No results found, Please try again");    
                }

            }
        });
    }

在你的控制器中添加这个动作

[HttpPost]
public JsonResult AjaxMethod(string value, string Id)
{
     var updatedList = GetSearchResults(); //get search result from your repository
     return Json(updatedList);
}

就创建 html table thorugh javascript 而言 this 对我帮助很大！

如何在 MVC 中使用 ajax 调用同时打开弹出窗口和 post 数据到控制器

How to open a popup and post data to controller simultaneously using ajax call in MVC

model-view-controller

asp.net-mvc

asp.net-ajax

popup