1.MVC自带的Ajax应用,

使用步骤:

第一步,引入js框架

  1. <script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
  2. <script src="../../Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>

第二步,调用MVC里的Ajax方法

分情况

a.如果表单里有内容需要提交的,采用Ajax.BeginForm

b.如果只是一个超链接,用Ajax.ActionLink,比如我们要用Url传参的形式做一本图书删除的操作,Url地址如下:/Book/Delete/3,3是参数,采用的是这种url传参。

具体的写法,主要就是AjaxOptions它里面的属性值。

1) HttpMethod = "Post":表示的是ajax的请求方式,

2) UpdateTargetId=”界面中的div的id”:表示更新的内容放置的区域,

3) InsertionMode= InsertionMode.Replace:表示界面元素的更新方式,Replace表示全部替换,

4) OnSuccess:表示执行成功之后,所执行的JavaScript脚本,

5) Confirm:表示确定是否执行的文本,

6) OnFailure,表示ajax失败,所执行的JavaScript代码。

  1. @using (Ajax.BeginForm("Comment", new AjaxOptions
  2. {
  3. HttpMethod = "Post",
  4. UpdateTargetId = "updateComment",
  5. InsertionMode = InsertionMode.Replace,
  6. OnSuccess = "if($('#parView').length>0){alert('发表评论成功');}",
  7. OnFailure = "alert('发表评论失败');"
  8. }))
  9. {
  10. <div class="comm_answer">
  11. <div id="div2">
  12. <div class="total_comm">
  13. <div class="comm_title">
  14. <h2>
  15. 商品评论<span class="look_comm"></span></h2>
  16. <input type="hidden" value="@ViewBag.bookid" name="hiddenBookid" />
  17. </div>
  18. <div class="comm_list">
  19. <!-- 编写框(写评论)-->
  20. <textarea id="pinglun" name="content" style="width: 99%; height: 100px;"></textarea>
  21. <br />
  22. <input type="submit" id="btnComment" value="提交评论" onclick="sendpinglun();" />
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. }

第三步,Action里面的视图返回,一般情况下我们都采用分部视图,分部视图的返回方法PartialView()方法,一般我们把分部视图创建到Shared文件夹里,比如我们创建的是OneComment.cshtml视图文件

Action里的代码如下:

  1. [HttpPost]
  2. public ActionResult OneComment()
  3. {
  4. //更新的时候需要获得图书id,评论内容,用户id
  5. int bookid = Convert.ToInt32(Request.Form["hiddenBookid"]);
  6. string comment = Request.Form["content"];
  7. if (Session["User"] == null)
  8. {
  9. return JavaScript("alert('您还没有登陆');window.location.href='/User/Login';");
  10. }
  11. else
  12. {
  13. //获得用户登陆信息
  14. MvcBookShop.Models.User users = Session["User"] as MvcBookShop.Models.User;
  15.  
  16. Random ranDom = new Random();
  17. int num = ranDom.Next(, );
  18. ReaderComment reader = new ReaderComment
  19. {
  20. BookId = bookid,
  21. ReaderName = users.LoginId + num,
  22. Title = "好书",
  23. Comment = comment,
  24. Date = DateTime.Now
  25. };
  26.  
  27. bookshop.ReaderComments.Add(reader);
  28. bookshop.SaveChanges();
  29. return PartialView("ShowComment", reader);//一个分部视图就有一个对应的模型,第二个参数reader是分部视图所对应的模型
  30. }
  31. }

View里代码:

  1. @using (Ajax.BeginForm("OneComment", new AjaxOptions
  2. {
  3. HttpMethod = "Post",
  4. UpdateTargetId = "updateComment",
  5. InsertionMode = InsertionMode.InsertAfter,
  6. OnSuccess = "if($('#parView').length>0){alert('发表评论成功');}",
  7. OnFailure = "alert('发表评论失败')"
  8. }))
  9. {
  10. <div class="comm_answer">
  11. <div id="div2">
  12. <div class="total_comm">
  13. <div class="comm_title">
  14. <h2>
  15. 商品评论<span class="look_comm"></span></h2>
  16. <input type="hidden" value="@ViewBag.bookid" name="hiddenBookid" />
  17. </div>
  18. <div class="comm_list">
  19. <!-- 编写框(写评论)-->
  20. <textarea id="pinglun" name="content" style="width: 99%; height: 100px;"></textarea>
  21. <br />
  22. <input type="submit" id="btnComment" value="提交评论" onclick="sendpinglun();" />
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. }

视图界面代码

分部视图的代码:

  1. @model MvcBookShop.Models.ReaderComment
  2. <div id="parView">
  3. <div class="comm_list">
  4. <h3>
  5. <img src="@Url.Content("~/Content/images/label_1.gif")" title="精彩评论" /><a href="#" target="_blank"
  6. name="reviewDetail">@Model.ReaderName</a> <span>发表于:@Model.Date</span>
  7. </h3>
  8. @Model.Comment
  9. </div>
  10. </div>

有错请留步指导

10.MVC框架开发(Ajax应用)的更多相关文章

  1. ASP.NET MVC框架开发系列课程 (webcast视频下载)

    课程讲师: 赵劼 MSDN特邀讲师 赵劼(网名“老赵”.英文名“Jeffrey Zhao”,技术博客为http://jeffreyzhao.cnblogs.com),微软最有价值专家(ASP.NET ...

  2. 2.MVC框架开发(视图开发----基础语法)

    1.区别普通的html,在普通的html中不能将控制器里面的数据展示在html中. 在MVC框架中,它提供了一种视图模板(就是结合普通的html标签并能将控制器里传出来的数据进行显示) 视图模板特性: ...

  3. 5.MVC框架开发(强类型开发,控制器向界面传递数据的几种方法)

    界面表单中的表单元素名字和数据库表的字段名相一一映射(需要哪个表的数据就是那个表的模型(Model)) 在View页面中可以指定页面从属于哪个模型 注:以上的关系可以通过MVC的强类型视图开发来解决我 ...

  4. 1.MVC框架开发(初识MVC)

    1.约定大于配置 Content:存放静态文件(样式表.静态图片等) Controllers:存放控制器类 Models:存放数据模型文件 Scripts:存放脚本文件 Views:存放视图文件,里面 ...

  5. web框架开发-Ajax

    Ajax简介 向服务器发送请求的4种方式 1.浏览器地址栏,默认get请求2.form表单: get请求 post请求3.a标签,默认get请求 4.Ajax 特点: 1 异步请求 2 局部刷新 方式 ...

  6. 了解MVC框架开发

    版权声明:本文为博主原创文章,未经博主允许不得转载. 前言:本篇文章我们浅谈下MVC各个部分,模型(model)-视图(view)-控制器(controller), 以及路由. 对于使用MVC的好处大 ...

  7. 8.MVC框架开发(URL路由配置和URL路由传参空值处理)

    1.ASP.NET和MVC的路由请求处理 1)ASP.NET的处理 请求---------响应请求(HttpModule)--------处理请求(HttpHandler)--------把请求的资源 ...

  8. 7.MVC框架开发(创建层级项目)

    在一个项目比较大的时候,就会有多个层级项目 1)在项目中选定项目右建新建区域(新的层级项目),项目->右键->添加->区域,构成了一套独立的MVC的目录,这个目录包括Views,Co ...

  9. 4.MVC框架开发(母版页的应用、按钮导致的Action处理、从界面向控制器传数据和HtmlHelper控件的实现(注册的实现))

    1.在视图里如何引入母版页 1)在视图里母版页都是放在View目录下面的Shared文件夹下面 2)母版页里的RenderBody()类似于ASP.NET里面的ContentPalceHolder占位 ...

随机推荐

  1. Mechanism of Loading Resources

    Mechanism of Loading Resources 1. Distributed strategy 1.1. Developer guilde 1.2. Notes 2. Centraliz ...

  2. unix 网路编程(卷一)第一个程序编译过程

    unix卷一去年暑假买的到现在才开始看无比惭愧,而且惭愧第一个程序就断断续续弄了几天,要好好写程序了,马上要找工作了,下面介绍下把本书第一个程序跑起来的过程: 搜各种博客 我用系统的是ubuntu 1 ...

  3. Win7无线网络共享设置方法

    http://jingyan.baidu.com/article/4f34706e89bb2ae387b56d0b.html

  4. 【转】使用BBB的device tree和cape(重新整理版)

    只要你想用BBB做哪怕一丁点涉及到硬件的东西,你就不可避免地要用到cape和device tree的知识.所以尽管它们看起来很陌生而且有点复杂,但还是得学.其实用起来不难的.下面我只讲使用时必须会的内 ...

  5. Android_gridVIew

    xml文件: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:t ...

  6. CentOS7 service/chkconfig replace commands

    对比表,以 apache / httpd 为例 任务 旧指令 新指令 使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.serv ...

  7. ios定制中间突出的tabBar

    我觉得有两个思路,一个是自己写tabBar  通过自定义实现,缺点呢就是比较麻烦,优点就是代码比较清楚,而且比较稳定. 另一个思路就是写个大按钮加在tabBar上 通过监听tabitem的点击来实现相 ...

  8. Linux学习之路:认识shell和bash

    一.shell  计算机硬件的直接控制者是操作系统的内核(kernel),因为内核的重要性,所以作为用户的我们是无法直接操作内核的,所以我们需要shell调用应用程序或者双击打开安装的应用软件与内核之 ...

  9. [转]JSON序列化与反序列化

    本文转自:http://www.cnblogs.com/ejiyuan/archive/2010/04/09/1708084.html 方法一:引入System.Web.Script.Serializ ...

  10. centos 7 下modelsim10.2c安装教程

    step1: chmod +x ./install.linux(但是没有任何反应,原因是install.linux是32位程序,系统是64位的,所以要安装相应的库){ yum install glib ...