同步提交的两种基本方式

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

 <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”:会造成想不到的问题。

<script>
onload = function () {
document.getElementById('btnsub').onclick = function () {
var frm = document.getElementById('frm');
if (frm) {
frm.submit();
}
}
}
</script> 
<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

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

对应的源代码

<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来提交。

<script>
onload = function () {
document.getElementById('btnsub').onclick = function () {
var frm = document.getElementById('form1');
if (frm) {
frm.submit();
}
}
} </script>

后置代码中可以用到ispostback,首次加载ispostback为false,post之后(点击按钮后)ispostback为true

 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的这个控件。

<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级别,这样页面可以拿到这个变量。

 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 的窗体标记内。

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

页面源代码

 <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”属性为什么还要有服务器控件?

比如

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

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

        protected void Button1_Click(object sender, EventArgs e)
{
//Response.Write("y");
}

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

<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) {
                alert(data);
}
})
})
}) </script>
 <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>

后置代码

            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”

<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>

后置代码

 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提交表单

   同步提交(页面刷新)

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

页面源代码

<form action="/Form/index" method="post"> 
     <input type="text" name="name" value=" " />
<input type="submit" value="提交"/>
</form>

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

1,引入隐士ajax脚本

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

  <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="提交"/>
}

页面源代码

<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>

ASP.NET\ASP.NET MVC表单提交遇到的问题结论的更多相关文章

  1. asp.net mvc表单提交的几种方式

    asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...

  2. Asp.Net Mvc表单提交(批量提交)

    Asp.Net Mvc中Action的参数可以自动接收和反序列化form表单的值, 采用form表单提交 name=value类型,只要Action参数的变量名和input的name相同就行 html ...

  3. ASP.NET MVC 表单提交多层子级实体集合数据到控制器中

    于遇到了项目中实体类嵌套多层子级实体集合,并且子级实体集合的数据需要提交保存到数据库中的问题.针对此情况需要进行一些特殊的处理才可以将整个 实体类及子级实体集合数据提交表单到控制器中,解决的方法是根据 ...

  4. [Spring MVC] - 表单提交

    Spring MVC自带的表单标签比较简单,很多时候需要借助EL和JSTL来完成. 下面是一个比较简单的表单提交页面功能: 1.User model package com.my.controller ...

  5. Spring MVC表单提交

    实际应用中,列表中的单条记录的修改,可能需要传很多对象参数到后台服务器,Spring MVC表单标签<form:> 提供了一种简洁的提交方式. <form id="form ...

  6. Asp.Net Mvc表单提交之List集合

    一.说明 1.Asp.Net Mvc中Action的参数可以自动接收和反序列化form表单的值, 2.对于name=value类型,只要Action参数的变量名和input的name相同就行,不区分大 ...

  7. Asp.net webForm设置允许表单提交Html

    1. 在表单需要提交Html的页面头部加入  ValidateRequest="false" <%@ Page Language="C#" AutoEve ...

  8. MVC 表单提交【转】

    [转自]:http://www.cnblogs.com/dengdl/archive/2011/07/14/2106849.html 在做Asp.Net MVC项目中,都知道View负责页面展示数据或 ...

  9. MVC表单提交写法1

    初学MVC,感觉跟以前的aspx页面差别很大,我们就先来看看MVC的表单是怎么提交的吧. 现在我们用一个最简单的例子来看一看MVC是怎么提交表单的(这一个例子中,我们的关注点是如何提交表单,所以不涉及 ...

随机推荐

  1. VS2013+opencv2.4.9(10)配置

    1. 下载opencv2.4.9,然后解压到一个位置 设置opencv SDK解压目录,点击Extract后解压   我是习惯于解压到这个位置的.   解压过程如上图.  2. 文件目录介绍  解压后 ...

  2. 用mtrace检查内存泄漏

    http://blog.csdn.net/ixidof/article/details/6638066内存泄漏检查方法(for Linux) 如果你更想读原始文档, 请参考glibc info的&qu ...

  3. makefile_1(初识make)

    Makefile有三个非常有用的变量.分别是$@,$^,$<代表的意义分别是: $@--目标文件,$^--所有的依赖文件,$<--第一个依赖文件. LIBS = -lmCFLAGS = - ...

  4. hadoop机架感知

    背景 分布式的集群通常包含非常多的机器,由于受到机架槽位和交换机网口的限制,通常大型的分布式集群都会跨好几个机架,由多个机架上的机器共同组成一个分布式集群.机架内的机器之间的网络速度通常都会高于跨机架 ...

  5. 深入学习SQL的Limit语句

    一.基本语法 SQL的limit语法的如以下形式 SELECT * FROM table  LIMIT [offset,] rows | rows OFFSET offset 当省略offset的时候 ...

  6. C#控制管理VisualSVN Server 分类: C# 2014-05-29 15:51 796人阅读 评论(0) 收藏

    VisualSVN Server可以用WMI接口管理(Windows Management Instrumentation). VisualSVN Server安装的计算机中,位于%VISUALSVN ...

  7. Java Hour 32 Weather ( 5 ) struts2 – Action class

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 32 Struts2 Action 1 将action 映射到 ac ...

  8. Java Hour 25 Packages

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 25 Hours. Packages Programs are organiz ...

  9. Java hour5

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. 本文作者Java 现经验约为4 Hour,请各位不吝赐教. Hour5 神一样 ...

  10. 【HTML5】Server-Sent服务器发送事件

    Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新. 以前也可能做到这一点,前提是网页不得不询问是否有可用的更新.通过服务器发送事件,更新能 ...