AjaxForm

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 109 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/whpsns/p/5441591.html

文章标签：

#javascript #ViewUI

本文介绍了基于AjaxForm插件的表单提交方法，该插件支持通过Ajax方式提交表单，并内置了防止重复提交的功能。同时，文章还提供了如何区分表单提交成功与否的方法，并给出了具体的使用示例。

近乎的Ajax控件介绍，代码下载：http://www.jinhusns.com/Products/Download?type=whp

AjaxForm

概述

功能说明

基于 ajaxForm 插件进行构建，可以使表单通过ajax的方式进行提交，并扩展了以下功能：

1.通过Html.BeginAjaxForm即可调用ajaxForm
2.内置block功能防止用户多次提交表单
3.利用服务器端返回的数据类型不同，区别开表单是否成功提交，并提供了提交表单成功/失败回调函数

更多信息请参见：

ajaxForm：http://jquery.malsup.com/form/
block：http://malsup.com/jquery/block/

示例

调用ajaxForm,自定义success和error方法

评论内容中有字符串：“error”，即模拟请求出错
评论内容中有字符串中没有：“error”，即模拟请求正确

提交取消

查看源代码

调用ajaxForm，使用Target

回答

查看源代码

在模式框中提交表单

因为出错时，需要更新模式框内容，要用到模式框实例，可以通过在模式框内容的<script type="text/dialog"> </script>来获取实例。

打开对话框

查看源代码

      01.
      @using (Html.BeginAjaxForm("_CreateComment", "HtmlHelper", FormMethod.Post,
     
      02.
      new AjaxFormOptions().SetOnSuccessCallBack("success")))
     
      03.
      {
     
      04.
      //...
     
      05.
      }
     
      06.
      <script type="text/dialog">
     
      07.
      var dialog=this;
     
      08.
      this.title("发表新评论");
     
      09.
      </script>
     
      10.
       
      11.
      <script type="text/javascript">
     
      12.
      function error(response) {
     
      13.
      $("#CreateComment").html(response);
     
      14.
      }
     
      15.
       
      16.
      function success() {
     
      17.
      $("#PhotoComments").load("@(Url.Action("_PhotoComments", new { photoId = 1 }))");
     
      18.
      }
     
      19.
      </script>