ASP.NET MVC5使用AjaxHelp

默认情况下,Visual Studio 2013新建ASP.NET MVC5项目,不包含jquery.unobtrusive-ajax.js,需要手工添加。

点击Visual Studio 2013中的“工具”菜单,选择“库程序包管理器”,再选择“管理解决方案的NuGet程序包“,在出现的对话框中联机搜索jquery.unobtrusive-ajax.js,然后安装即可。

看上图中的信息,对应版本是3.2.0,需要jQuery1.8以上版本支持。MVC5中默认包含的jQuery1.10.2,可以满足条件。

接下来,我们就可以使用AjaxHelper了。

View代码:

@model MVCLearning.Models.SetPasswordModel

@{
    ViewBag.Title = "修改密码";
}
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<script type="text/javascript">
    function Show(msg) {
        alert(msg);
    }
</script>

@using (Ajax.BeginForm("Edit", new AjaxOptions(){OnSuccess="Show"}))
{
    @Html.AntiForgeryToken()
    <br />
    <div class="form-horizontal">
        @Html.ValidationSummary(true)
        <div class="form-group">
            @Html.LabelFor(model => model.Password, new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.PasswordFor(model => model.Password)
                @Html.ValidationMessageFor(model => model.Password)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

别忘了在View中引用脚本:

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

Controller代码:

 [HttpPost]
        public ActionResult Edit(SetPasswordModel model)
        {
            try
            {
                string userName=User.Identity.Name;
                var user= db.User.Where(x => x.UserName == userName).FirstOrDefault();
                if(model.Password!=user.Password)
                {
                    ModelState.AddModelError("","原始密码错误!");
                    return View(model);
                }
                else
                {
                    user.Password = model.NewPassword;//更新密码
                    db.SaveChanges();
                    return Content("密码修改成功!");
                }
                //return RedirectToAction("Index","ContactGroup");
            }
            catch
            {
                return View(model);
            }
        }

也可以在Controller中直接返回JavaScript,代码如下:

View代码修改如下:

@using (Ajax.BeginForm("Edit",new AjaxOptions()))

Controller代码修改如下:

return JavaScript("alert(‘密码修改成功!‘);");

时间: 2024-10-07 07:55:00

ASP.NET MVC5使用AjaxHelp的相关文章

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解

学习ASP .NET MVC5官方教程总结(七)Edit方法和Edit视图详解 在本章中,我们研究生成的Edit方法和视图.但在研究之前,我们先将 release date 弄得好看一点.打开Models\Movie.cs 文件.先添加一个引用: <span style="font-size:14px;">using System.ComponentModel.DataAnnotations;</span> 然后在Movie类中添加以下代码: [Display(

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据

学习ASP .NET MVC5官方教程总结(六)通过控制器访问模型的数据 在本章中,我们将新建一个MoviesController 控制器,并编写获取电影数据的代码,使用视图模板将数据展示在浏览器中. 在进行下一步之前,你需要先编译应用程序,否则在添加控制器的时候会出错. 在解决方法资源管理器的Controllers文件夹右键,选择"添加">"新建搭建基架项": 在"添加支架"对话框,选择 包含视图的MVC 5控制器(使用 En),然后单击

ASP.NET MVC5(二):控制器、视图与模型

前言 本篇博文主要介绍ASP.NET MVC中的三个核心元素:控制器.视图与模型,以下思维导图描述了本文的主要内容. 控制器 控制器简介 在介绍控制器之前,简单的介绍一下MVC工作原理:URL告知路由机制该使用哪个控制器(Controller),调用该控制器中的哪个方法(Action),并为该方法提供需要的参数.控制器响应用户的输入,在响应时修改模型(Model),并决定使用哪个视图(View),并对该视图进行渲染.注意:MVC模式提供的是方法调用结果,而不是动态生成的页面. 以上内容对于初学者

ASP.NET MVC5(一):ASP.NET MVC概览

ASP.NET MVC概览 ASP.NET MVC是一种构建Web应用程序的框架,它将一般的MVC(Model-View-Controller)模式应用于ASP.NET框架. ASP.NET MVC模式简介 MVC将Web应用程序划分为三个主要的部分,以下是MSDN给出的定义: 模型(Model):模型对象是实现应用程序数据域逻辑的应用程序部件. 通常,模型对象会检索模型状态并将其存储在数据库中. 例如,Product 对象可能会从数据库中检索信息,操作该信息,然后将更新的信息写回到 SQL S

ASP.NET MVC5(三):表单和HTML辅助方法

表单的使用 Action和Method特性 Action特性用以告知浏览器信息发往何处,因此,Action特性后面需要包含一个Url地址.这里的Url地址可以是相对的,也可以是绝对的.如下Form标签向Bing的search页面发送一个搜索词(输入元素的名称为q). <form action="http://www.bing.com/search"> <input name="q" type="text" /> <i

学习ASP .NET MVC5官方教程总结(八)搜索查询

学习ASP .NET MVC5官方教程总结(八)搜索查询 在本节中,我们为 Index 方法添加查询功能,使我们能够根据电影的题材或名称进行查找. 首先,我们需要更新 MoviesController 的 Index 方法,代码如下: public ActionResult Index(string searchString) { var movies = from m in db.Movies select m; if (!String.IsNullOrEmpty(searchString))

ASP.NET MVC5 PagedList分页

ASP.NET MVC是目前ASP.NET开发当中轻量级的Web开发解决方案,在ASP.NET MVC概述这篇译文当中,已经详细的介绍了ASP.NET MVC与Web Forms的区别以及各自的适用场景.由于ASP.NET MVC尤其适合网站的开发(Web Forms更适合业务系统的开发),目前成为很多网站开发者的首先框架. 这里举个典型的例子(表格的分页),以此熟悉一下ASP.NET MVC的开发.开发环境:Windows 8.1企业版+VS2013旗舰版+SQL Server 2014. 首

[Asp.net MVC]Asp.net MVC5系列——在模型中添加验证规则

目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net MVC]Asp.net MVC5系列——添加模型 [Asp.net MVC]Asp.net MVC5系列——从控制器访问模型中的数据 [Asp.net MVC]Asp.net MVC5系列——添加数据 概述 上篇文章中介绍了添加数据,在提交表单的数据的时候,我们需

Asp.net MVC]Asp.net MVC5系列——在模型中添加

目录 概述 在模型中添加验证规则 自定义验证规则 伙伴类的使用 总结 系列文章 [Asp.net MVC]Asp.net MVC5系列--第一个项目 [Asp.net MVC]Asp.net MVC5系列--添加视图 [Asp.net MVC]Asp.net MVC5系列--添加模型 [Asp.net MVC]Asp.net MVC5系列--从控制器访问模型中的数据 [Asp.net MVC]Asp.net MVC5系列--添加数据 概述 上篇文章中介绍了添加数据,在提交表单的数据的时候,我们需