ToolKit Framework Demo 中PostForm和AjaxPostForm

最新推荐文章于 2024-10-01 17:23:02 发布

lxy_abcde1190

最新推荐文章于 2024-10-01 17:23:02 发布

阅读量545

点赞数

分类专栏： ajax文章 C#技术文章 c#web开发高级编程文章标签： xmlhttprequest function asynchronous object parameters ajax

c#web开发同时被 3 个专栏收录

55 篇文章 0 订阅

订阅专栏

C#技术文章

49 篇文章 0 订阅

订阅专栏

高级编程

32 篇文章 0 订阅

订阅专栏

这几天有点忙了，今天有点空闲时间给大家讲讲PostForm和AjaxPostForm。

如果大家按照我示例中的说明把Demo调试环境搭建起来的话，浏览http://localhost/PostForm和http://localhost/AjaxPostForm可以查看效果。

先来看看PostForm.cs中的代码：

using System;
using System.Text;
using System.Data;
using ToolKit.Web;
using ToolKit.Common;
using ToolKit.Demo.Web.Components;

namespace ToolKit.Demo.Web.Controllers
{
    /// <summary>
    /// PostForm 的摘要说明。
    /// </summary>
    public class PostForm : BasePage
    {
        public string strHello = string.Empty;

        public PostForm()
        {
            //this.LoginUserName = General.GetCookie("LoginUserName");
            //this.CheckLogin("http://www.yoursite.com/login?returnurl=" + Request.Url.ToString());
        }

        protected override void OnGetting(Object sender, DataEventArgs e)
        {
            strHello = "这是初始值...";
        }

        protected override void OnPostting(Object sender, DataEventArgs e)
        {
            strHello = Request.Form["text"];
        }
    }
}

这里定义了个string类型的变量初始值是string.Empty,在GET请求中我把它的值改变成“这是初始值...”。然后把它绑定到了前台页面。

这样浏览器加载页面的时候就是这样的了：

大家应该看到了，我把这段放到了form中，有个按扭类型为“submit”，这样就会提交这个form。这是普通的提交方式，结果可想而知：

执行了后台代码里面的：

protected override void OnPostting(Object sender, DataEventArgs e)
{
strHello = Request.Form["text"];
}

这样strHello 的值就变成了你的输入框里面的值了，提交后页面刷新显示的就是你在输入框里面输入的值了，这就和普通的页面Post一样。

再来看看AjaxPostForm.cs中的代码：

using System;
using System.Text;
using System.Data;
using ToolKit.Web;
using ToolKit.Common;
using ToolKit.Demo.Web.Components;

namespace ToolKit.Demo.Web.Controllers
{
    /// <summary>
    /// AjaxPostForm 的摘要说明。
    /// </summary>
    public class AjaxPostForm : BasePage
    {
        public string strHello = string.Empty;

        public AjaxPostForm()
        {
            //this.LoginUserName = General.GetCookie("LoginUserName");
            //this.CheckLogin("http://www.yoursite.com/login?returnurl=" + Request.Url.ToString());
        }

        protected override void OnGetting(Object sender, DataEventArgs e)
        {
            strHello = "这是初始值...";
        }

        protected override void OnPostting(Object sender, DataEventArgs e)
        {
            Response.Write(Request.Form["text"]);
            Response.End();
        }
    }
}

这里面OnGetting跟前面是一样的但是OnPostting里面就不一样了，前台页面上：

提交的时候没有“submit”了，而是通过一个JS方法提交的form：

ToolKit.Demo.AjaxPostForm =
{
    Initialize: function()
    {
    },
    PostForm: function()
    {
        var Loader = new ToolKit.Demo.Common.Loader();
        Loader.onsuccess = function()
        {
            var PostForm = new ToolKit.Demo.Common.FormPost()
            PostForm.Post("form","/AjaxPostForm");
            PostForm.onComplete = function(resp)
            {
                $("PostValue").innerHTML = resp;
            }
        }
        Loader.js("/Statics/JavaScripts/Prototype.js", true);
    }
};

这里我们封装了Prototype.js中的Form序列化方法，直接指定要提交的Form 的ID：

/**
     * 提交Form表单
     * @param {formname} Form名
     * @param {posturl} Post地址
     */
    FormPost: function()
    {
        this.Post = function(formname,posturl)
        {
             var postform = $(formname);
             var self = this;
             new Ajax.Request(
                                 posturl==undefined?postform.action:posturl,
                                 {
                                    asynchronous: true,
                                    evalScripts: true,
                                    parameters: Form.serialize(postform),
                                    onComplete: function(resp)
                                    {
                                        self.onComplete(resp.responseText);
                                    }
                                  }
                                );
        }
        this.onComplete = function(resp){};
    },

其实就是个Ajax请求，但是parameters不是我们普通Ajax请求指定的值了，而是Form序列化后的值，同时要给这个方法指定要提交的Form 的ID和请求的URL，

如果没有指定请求的URL那么默认请求到Form的action地址。

出现的页面显示跟前面是一样的，只不过Form提交的时候页面没有回发，而是通过Ajax方式提交的请求。

我们再来看看为什么Ajax提交的Form没有执行OnGetting方法而是直接到了OnPostting方法里面了，看看BasePage.cs代码283行就知道了：

public void ProcessPost()
{
    if (Request.Headers["X-Requested-With"] == "XMLHttpRequest")
    {
        OnPostting(e);

        if (e.GetJsonDataSet.Tables.Count == 2)
        {
            ToolKit.Common.Json json = new ToolKit.Common.Json(e.GetJsonDataSet);
            this.Response.Write(json.DataSetToJson());
        }
    }
    else if (Request.Headers["X-Requested-With"] == "WebHttpRequest")
    {
        OnPostting(e);
    }
    else
    {
        ProcessGet();
        OnPostting(e);
    }
}

这里面如果检测到Headers中的X-Requested-With的值为XMLHttpRequest是会直接执行AjaxPostForm类中重写的方法OnPostting的，同样WebHttpRequest的也是一样的，如果没有的话就执行普通的页面POST请求，这样就兼容了几种不同的POST方式。在这里我们还看到了前面我讲的AjaxList中返回JSON的实现。（有点土了，哈哈~~）

还有就是关于X-Requested-With的问题，目前几个流行的JS框架中，只要是发起的Ajax请求都是会带有这个头信息的，例如：Prototype、JQuery... 大家用HttpWatch观察请求

情况就可以看到的。

欢迎大家交流。。。下期给大家讲讲EnableStatic相关的。