C# 将表单从 JavaScript 发布到另一个 .aspx 但参数中没有参数

如何解决C# 将表单从 JavaScript 发布到另一个 .aspx 但参数中没有参数

在 .aspx 页面中，我正在使用 JavaScript 填写一些隐藏的表单字段，然后想将表单发布到另一个 .aspx 页面。它正确提交表单，但是当我查看表单操作中调用的页面中的 Request.Params["org"] 时，它为空。

<script src="prototype.js"></script>
<script>
function doIt() {
    $('org').value = org_int;
    $('frmCheckout').submit();
}
</script>
...
<form id="frmCheckout" method="post" action="checkout.aspx">
<input type="hidden" value="" id="org" name="org">
<input type="submit" onclick="doIt()" value="Submit">
</form>

$ 是在示例之前引入的原型符号。原型中的 $ 与 document.getElementById('frmCheckout') 相同。

主要编辑 2/1/2021 7:52：在寻找解决方案时，我发现了一些新信息，但仍然无效。

我找到了 PostBackUrl，它会将 .aspx 的操作更改为另一个 .aspx 页面。这部分有效。提交时，它调用 Checkout.aspx

<asp:Button ID="Submit" PostBackUrl="Checkout.aspx" runat="server" Text="Submit" />

但是数据在 Checkout.aspx 中不可用... Request.Form（应该有）或 Request.Params 中没有值。
我也试过：

<asp:TextBox runat="server" name="jsonString" id="jsonString" value="js" />

但是我得到了一个无效的 __VIEWSTATE 我知道我应该改变它但还没有任何效果。

解决方法

尝试以下操作。在以下示例中，Javascript 需要在表单代码之后。 Request.Form["org"] 用于从发布的数据中获取“org”的值。此外，如果在 Javascript 中使用 $，重要的是在定义之前不要使用它。见javascript dollar sign variable not working。

Test.aspx（有效）

<!-- directives -->
<% @Page Language="C#" %>

<html>
   <head> 
      <title> Test Form </title> 
   </head>
   
   <body>
      <h3> Test Form </h3>

      <form runat="server" id="frmCheckout" method="post" action="checkout.aspx">
         <input runat="server" type="hidden" id="org" name="org" value=""/>
         
      </form>

      <script>
          function setInitialVals() {
              document.getElementById('org').value = "3";
              document.getElementById('frmCheckout').submit();
          };

          setInitialVals();
      </script>
   </body>
</html>

checkout.aspx

<!-- directives -->
<% @Page Language="C#" %>

<html>
   <head> 
      <title> Checkout</title> 
   </head>
   
   <body>
      <h3> Checkout </h3>
      
       <% Response.Write("org: " + Request.Form["org"]); %>  
      
   </body>
</html>

以下方法无效：

Test.aspx（不起作用）

注意：以下将不起作用，因为在呈现输入元素之前执行 Javascript。

<!-- directives -->
<% @Page Language="C#" %>

<html>
   <head> 
      <title> Test Form </title> 
   </head>
   
   <body>
      <h3> Test Form </h3>

      <script>
          function setInitialVals() {
              document.getElementById('org').value = "3";
              document.getElementById('frmCheckout').submit();
          };

          setInitialVals();
      </script>

      <form runat="server" id="frmCheckout" method="post" action="checkout.aspx">
         <input runat="server" type="hidden" id="org" name="org" value=""/>
         
      </form>
   </body>
</html>

资源

Introducing ASP.NET Web Pages - HTML Form Basics

请改变方法。考虑在表单中添加一个 asp 按钮并为该按钮触发点击事件；按钮属性需要像 Microsoft Docs How to: Post ASP.NET Web Pages to a Different Page 的这个主题：

<script src="prototype.js"></script>
<script>
function doIt() {
    $('#org').value = org_int;
    $('#btnPostBack').click();
}
</script>
...
<form id="frmCheckout" method="post">
<input type="hidden" value="" id="org" name="org">
<input type="button" onclick="doIt()" value="Submit">
<asp:Button ID="btnPostBack" ClientIdMode="Static" PostBackUrl="~/checkout.aspx"  runat="server" Text="Post Form To Another Page" style="display:none;"/>
</form>

注意：我在您的代码中看到 id 的选择器在您的 JS 代码中不包含主题标签前缀...

请

尝试将表单方法属性从 post 更改为 get，如果您想使用“org”作为查询字符串：

$('org').value = org_int;
$('frmCheckout').submit();
...
<form id="frmCheckout" method="get" action="checkout.aspx">
<input type="hidden" value="" id="org" name="org">
</form>

更新：

我下载了 prototype.js 并将其添加到下面似乎有效的测试代码中。您发布的代码与下面的代码之间的唯一区别应该是我在函数“doIt”中硬编码了“org_int”的值：df = df.drop(columns=['idx','month_helper','offset']) print(df) Frequency Date 1 Date 2 Date 3 0 1 2020-04-20 2021-03-04 2020-03-04 1 1 2020-04-20 2021-03-04 2021-03-04 2 1 2020-04-20 2021-03-04 2022-03-04 3 2 2020-05-26 2021-08-04 2020-08-04 4 2 2020-05-26 2021-08-04 2021-02-04 5 2 2020-05-26 2021-08-04 2021-08-04。

test.aspx

let org_int = 3;

checkout.aspx

<% @Page Language="C#" %>

<html>
   <head> 
      <title> Test Form </title> 
   </head>
   
   <body>
      <h3> Test Form </h3>

       <script src="prototype.js"></script>
             
       <script>
           function doIt() {

               try {
                        let org_int = 3;

                        $('org').value = org_int;
                        $('frmCheckout').submit();

                        //document.getElementById('org').value = org_int;
                        //document.getElementById('frmCheckout').submit();
               }
               catch (err) {
                   console.log(err);
                   alert(err);       
               }
           }

       </script>

        <form id="frmCheckout" method="post" action="checkout.aspx">
            <input type="hidden" value="" id="org" name="org">
            <input type="submit" onclick="doIt()" value="Submit">
        </form>
       
   </body>
</html>