Question

我使用的是ASP.NET网页3和JQuery 2.1。

我有一个网页Input.cshtml，所有这些都是html，没有服务器端代码。我还有一个名为ShowTable.cshtml的页面，所有这些都是html，没有服务器端代码。最后，一个名为LoadTable.cshtml（所有服务器端代码）的页面，使用JQuery填充表。

我想要做的是：从Input.cshtml获取输入并将其传递给LoadTable.cshtml，然后让LoadTable.cshtml将结果数据传递给ShowTable.cshtml。我的所有回发和ajax都是通过JQuery完成的。换句话说，我想将输入从一个网页传递到服务器端页面，并让服务器端页面将结果数据发送到不同的网页。

我完成了大部分工作。我唯一感到困惑的是让服务器端页面将结果数据发送到不同的网页。

Answer 1

挑战是网络的继承无国籍，但有几个选择：

Http Cache:

如果数据可以在所有用户之间共享，我会考虑使用http缓存来存储它

SessionState:

将SessionState中的值存储在原始页面中，并在任何后续页面中返回它。在数据特定于用户的情况下，这是一种常见选项。

Html5 local storage:

将值存储在客户端的本地存储中。如果我们谈论大量数据，这不是一个好的选择，因为你必须将它传输到客户端。对此的变体是会话存储，它使用类似的API，但仅对当前的浏览器会话有效。

Url:

将数据传递到url的查询字符串中。由于最大网址大小等原因，这将受到限制。

Post Request:

要解决在网址中传递数据的限制，您可以通过帖子请求的帖子数据将其发布到其他网页。

Answer 2

您真正想要做的就是将项目存储在数据库（MySQL，MongoDB等）中。在数据库中，您可以使用$.ajax或$.get访问项目从第2页或第3页开始。就个人而言，当需要3页互动时，我总是使用数据库。

您可以像@TGH建议的那样，对存储在客户端计算机上的会话数据进行类似的3页交互。但是，如果您采取这种方式（取决于您对加载所需信息的处理方式），我会厌倦以这种方式存储长期用户输入，因为您要去必须将值发布到您的服务器页面，但是当您到达第3页时（即没有直接接收帖子信息的页面），您仍然必须从客户端的主机上阅读它们。

如果您确实使用会话存储，您可能希望限制cookie的到期日期（例如，如果您选择使用jQuery cookie），并记住localStorage项目没有到期日期，因此如果您选择{ {1}}如果您需要销毁它们，可以将项目设置为localStorage。

Answer 3

我真的不明白为什么要使用第三页来显示输出。

当您将数据从Input.cshtml发布到LoadTable.cshtml时，它会回复到Input.cshtml，您必须找到将响应传输到ShowTable的方法。为什么不使用单个页面输入和显示数据，反过来隐藏那些不重要的部分？

在下面的代码中，我模拟了一个简单的应用程序，它将数据发布到只有Id，FirstName和LastName字段的表Temp，并显示表的内容：

LoadTable.cshtml

@using System.Text;

@{
    if(IsPost){
        var db = Database.Open("MyDb");
        var sql = "INSERT INTO Temp (FirstName, LastName) VALUES (@0, @1)";
        var FirstName = Request["FirstName"];
        var LastName = Request["LastName"];
        db.Execute(sql, FirstName, LastName);

        var data = db.Query("SELECT * FROM Temp");
        StringBuilder html = new StringBuilder();
        html.Append("<table>");
        html.Append("<tr><th>id</th><th>First Name</th><th>Last Name</th></tr>");
        foreach(var row in data){
            html.Append("<tr><td>" + row.id + "</td><td>" + row.FirstName + 
                    "</td><td>" + row.LastName + "</td>");
        }
        html.Append("</table>");

        Response.Write(html.ToString());
    }
}

Input.cshtml

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="form">
            <form method="post" id="myForm" action="~/LoadTable.cshtml">
                FirstName: <input type="text" name="FirstName" /><br />
                LastName: <input type="text" name="LastName" /><br />
            </form>
            <button onclick="GetHtml()">Display</button>
        </div>
        <div id="display">
            <button onclick="GetForm()">Input</button>
        </div>
    </body>
</html>

<script>
    $(function () {
        GetForm();
    });

    function GetHtml() {
        $.ajax({
            type: "POST",
            url: $("#myForm").attr('action'),
            data: $("#myForm").serialize(),
            dataType: "html",
            success: function (data) {
                document.getElementById('display').innerHTML = "<button onclick='GetForm()'>Input</button>";
                $("#display").prepend(data);
                $("#form").hide();
                $("#display").show();
            }
        });
    }

    function GetForm() {
        $("input:text").val("");
        $("#display").hide();
        $("#form").show();
    }
</script>

我希望它有所帮助。

如何将数据发送到另一个页面并重定向到另一个页面？

3 个答案: