作者:小白家的世界 | 来源:互联网 | 2023-09-25 12:17
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.ReaderNamea> <span>发表于:@Model.Datespan>
h3>
@Model.Comment
div>
div>
有错请留步指导