MVC Ajax Form & Ajax Valida(笔记)

1、引入必要的文件

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

2、Ajax From & Ajax Valida

@using (Ajax.BeginForm("ajax", "home", new AjaxOptions() { UpdateTargetId = "ajaxResult", OnComplete = "return OnComplete()", OnBegin = "return OnBegin();", Confirm = "要提交?", OnFailure = "return OnFailure();", OnSuccess = "OnSuccess" }))
{    

    <text>Name:</text><input type="text" id="name" name="name" data-val="true" data-val-required="Name 是必填项." />
    <span class="field-validation-valid" data-valmsg-for="name" data-valmsg-replace="true" style="font-size:large; color:blue;"></span>

    <br />
    <text>Age:</text><input type="text" id="age" name="age" data-val="true" data-val-required="Age 是必填项." data-val-digits="输入合法数字."/>
    <div class="field-validation-valid" data-valmsg-for="age" data-valmsg-replace="true"></div>
    <br />
     <text>Email:</text><input type="text" id="email" name="email" data-val="true" data-val-email="Email格式不正确."/>
    <div class="field-validation-valid" data-valmsg-for="email" data-valmsg-replace="true"></div>
    <br />
    <input type="submit" value="Ajax提交" />
    <br />

}
<div id="ajaxResult">
</div>
<script>

    function OnComplete() {
        alert("OnComplete 事件");
    }
    function OnBegin() {
        alert("OnBegin 事件");
    }
    function OnFailure() {
        alert("OnFailure 事件 - ajax请求失败");
    }
    function OnSuccess(data) {
        alert("ajax 请求成功返回的数据:" + data);
    }

</script>

3、Controllers

        public ActionResult AjaxForm()
        {
            return View();
        }

        [HttpPost]
        public ActionResult ajax(string name, string age)
        {
            //throw new Exception("内部抛出了异常");
            return PartialView("AjaxFromControl", new AjaxModel() {  Name = name, Age = age});
        }

MVC Ajax Form & Ajax Valida(笔记)

时间: 2024-10-05 21:18:46

MVC Ajax Form & Ajax Valida(笔记)的相关文章

[转]深入ASP.NET MVC之九:Ajax支持

本文转自:http://www.cnblogs.com/yinzixin/archive/2012/12/22/2824384.html 目前前端页面和服务端进行Ajax交互大多采用的都是jQuery, ASP.NET MVC提供了一些方法使得这个过程变得更加容易.常见的Ajax应用场景有两种,一个是点击一个链接,然后局部加载一些内容,可以是html片段,也可能是json数据,然后通过前端js处理之后显示:另一个是异步提交表单.这些帮助方法都是位于AjaxExtensions种的扩展方法.先看第

ajax form表单提交 input file中的文件

ajax form表单提交 input file中的文件 现今的主流浏览器由于ajax提交form表单无法把文件类型数据提交到后台,供后台处理,可是开发中由于某些原因又不得不用ajax提交文件, 为了解决这个问题我走了不少弯路: 1.用原生的 input file , 不支持ajax上传文件,你肯定会说可以用 ajax form表单上传了呀?不过我后面还要调用上传成功后用js处理一些对话框,所以这种方法排除 2.用了 uploadify 上传插件,弄出来能上传东西,结果不理想:因为不能判断上传的

MVC使用jQuery.ajax()删除数据

jQuery.ajax()可以简写为$.ajax().以前有写过MVC删除的实现,如<MVC实现删除数据库记录> http://www.cnblogs.com/insus/p/3368042.html 和<MVC 5显示.创建.编辑.删除等功能实练>http://www.cnblogs.com/insus/p/3372916.html .不过此次Insus.NET想使用jQuery.ajax()方法来实现. 能实现到此功能,也有遇上很多困难以及花费很多时间.当你看到此篇时,你会看到

choices字段、MTV与MVC模型、AJAX、contentType前后端传输数据编码格式、序列化组件、AJAX+sweetalert使用

目录 choices字段.MTV与MVC模型.AJAX.序列化组件.AJAX+sweetalert使用 choices字段 MTV与MVC模型 ajax 特点: ajax传json格式数据 ajax传文件 ajax传文件需要注意的事项 contentType前后端传输数据编码格式 ajax + sweetalert的使用 序列化组件 choices字段.MTV与MVC模型.AJAX.序列化组件.AJAX+sweetalert使用 choices字段 主要运用在用一些特殊字符或数字代表繁琐的字符串

MVC4 AspNet MVC下的Ajax / 使用JQuery做相关的Ajax请求

源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命名为:Mvc4JQueryAjaxDemo 2:新建控制器:在Controllers文件夹上 右键-->添加-->控制器,命名为:HomeController (HomeController .cs) 3:在控制器HomeController中新增Action: GetDate() 1 using

Django表单form ajax应用(上)

一.项目说明 学习django版本1.8.2,把之前零散学习的知识整合下,主要涉及到: 项目开始,ajax数据调用,注册,数据录入,数据修改,数据删除,数据建模等完成一个完整的前后台功能简单的web.数据库默认用sqlite 1.创建djano项目:     $cd  /data1/DjangoProject/     $django-admin startproject School     $cd School     $python manage.py startapp student  

MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传

上一篇中,使用客户端jJSAjaxFileUploader插件实现单文件异步上传,本篇实现多文件异步上传. 本篇源码在github,先看效果: ● 上传文件显示进度条. ● 停止上传按钮和关闭缩略图按钮. ● 限制上传文件的类型. ● 限制上传文件的尺寸. ●同时上传多个文件成功后显示缩略图.文件名: ● 点击界面上的删除按钮,界面删除,同步删除文件夹中文件. ● 再点击上传文件,界面追加一行新的缩略图.文件名.删除按钮: □ HomeController 把上传的文件名改成以GUID命名的格式

ASP.NET MVC学习之Ajax(完结)

一.前言 通过上面的一番学习,大家一定收获不少.但是总归会有一个结束的时候,但是这个结束也意味着新的开始. 如果你是从事ASP.NET开发,并且也使用了第三方控件,那么一定会觉得ASP.NET开发ajax十分的简单,而ASP.NET MVC学习到现在页面都是刷新的,所以这节就是ASP.NET MVC的最后一节,通过这节的学习我们将能够实现通过ajax提交表单,下面我们开始继续学习. 二.准备工作 1.首先确保引用了以下js库在_Layout中: 2.新建一个HomeController,然后在其

ASP.NET MVC之Unobtrusive Ajax(五)

前言 这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive Ajax来进行表单请求则Unobtrusive Ajax代码量显得更加精简,所以基于这点本文来讲讲这个Unobtrusive Ajax. 话题 我们首先一步一步深入来讲述我们本节的话题,我们在Models文件夹下建立如下一个类: public class Blog { public long Id