10.MVC框架开发（Ajax应用）

1.MVC自带的Ajax应用，

使用步骤：

第一步，引入js框架

<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<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代码。

@using (Ajax.BeginForm("Comment", new AjaxOptions
{
HttpMethod = "Post",
UpdateTargetId = "updateComment",
InsertionMode = InsertionMode.Replace,
OnSuccess = "if($('#parView').length>0){alert('发表评论成功');}",
OnFailure = "alert('发表评论失败');"
}))
{
<div class="comm_answer">
<div id="div2">
<div class="total_comm">
<div class="comm_title">
<h2>
商品评论<span class="look_comm"></span></h2>
<input type="hidden" value="@ViewBag.bookid" name="hiddenBookid" />
</div>
<div class="comm_list">
<!-- 编写框（写评论）-->
<textarea id="pinglun" name="content" style="width: 99%; height: 100px;"></textarea>
<br />
<input type="submit" id="btnComment" value="提交评论" onclick="sendpinglun();" />
</div>
</div>
</div>
</div>
}

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

Action里的代码如下：

[HttpPost]
public ActionResult OneComment()
{
//更新的时候需要获得图书id，评论内容，用户id
int bookid = Convert.ToInt32(Request.Form["hiddenBookid"]);
string comment = Request.Form["content"];
if (Session["User"] == null)
{
return JavaScript("alert('您还没有登陆');window.location.href='/User/Login';");
}
else
{
//获得用户登陆信息
MvcBookShop.Models.User users = Session["User"] as MvcBookShop.Models.User;

Random ranDom = new Random();
int num = ranDom.Next(1, 10000);
ReaderComment reader = new ReaderComment
{
BookId = bookid,
ReaderName = users.LoginId + num,
Title = "好书",
Comment = comment,
Date = DateTime.Now
};

bookshop.ReaderComments.Add(reader);
bookshop.SaveChanges();
return PartialView("ShowComment", reader);//一个分部视图就有一个对应的模型，第二个参数reader是分部视图所对应的模型
}
}

View里代码：

@using (Ajax.BeginForm("OneComment", new AjaxOptions
{
HttpMethod = "Post",
UpdateTargetId = "updateComment",
InsertionMode = InsertionMode.InsertAfter,
OnSuccess = "if($('#parView').length>0){alert('发表评论成功');}",
OnFailure = "alert('发表评论失败')"
}))
{
<div class="comm_answer">
<div id="div2">
<div class="total_comm">
<div class="comm_title">
<h2>
商品评论<span class="look_comm"></span></h2>
<input type="hidden" value="@ViewBag.bookid" name="hiddenBookid" />
</div>
<div class="comm_list">
<!-- 编写框（写评论）-->
<textarea id="pinglun" name="content" style="width: 99%; height: 100px;"></textarea>
<br />
<input type="submit" id="btnComment" value="提交评论" onclick="sendpinglun();" />
</div>
</div>
</div>
</div>
}

视图界面代码
分部视图的代码：

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

有错请留步指导