Jquery 如何将数据发送到另一个页面并重定向到另一个页面？_Jquery_Forms_Post_Razor_Asp.net Webpages

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

jquery forms post razor

Jquery 如何将数据发送到另一个页面并重定向到另一个页面？,jquery,forms,post,razor,asp.net-webpages,Jquery,Forms,Post,Razor,Asp.net Webpages,我正在使用ASP.NET网页3和JQuery 2.1 我有一个网页Input.cshtml，所有的都是html，没有服务器端代码。我还有一个名为ShowTable.cshtml的页面，所有页面都是html，没有服务器端代码。最后，一个名为LoadTable.cshtml的页面包含所有服务器端代码，使用JQuery填充该表我要做的是：从input.cshtml获取输入并将其传递到LoadTable.cshtml，然后让LoadTable.cshtml将结果数据传递到ShowTable.cshtm

我正在使用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完成的。换句话说，我希望将输入从一个web页面传递到服务器端页面，并让该服务器端页面将结果数据发送到另一个web页面

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

挑战在于web的继承无状态，但有几个选项可用：

Http Cache:

如果数据可以在所有用户之间共享，我会考虑HTTP缓存来存储它< /P>

SessionState:

将值存储在原始页面的SessionState中，并在任何后续页面中引用它。这是数据特定于用户的场景中的常见选项

Html5 local storage:

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

Url:

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

Post Request:

要绕过在url中传递数据的限制，您可以通过post请求的post数据将其发布到另一个页面。

听起来您真正想要做的是将项目存储在第1页的数据库MySQL、MongoDB等中。进入数据库后，您可以从第2页或第3页使用$.ajaxor$.get访问项目。就个人而言，我总是在需要3页交互时使用数据库

您可以按照@TGH的建议，使用存储在客户端计算机上的会话数据进行类似的3页交互。然而如果您确实采取这种方式，并且根据您对需要加载的信息所做的操作，我会厌倦以这种方式存储长期用户输入，因为您必须将值发布到服务器页面，但当您到达第3页（即未接收到数据的页面）时，您仍然必须从客户端主机读取这些值直接发布信息

如果您确实使用会话存储，那么如果您选择使用jQuery cookie，您可能希望限制cookie的过期日期，并且请记住localStorage项没有过期日期，因此如果您选择localStorage作为选项，则可以在需要销毁项目时将其设置为null

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

当您将数据从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>

我希望这会有所帮助。

输入不需要持久化，只需传递到服务器端脚本即可生成必要的数据。@dotnetN00b在这种情况下可能需要使用会话存储。在处理完数据后，只需过期或将项目设置为null。或者，您可能只需在第1页的on submit函数中执行2个post请求。发布到第2页，然后再发布到第3页。有没有办法在其中使用隐藏字段？虽然隐藏字段对于单个页面是唯一的，但是可以将值存储在隐藏字段中，然后将值发布到服务器。