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(, );

                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>

有错请留步指导

巴特西

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

最新文章

热门文章