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

Posted 2020-06-13

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>

有错请留步指导