Ajax的应用在平时的工作中，很是常见，这篇文章，完全是为了，巩固复习。

我们先看看不使用json格式返回分部视图：

先说需求吧：

我有两个实体，一个是出版商【Publisher】，一个是书【Book】（很显然这是一对多的关系，一个出版商可以出版很多书籍，一本书只有一个出版商。），这里，我要实现的是，在出版商页面，使用DropDownList加载出来有哪些出版商，然后选择出版商的时候，异步加载分部视图，加载这个出版商出版的书籍的数据。

打算使用EF来做，也当是一个复习吧：

1.首先新建一个空白的MVC web项目：，在Model文件夹下面新建两个实体：

BOOK实体：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace AjaxDataInMVC.Models

{

    public class Book

    {

        public int BookID { get; set; }

        public string Title { get; set; }

        public string Auther { get; set; }

        public string Price { get; set; }

        public string Year { get; set; }

        public int PublisherID { get; set; }

        public virtual Publisher Publisher { get; set; }

    }

}

Book

Punlisher实体：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace AjaxDataInMVC.Models

{

    public class Publisher

    {

        /// <summary>

        /// 出版编号

        /// </summary>

        public int PublisherID { get; set; }

        /// <summary>

        /// 出版商名称

        /// </summary>

        public string PublisherName { get; set; }

        /// <summary>

        /// 出版日期

        /// </summary>

        public string PublisherYear { get; set; }

        public virtual ICollection<Book> Books { get; set; }

    }

}

Publisher

2.接着，添加EF引用，然后在根目录下，新建一个Map文件夹，在里面新建两个实体：

using AjaxDataInMVC.Models;

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations.Schema;

using System.Data.Entity.ModelConfiguration;

using System.Linq;

using System.Web;

namespace AjaxDataInMVC.Map

{

    public class BookMap:EntityTypeConfiguration<Book>

    {

        public BookMap()

        {

            //设置主键

            this.HasKey(x => x.BookID);

            this.Property(x => x.BookID).HasDatabaseGeneratedOption(DatabaseGeneratedOption.Identity);

            this.Property(x => x.Price).IsRequired();

            this.Property(x => x.Auther).IsRequired().HasMaxLength();

            this.Property(x => x.Title);

            this.Property(x => x.Year);

            this.HasRequired(x => x.Publisher).WithMany(x => x.Books).HasForeignKey(x => x.PublisherID).WillCascadeOnDelete(true);

            this.ToTable("Books");

        }

    }

}

BookMap

using AjaxDataInMVC.Models;

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations.Schema;

using System.Data.Entity.ModelConfiguration;

using System.Linq;

using System.Web;

namespace AjaxDataInMVC.Map

{

    public class PublisherMap:EntityTypeConfiguration<Publisher>

    {

        public PublisherMap()

        {

            //主键

            this.HasKey(x => x.PublisherID);

            this.Property(x => x.PublisherID).HasDatabaseGeneratedOption(DatabaseGeneratedOption.Identity);

            this.Property(x => x.PublisherName).HasMaxLength().IsRequired();

            this.Property(x => x.PublisherYear).IsRequired();

            this.ToTable("Publishers");

        }

    }

}

PublisherMap

3.现在就是新建数据上下文类了，在Map文件夹下：

using System;

using System.Collections.Generic;

using System.Data.Entity;

using System.Data.Entity.ModelConfiguration;

using System.Linq;

using System.Reflection;

using System.Web;

namespace AjaxDataInMVC.Map

{

    public class MyDbContext:DbContext

    {

        public MyDbContext() :

            base("name=DbConnectionString") { }

        protected override void OnModelCreating(DbModelBuilder modelBuilder)

        {

            var typesToRegister = Assembly.GetExecutingAssembly().GetTypes()

         .Where(type => !String.IsNullOrEmpty(type.Namespace))

         .Where(type => type.BaseType != null && type.BaseType.IsGenericType

              && type.BaseType.GetGenericTypeDefinition() == typeof(EntityTypeConfiguration<>));

            foreach (var type in typesToRegister)

            {

                dynamic configurationInstance = Activator.CreateInstance(type);

                modelBuilder.Configurations.Add(configurationInstance);

            }

           // base.OnModelCreating(modelBuilder);

        }

    }

}

MyDbContext

别忘了，配置文件中加上：

<connectionStrings>

    <add name="DbConnectionString" connectionString="server=.;database=MyBookDB;uid=sa;pwd=Password_1" providerName="System.Data.SqlClient"/>

  </connectionStrings>

5.这里特别提到，创建下拉框，我们可以新建一个ViewModel性质的实体

using System;

using System.Collections.Generic;

using System.ComponentModel.DataAnnotations;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace AjaxDataInMVC.ViewModel

{

    public class PublisherViewModel

    {

        public PublisherViewModel()

        {

            PublisherList = new List<SelectListItem>();

        }

        [Display(Name="PublishName")]

        public int PublisherID { get; set; }

        public IEnumerable<SelectListItem> PublisherList { get; set; }

    }

}

4.创建对应的控制器：

using AjaxDataInMVC.Map;

using AjaxDataInMVC.Models;

using AjaxDataInMVC.ViewModel;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace AjaxDataInMVC.Controllers

{

    public class PublisherController : Controller

    {

        private MyDbContext context;

        public PublisherController()

        {

            context = new MyDbContext();
　　　　　　　　//检测到循环引用可以加上这句

            context.Configuration.ProxyCreationEnabled = false;

        }

        // GET: Publisher

        public ActionResult Index()

        {

            List<Publisher> lstPublisher = context.Set<Publisher>().ToList();

            PublisherViewModel model = new PublisherViewModel();

            model.PublisherList = lstPublisher.Select(x => new SelectListItem()

            {

                Text = x.PublisherName,

                Value = x.PublisherID.ToString()

            });

            return View(model);

        }

    }

}
using AjaxDataInMVC.Map;

using AjaxDataInMVC.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace AjaxDataInMVC.Controllers

{

    public class BookController : Controller

    {

        private MyDbContext context;

        public BookController()

        {

            context = new MyDbContext();

            context.Configuration.ProxyCreationEnabled = false;

        }

        // GET: Book

        public ActionResult Index()

        {

            return View();

        }

        //直接返回布局页的方式：HTML

        public PartialViewResult GetBookDetailsByID(int id)

        {

            List<Book> lstBook = context.Set<Book>().Where(x => x.PublisherID.Equals(id)).ToList();

            return PartialView(lstBook);

        }

        //Json方式

        //public JsonResult GetBookDetailsByID(int id)

        //{

        //    List<Book> lstBook = context.Set<Book>().Where(x => x.PublisherID.Equals(id)).ToList();

        //    return Json(lstBook,JsonRequestBehavior.AllowGet);

        //}

    }

}

Publisher控制器的Index视图：

@model AjaxDataInMVC.ViewModel.PublisherViewModel

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <title>Index</title>

</head>

<body>

    @*思路是:在当前页面，点击下拉框，加载分部视图*@

    <div>

        @Html.LabelFor(s=>s.PublisherID)

        @Html.DropDownListFor(s=>s.PublisherID,Model.PublisherList)

    </div>

    <div id="myDIV">

    </div>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#PublisherID").change(function () {

                var id=$("#PublisherID").val();

                $.ajax({

                    url: "/Book/GetBookDetailsByID/" + id,

                    type: "get",

                    dataType: "html",

                    success: function (result) {

                        //html文本方式

                        $("#myDIV").html("");

                        $("#myDIV").html(result);

                        //二。Json方式

                        //$("#myDIV").html("");

                        //var myHTML = "<ul>";

                        //$.each(result, function (key, item) {

                        //    myHTML += "<li>编号：" + item.BookID + "</li>";

                        //    myHTML += "<li>标题：" + item.Title + "</li>";

                        //    myHTML += "<li>作者：" + item.Auther + "</li>";

                        //    myHTML += "<li>价格：" + item.Price + "</li>";

                        //    myHTML += "<li>时间：" + item.Year + "</li>";

                        //})

                        //myHTML +="</ul>"

                        //$("#myDIV").html(myHTML);

                    },

                    error:function(result){

                        alert(result.responseText);

                    }

                });

            });

        });

    </script>

</body>

</html>

Book控制器的分部视图GetBookDetailsByID：

@model IEnumerable<AjaxDataInMVC.Models.Book>

<table style="border:1px solid thin">

    <thead>

        <tr>

            <th>BookID</th>

            <th>Title</th>

            <th>Auther</th>

            <th>Price</th>

            <th>Year</th>

        </tr>

    </thead>

    <tbody>

        @foreach (var item in Model)

        {

            <tr>

                <td>@item.BookID</td>

                <td>@item.Title</td>

                <td>@item.Auther</td>

                <td>@item.Price</td>

                <td>@item.Year</td>

            </tr>

        }

    </tbody>

</table>

在数据库中写上测试数据，然后先运行一下：

选择：新华大学出版社，的时候，随即加载出了对应的数据。

选择：长江日报出版社的时候，加载：

现在看看：使用Json方式加载吧：

修改一下Book控制器，和其相关的Publisher控制器的Index视图就可以：

using AjaxDataInMVC.Map;

using AjaxDataInMVC.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

namespace AjaxDataInMVC.Controllers

{

    public class BookController : Controller

    {

        private MyDbContext context;

        public BookController()

        {

            context = new MyDbContext();

            context.Configuration.ProxyCreationEnabled = false;

        }

        // GET: Book

        public ActionResult Index()

        {

            return View();

        }

        ////直接返回布局页的方式：HTML

        //public PartialViewResult GetBookDetailsByID(int id)

        //{

        //    List<Book> lstBook = context.Set<Book>().Where(x => x.PublisherID.Equals(id)).ToList();

        //    return PartialView(lstBook);

        //}

        //Json方式

        public JsonResult GetBookDetailsByID(int id)

        {

            List<Book> lstBook = context.Set<Book>().Where(x => x.PublisherID.Equals(id)).ToList();

            return Json(lstBook,JsonRequestBehavior.AllowGet);

        }

    }

}
@model AjaxDataInMVC.ViewModel.PublisherViewModel

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <script src="~/Scripts/jquery-1.10.2.js"></script>

    <title>Index</title>

</head>

<body>

    @*思路是:在当前页面，点击下拉框，加载分部视图*@

    <div>

        @Html.LabelFor(s=>s.PublisherID)

        @Html.DropDownListFor(s=>s.PublisherID,Model.PublisherList)

    </div>

    <div id="myDIV">

    </div>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#PublisherID").change(function () {

                var id=$("#PublisherID").val();

                $.ajax({

                    url: "/Book/GetBookDetailsByID/" + id,

                    type: "get",

                    dataType: "json",

                    success: function (result) {

                        //1.html文本方式

                        //$("#myDIV").html("");

                        //$("#myDIV").html(result);

                        //二。Json方式

                        $("#myDIV").html("");

                        var myHTML = "<ul>";

                        $.each(result, function (key, item) {

                            myHTML += "<li>编号：" + item.BookID + "</li>";

                            myHTML += "<li>标题：" + item.Title + "</li>";

                            myHTML += "<li>作者：" + item.Auther + "</li>";

                            myHTML += "<li>价格：" + item.Price + "</li>";

                            myHTML += "<li>时间：" + item.Year + "</li>";

                        })

                        myHTML +="</ul>"

                        $("#myDIV").html(myHTML);

                    },

                    error:function(result){

                        alert(result.responseText);

                    }

                });

            });

        });

    </script>

</body>

</html>

接着运行：

总结：这篇文章，完全为了复习巩固，另外在序列化Book实体，json 数据的时候，你可能会遇到这个错误：检测到循环依赖，因为我没有给Book实体新建一个ViewModel，这里可以这样解决：

 context.Configuration.ProxyCreationEnabled = false;
禁用代理。
另外，使用Json格式返回数据，很快，比直接用HTML文本加载视图快很多。
Content Type Header Body Total (Byte)
text/html 434 375 809
application/ json 398 197 595 
 




 
												


											
MVC学习系列6--使用Ajax加载分部视图和Json格式的数据的更多相关文章
	

    
								
  1. MVC学习七：Razor布局之加载分部视图【PartialView】
		
    Partial View 顾名思义就是Html代码片段,应用于此HTML代码多次被页面加载时使用.(类似于WebForm程序中的用户控件) 注:PartialView和正常的View页面在访问时没有任 ...
    
		
    2. 
						
  2. MVC5中，加载分部视图，常见的方式
		
    首先,新建一个MVC类型的Web项目: 然后在Model文件夹下定义一个Student实体: public class Student { public int ID { get; set; } pu ...
    
		
    3. 
						
  3. 【Spring源码深度解析学习系列】Bean的加载（六）
		
    Bean的加载所涉及到的大致步骤: 1)转换对应beanName 为什么需要转换beanName呢?因为传入的参数可能是别名,也可能是FactoryBean,所以需要一系列的解析,这些解析内容包括如下 ...
    
		
    4. 
						
  4. 基于layer封装的异步加载分部视图弹出层
		
    背景:之前一直用的artdialog,但是样式不是很好看,后来偶然看到layer,觉得不错,但是对于.net mvc来说,不能像artdialog一样弹出分部视图是很难受的.所以下面的方法就解决了.  ...
    
		
    5. 
						
  5. MVC学习系列4--@helper辅助方法和用户自定义HTML方法
		
    在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件.HTML帮助类是在视图中,用来呈现HTML内容的.HTML帮助类是一个方法,它返回的是string类型的值. HTML帮助类, ...
    
		
    6. 
						
  6. 使用jquery加载部分视图02-使用$.ajax()
		
    本篇体验使用$.ajax()加载部分视图.与加载部分视图相关的包括: RenderPartial和RenderAction区别   使用jquery加载部分视图01-使用$.get()       □ ...
    
		
    7. 
						
  7. MVC Ajax Helper或jQuery异步方式加载部分视图
		
    Model: namespace MvcApplication1.Models { public class Team { public string Preletter { get; set; }  ...
    
		
    8. 
						
  8. ASP.NET MVC学习系列(二)-WebAPI请求(转)
		
    转自:http://www.cnblogs.com/babycool/p/3922738.html 继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前台页面发起的g ...
    
		
    9. 
						
  9. MVC学习系列——ModelBinder扩展
		
    在MVC系统中,我们接受数据,运用的是ModelBinder 的技术. MVC学习系列——ActionResult扩展在这个系列中,我们自定义了XmlResult的返回结果. 那么是不是意味着能POS ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Hawk: 无编程抓取淘女郎的所有高清照片
			
    1.这是什么鬼? 哦?美女? 最近看了这一篇文章:http://cuiqingcai.com/1001.html 大概说的是用Python和Pyspider(这货好像是我的一位师兄写的,吓尿),抓取淘 ...
    
			
    2. 
						
  2. ASP.NET MVC 混搭 ASP.NET WebForms 所导致的 Html.ActionLink/BeginForm 问题
			
    首先,需要了解下这篇博文:<ASP.NET WebForms MapPageRoute 路由配置> 之前,在 ASP.NET MVC 中混搭 ASP.NET WebForms,使用 Map ...
    
			
    3. 
						
  3. DDD 领域驱动设计－在动手之前，先把你的脑袋清理干净
			
    惨不忍睹的翻译 英文原文:http://www.codeproject.com/Articles/339725/Domain-Driven-Design-Clear-Your-Concepts-Bef ...
    
			
    4. 
						
  4. 小菜学习编程-Winform系列（初学者）
			
    前言 记得上次写<小菜的程序员道路(二)>,这篇文章的时候说过,要把工作以来整理的编程知识分享给大家,因为这半年来的工作实在是忙,现在也在忙着公司产品上线,但是答应的一定要实现,大家看我上 ...
    
			
    5. 
						
  5. 自己使用的一个.NET轻量开发结构
			
    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIgAAABFCAIAAAAerjlvAAAE2UlEQVR4nO2a3U/bVhiH+bdyPaqpmx
    
			
    6. 
						
  6. ZOJ Problem Set - 1251 Box of Bricks
			
    这道题简单的翻译成纯数学语言就是给你n个数字,每次运算只能是加1或者减1,问经过最短几步可以使得n个数字相等 由于题目限定了n个数字一定有平均数,所以求出avg,将所有比其大的数字或者比其小的数字的差 ...
    
			
    7. 
						
  7. 总结Oracle删除表空间遇到的问题
			
    问题1:删除表空间期间遭遇报错 ORA-29857 问题2:删除表空间期间遭遇 ORA-02429 问题3:表空间删除完毕,主机磁盘空间不释放 问题1:删除表空间期间遭遇报错 ORA-29857 删除 ...
    
			
    8. 
						
  8. 《HelloGitHub月刊》第07期
			
    最近工作上的事比较多,<HelloGitHub>月刊第07期拖到月底才发. 本期月刊对logo和月刊的排版进行了优化,不知道大家的反馈如何,还望大家多多反馈,让<HelloGitHu ...
    
			
    9. 
						
  9. MySQL4.0命令操作学习笔记
			
    声明:下列内容并非原创,仅仅是最近学习笔记整理. -------------------------------------- 进入mysql安装路径bin目录下: 1.开启服务 winmysqlad ...
    
			
    10. 
						
  10. 在 Ubuntu 上安装 Android Studio
			
    在 Ubuntu 上安装 Android Studio http://www.linuxidc.com/Linux/2013-05/84812.htm 打开terminal,输入以下命令 sudo a ...
    
			
    11.