javascript - 使用 JavaScript 在按钮单击时刷新或检索当前信息

Question

我将以此作为序言，我对 JavaScript 仍然很陌生。所以问题是在一个更大的应用程序中，我们的 Controller 将信息列表传递到 View ，其中某些 JavaScript 函数依赖于某些 ViewModel 属性。我编写了一个简单的应用程序，希望能够说明我的意思。

下面是一个示例 Controller ，它将列表传递到索引页:

    public ActionResult Index() {
        List<int> activeIds = new List<int>();
        SqlConnection sqlConn = new SqlConnection(connection_String);

        sqlConn.Open();

        string sqlStr = "SELECT * FROM dbo.[JS-Test] WHERE Active = 1";
        SqlCommand sqlCmd = new SqlCommand(sqlStr, sqlConn);
        SqlDataReader sqlDR = sqlCmd.ExecuteReader();

        if(sqlDR.HasRows) {
            while (sqlDR.Read()) {
                activeIds.Add((int)sqlDR["ID"]);
            }
        }

        sqlDR.Close();
        sqlCmd.Dispose();
        sqlConn.Close();

        return View(activeIds);
    }

这将返回数据库中当前“事件”的项目。 (粗略) View 如下...

@model List<int>

@{
    ViewBag.Title = "Index";
}

<p>Current Recognized Count: @Model.Count() </p>
<a href="#" id="printBtn">Print</a>

<script>
$(document).ready(function () {
    $('#printBtn').click(function () {

        var numberOfActiveIds = @Model.Count();

        $.ajax({
            type: "POST",
            url: "/Home/PostResults",
            data: { ids: numberOfActiveIds},
            success: function (results) {
                if(results == "Success") {
                    window.location.href = '/Home/Results';
                }
            }
        });
    });
});
</script>

问题是单击按钮时从数据库获取当前事件项目数。假设用户在页面加载几分钟后在页面上保持空闲状态。当他们的页面最初加载时，模型返回了 5 个列为事件的项目...但是当他们等待时，数据库中的另外 3 个项目被切换为事件，总共 8 个。但是，当用户最终单击该按钮时，它将提交 5 项，而不是当前的 8 项。

由于大型应用程序的设置方式的性质，我无法运行查询来获取“/Home/PostResults”ActionResult 中当前事件项目的数量。有没有办法在函数的其余部分使用刷新模型的值执行之前刷新页面(获取更新的模型)？

如果您还有任何其他问题，请告诉我，我很乐意满足。我已经查看了 SO 上的其他问题和答案，但我还没有找到适合我的情况的问题和答案。谢谢!

<小时/>

编辑#1

因此，我已将此函数添加到 Home Controller 中，该 Controller 仅以 Json 形式返回列表计数。

    public ActionResult GetIds(){
        List<int> activeIds = new List<int>();
        SqlConnection sqlConn = new SqlConnection(connection_String);

        sqlConn.Open();

        string sqlStr = "SELECT * FROM dbo.[JS-Test] WHERE Active = 1";
        SqlCommand sqlCmd = new SqlCommand(sqlStr, sqlConn);
        SqlDataReader sqlDR = sqlCmd.ExecuteReader();

        if (sqlDR.HasRows) {
            while (sqlDR.Read()) {
                activeIds.Add((int)sqlDR["ID"]);
            }
        }

        sqlDR.Close();
        sqlCmd.Dispose();
        sqlConn.Close();

        return Json(activeIds.Count());
    }

View 脚本现在看起来像这样......

<script>
$(document).ready(function () {
    $('#printBtn').click(function () {

        var numberOfActiveIds = @Model.Count();

        $.ajax({
            type: "GET",
            url: "/Home/GetIds",
            success: function(response) {
                numberOfActiveIds = response;

                $.ajax({
                    type: "POST",
                    url: "/Home/PostResults",
                    data: { ids: numberOfActiveIds},
                    success: function (results) {
                        if(results == "Success") {
                            window.location.href = '/Home/Results';
                        }
                    }
                });
            }
        });
    });
});
</script>

我目前收到以下错误...

无法加载资源:服务器响应状态为 500(内部服务器错误)

<小时/>

编辑#2

我必须将 JsonRequestBehavior 设置为 AllowGet 才能正常工作。再次感谢大家!

Answer 1

gforce301 mentioned to GET the current actives via an ajax call to an additional, separate method making the query to the database and THEN ajax post the returned "actives". Is that possible?

是的，这是可能的。这就是我提到它的原因。无论其他人如何看待您应该如何做到这一点，我理解您可能会受限于为什么不能这样做他们的方式即使他们不这样做。

下面的代码是对您的代码的重组。它将 2 个 ajax 调用链接在一起，第二个调用取决于第一个调用的成功。请注意第一个 ajax 调用的成功处理程序中的注释 block 。由于我不知道响应是什么，所以我无法填写如何使用它的部分。这实现了让用户只需单击一次按钮的目标。

<script>
$(document).ready(function () {
    $('#printBtn').click(function () {

        var numberOfActiveIds = @Model.Count();

        $.ajax({
            type: 'GET',
            url: '/path/to/get/activeIds',
            success: function(response) {
                /*
                    Since I don't know the structure of response
                    I have to just explain.

                    use response to populate numberOfActiveIds

                    now we just make our post ajax request.
                */

                $.ajax({
                    type: "POST",
                    url: "/Home/PostResults",
                    data: { ids: numberOfActiveIds},
                    success: function (results) {
                        if(results == "Success") {
                            window.location.href = '/Home/Results';
                        }
                    }
                });
            }
        });


    });
});
</script>