Fork me on GitHub

李可

导航

统计

ASP.NET\ASP.NET MVC表单提交遇到的问题结论

回到顶部

同步提交的两种基本方式

回到顶部

　　1，用type=“submit”按钮。form没有必要runat=“server”

?
1
2
3
4
5
<form method="post" action="SubmitForm.aspx">
       id:<input type="text" id="txtId" name="txtId" /><br />
       name:<input type="text" id="txtName" name="txtName" /><br />
       <input type="submit" value="提交" />
   </form>
回到顶部

　　2，用type=“button”。form没有必要runat=“server”

javascript方式提交，不能type=“submit”：会造成想不到的问题。

?
1
2
3
4
5
6
7
8
9
10
<script>
        onload = function () {
            document.getElementById('btnsub').onclick = function () {
                var frm = document.getElementById('frm');
                if (frm) {
                    frm.submit();
                }
            }
        }
    </script>　
?
1
2
3
4
5
<form id="frm" method="post" action="SubmitForm.aspx">
        id:<input type="text" id="txtId" name="txtId" /><br />
        name:<input type="text" id="txtName" name="txtName" /><br />
        <input type="button" id="btnsub" value="提交" />
    </form>

注意：上述提交方式：form中没有隐藏域，后置代码中的ispostback永远为false。

所以这些客户端控件提交，假使没有自己写viewstate，后置代码是不能用到ispostback。当然我们可以模拟隐藏域。

如果想使用ispostback，更为方便的方式，用form runat=“server”的表单。

 

回到顶部

runat=“server”提交

回到顶部

　　1，form runat=“server”创建隐藏域，方便使用ispostback

?
1
2
3
<form id="form1"  runat="server" >
        <input id="btnsub" type="button" name="name" value="提交" />
    </form>

对应的源代码

?
1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="SubmitDemo4.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEzNDM3NzkxOWRkFhrJ2htKdbAXWvYaKqbSR1DlJxfnPlLSZZ+sg4QDkgo=" />
</div>
 
<div class="aspNetHidden">
 
    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="1D64C812" />
</div>
        <input id="btnsub" type="button" name="name" value="提交"  />
    </form>　　

type=“button”的form，我们只能用javascript来提交。

?
1
2
3
4
5
6
7
8
9
10
11
<script>
        onload = function () {
            document.getElementById('btnsub').onclick = function () {
                var frm = document.getElementById('form1');
                if (frm) {
                    frm.submit();
                }
            }
        }
 
        </script>

后置代码中可以用到ispostback，首次加载ispostback为false，post之后（点击按钮后）ispostback为true

?
1
2
3
4
5
6
7
8
9
10
11
protected void Page_Load(object sender, EventArgs e)
       {
           if (IsPostBack)
           {
               var txtId = Request.Form["txtId"] ?? string.Empty;
               var txtName = Request.Form["txtName"] ?? string.Empty;
               Response.Write(txtId + txtName);
               Response.End();
 
           }
       }　　

在后置代码中，我们可以用ispostback，首次加载为false，post之后为true。

注意：form的runat=“server”属性，帮我们做到的功能：加上隐藏域input type="hidden" name="__VIEWSTATE"和__VIEWSTATEGENERATOR

其中__VIEWSTATE就是后置代码ispostback判断真假的本质。

页面首次加载，为get请求，__VIEWSTATE的input值不会被传递到后置代码中。

当post提交时候，它会被提交到后台，我们只需在后置代码中检测这个input的值是否存在，不存在即是get请求，当然一般是首次加载，存在变是post回传过来的。

 

回到顶部

　　2，runat=“server”的第二个目的，在服务端拿到这个控件

它的目的：在后置代码中，我们可以直接访问并处理到对应的id的这个控件。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
        onload = function () {
            document.getElementById('btnsub').onclick = function () {
                var frm = document.getElementById('<%= formclientID%>');
                if (frm) {
                    frm.submit();
                }
            }
        }
</script>
 
<form id="form1" runat="server">
    <div>
        <input type="button" id="btnsub" name="name" value="提交" runat="server" />
    </div>
    </form>

　后置代码 ：aspx和aspx.cs文件是继承的关系，我们在后置代码(基类)中定义一个变量为protect级别，这样页面可以拿到这个变量。

?
1
2
3
4
5
6
7
8
9
public partial class runatserver : System.Web.UI.Page
   {
       protected string formclientID = string.Empty;
       protected void Page_Load(object sender, EventArgs e)
       {
           formclientID = form1.ClientID;
           btnsub.Value = "改过的提交";
       }
   }

页面显示，显示的是在后置代码中被更改后的值，并非HTML中设置的value

　　　　　　　　　　　

　

回到顶部

服务器控件提交

也许你会用到服务器控件button，记得它一定在form runat=“server”中，否则报错。类型“Button”的控件“Button1”必须放在具有 runat=server 的窗体标记内。

?
1
2
3
<form id="form1" runat="server">
      <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
   </form>

页面源代码

?
1
2
3
4
5
6
7
8
9
10
11
12
<form method="post" action="ServerControl.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTI0MTIwNDkwOWRk+uzHYLaWkTZXq5gbvwWQqLnBhSG8yeCI0Y0ZfO3Uiao=" />
</div>
 
<div class="aspNetHidden">
 
    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75E12176" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAKMxJZ3e2e2T+pTyw/bgzf8zfg78Z8BXhXifTCAVkevd9GccaPBHHKDYQmgMf9k8Rs3iGzmicl8nAyLMrUQxTTv" />
</div>
       <input type="submit" name="Button1" value="Button" id="Button1" />
    </form>

　注意：本质是服务器button在页面生成HTML：type=“submit”也就是我们上文提到的基本的提交方式第一种，如上文讲到我们可以在后置代码中拿到这个id。

回到顶部

　　有了runat=“server”属性为什么还要有服务器控件？

比如

?
1
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

在设计中点击之后，直接转到后置代码，创建click事件处理代码。

?
1
2
3
4
protected void Button1_Click(object sender, EventArgs e)
{
    //Response.Write("y");
}
回到顶部

asp.net jQuery.ajax异步提交表单

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="js/jquery-1.4.1.min.js"></script>  
    <script>
        $(function () {
            $("#btnsub").click(function () {
                $.ajax({
                    type: "post",
                    url: "AsynSubmit.aspx/Page_Load",
                    //data: { username: $("#username").val(), content: $("#content").val() },
                    data:$("#form1").serialize(),
                    success: function (data) {<br>　　　　　　　　　　　　　　　　alert(data);  
                    }
                })
            })
        })
 
    </script>
?
1
2
3
4
5
<form id="form1" runat="server">
       id:<input type="text" name="textID" value=" " /><br />
        Name:<input type="text" name="textName" value=" " /><br />
       <input id="btnsub" type="button" name="btnsub" value="异步提交" />
   </form>

后置代码

?
1
2
3
4
5
6
7
if (IsPostBack)
{
    string id=Request.Form["textID"]??string.Empty;
    string Name=Request.Form["textName"]??string.Empty;
    Response.Write(id + Name);
    Response.End();
}

注意：Response.End()的使用，不让其返回其他流，只返回指定的数据就ok。因为默认会返回整个页面的html。

回到顶部

　　如何判断一个请求是不是异步

第一个方法：请求的时候看浏览器的刷新按钮，是否刷新。

第二个方法：查看这次请求的请求头是否包含X-Requested-With：XMLHttpRequest，如果请求头部还有这个标示，表示这次请求为异步请求。

 

回到顶部

不小心造成的问题  用到ajax，但是提交按钮写成了type=“submit”

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.4.1.min.js"></script>  
    <script>
        $(function () {
            $("#btnsub").click(function () {
                alert(1);
                $.ajax({
                    type: "post",
                    url: "AsynSubmit.aspx/Page_Load",
                    //data: { username: $("#username").val(), content: $("#content").val() },
                    data:$("#form1").serialize(),                 
                    success: function (data) {
                        $("#idd").text(data);
                    }
 
                })
 
            })
        })
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
        id:<input type="text" name="textID" value=" " /><br />
         Name:<input type="text" name="textName" value=" " /><br />
        <input id="btnsub" type="submit" name="btnsub" value="异步提交" />
    </form>
    <div id="idd" style="width:200px;height:200px;background:red;"></div>
</body>
</html>

后置代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
protected void Page_Load(object sender, EventArgs e)
       {
           int count = 0;
           if (IsPostBack)
           {
               count++;
               string xrequest = Request.Headers["X-Requested-With"];
               if (xrequest != null)
               {
                   string id = Request.Form["textID"] ?? string.Empty;
                   string Name = Request.Form["textName"] ?? string.Empty;
                   Response.Write(id + Name);
                   //Response.End();//注意这个使用，不让其返回整个页面HTML
                   
               }
               else
               {
                   Response.Write("同步");
 
               }
 
           }
       }　
回到顶部

　　注意+问题，求这个答案

后置代码中打上断点调试的过程中，并不是按照从上到下的执行，有时候会从下向上执行~~~因为同时发出了异步请求和同步请求，两个请求同时到达。程序就出现紊乱。程序中的xrequest != null执行，表示请求是异步的。这样便没有什么意义。这种紊乱谁能解释一下吗？

回到顶部

MVC提交表单

回到顶部

　　 同步提交(页面刷新)

?
1
2
3
4
@using (Html.BeginForm())
   { <input type="text" name="name" value=" " />
       <input type="submit" value="提交"/>     
   }

页面源代码

?
1
2
3
<form action="/Form/index" method="post"> <br>　　　　　<input type="text" name="name" value=" " />
        <input type="submit" value="提交"/>
</form>
回到顶部

　　异步提交(请求头也含有X-Requested-With：XMLHttpRequest)

1，引入隐士ajax脚本

2，表单里面的提交按钮一定type=“submit”，否则没有作用的。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script>
        function success(data) {
            alert(data)
        }
    </script>
 
 
@using(Ajax.BeginForm(new AjaxOptions(){Confirm="ddddd", HttpMethod="post", OnSuccess="success" }))
    {
        <input type="text" name="name" value=" " />
        <input type="submit" value="提交"/>
    }

页面源代码

?
1
2
3
<form action="/Form/index" data-ajax="true" data-ajax-confirm="ddddd" data-ajax-method="post" data-ajax-success="success" id="form0" method="post">           <input type="text" name="name" value=" " />
        <input type="submit" value="提交"/>
</form>   

 

posted on   李可在江湖  阅读(2726)  评论(2)  编辑  收藏  举报

编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae