第7章 ASP.NET(MVC使用Ajax)

MVC中使用Ajax

A、 MVC中的Ajax

B、设置Ajax选项

C、生成Ajax链接

1、使用内置，封装的mvc ajax系统，使用比较小，建议使用jQuery+ajax实现相同功能

D、 Ajax回调

1、 OnBegin：开始

2、 OnSuccess：成功

3、 OnFailure：失败

4、 OnComplete：完成

E、 MVC中使用json（重点）

1、在控制器添加json支持

2、在浏览器端处理json

3、在action方法里探测ajax请求

4、接受json数据

结合第六章内容本章内运用Ajax实现产品数据加载

一、到“Controllers/HomeController.cs”类，把”获取数据方法和设置数据注释掉，然后把“记录条数改成全局”，

再编写“Ajax方法”

1、如图所示（获取数据方法与设置数据注释）

2、如图所示（记录条数改成全局）

3、如图所示（Ajax方法）

代码示例：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

using LinqBLL;
using LinqService;
using MvcProduct.Models;
namespace MvcProduct.Controllers
{
    public class HomeController : Controller
    {
        ProductBll bll = new ProductBll();
        int pageSize = 4;  //设置记录条数
        public ActionResult Index()
        {
            ViewBag.Message = "欢迎使用 ASP.NET MVC!";
            return View();
        }
        ////获取产品
        //public ActionResult List() 
        //{
        //    List<Product> ps = bll.GetProduct();
        //    return View(ps);
        //}
        public ActionResult List(string cate,int page=1)
        {
            ProductBll ps = new ProductBll();
           
            //获取总记录数
            int recordCount = bll.GetRecordCount(cate);
            //获取数据
            //List<Product> lst = bll.GetProductByCateName(cate,
            //    (page - 1) * pageSize, pageSize);

            ProducrsListViewModel ViewModel = new ProducrsListViewModel
            {
               // Producrs = lst, //设置数据
                PagingInfo = new PagingInfo   //设置分页参数
                {
                    CurrentIndex=page,
                    PageSize=pageSize,
                    RecordCount=recordCount
                },
                CurrentCategory=cate    //设置分类
            };
            return View(ViewModel);
        }

        //通过json返回体育产品信息信息
        public JsonResult ProductList(string cate, int page = 1)
        {
            List<Product> lst = bll.GetProductByCateName(cate,
               (page - 1) * pageSize, pageSize);
            var formattedData = lst.Select(m => new
            {
                ProductID = m.ProductID,
                Image = m.Image,
                Name = m.Name,
                Price = m.Price
            });
            return Json(formattedData, JsonRequestBehavior.AllowGet);
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

View Code

二、完成后，到"Views/Home/List.cshtml"模板注释掉之前获取数据循环加载方法，运用Ajax替换并添加“div”用于显示数据

1、如图所示（注释取数据循环加载方法）

2、如图所示（Ajax方法）

3、如图所示（参数）

代码示例：

@model MvcProduct.Models.ProducrsListViewModel

@{
    ViewBag.Title = "List";
}
<h2>体育产品</h2>
<hr />
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
    $(function () {
        var href = location.href; //获取当前页面的地址      
        $.ajax({
            url: "/Home/ProductList?cate=" + request("cate") + "&page=" + request("page"),
            type: "POST",
            contentType: "application/json;charset=utf-8",
            data: "",
            dataType: "json",
            success: function (data) {
                var str = "";
                $.each(data, function (i, product) {
                    str += "<div id='left'><img src='../../" + product.Image
                        + "'style='135px;height:155px;'/></div>";
                    str += "<div id='item'><h3>" + product.Name + "</h3>";              
                    str += "<h4>" + product.Price + "</h4>";
                    str += "<a href='/Cart/AddToCart?id=" + product.ProductID + "&returnUrl=" + href
                        + "<style='text-decoration:none;' data-id=" + product.ProductID + ">添加购物车</a>";
                    str += "</div><br/>";
                    str += "<hr style='border-style:inset'/>";
                });
                $("#productlist").html(str);
            },
            error: function (req, f, error) {
                alert(error);
            }
        })
    });
    //获取浏览器参数
    function request(paras) {
        var url = location.href;
        var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
        var paraObj = {}
        for (i = 0; j = paraString[i]; i++) {
            paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
        }
        var returnValue = paraObj[paras.toLowerCase()];
        if (typeof (returnValue) == "undefined") {
            return "";
        } else {
            return returnValue;
        }
    }
</script>
    <div id="productlist">

    </div>




  @*  @foreach (var p in Model.Producrs)
    {
       <div class="warp clearfix">
         <div id="left">
           <img alt="@p.Name" src="../../@p.Image" width="135" height="155" border="0" />
          </div> 
             <div class="item">
              <h3>@p.nDescription</h3><br />                   
                  @p.Category                     
              <h4>@string.Format("{0:F}",p.Price)</h4><br />  
                  
                 @using (Html.BeginForm("AddToCart","Cart"))
                 {        
                     @Html.Hidden("Id",p.ProductID)  
                      @Html.Hidden("returnUrl",Request.Url.PathAndQuery)      
                    <input type="submit" value="加入购物车" />
                 }
                </div>
                 </div>
               <hr  style="border-style:inset"/>        
    }*@
<div class="pager">
    @Html.PageLinks(Model.PagingInfo, x => Url.Action("List", new {page=x,cate=Model.CurrentCategory }))
</div>

View Code