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. angular开发者吐槽react+redux的复杂：“一个demo证明你的开发效率低下”
			
    曾经看到一篇文章,写的是jquery开发者吐槽angular的复杂.作为一个angular开发者,我来吐槽一下react+redux的复杂. 例子 为了让大家看得舒服,我用最简单的一个demo来展示r ...
    
			
    2. 
						
  2. linux有关信号的FAQ
			
    1.为什么会出现系统调用被中断的情况? 进程在执行一个低速系统调用而阻塞期间捕捉到一个信号时,该系统调用就被中断不再继续执行.该系统调用返回出错,其errno被设置为EINTR.这样处理的理由是:因为 ...
    
			
    3. 
						
  3. 条形码的应用三-----------从Excel文件中读取条形码
			
    条形码的应用三------从Excel文件中读取条形码 介绍 上一篇文章,我向大家展示了生成多个条形码并存储到Excel文件中的一个方法.后来我又有了个想法:既然条码插入到excel中了,我可不可以从 ...
    
			
    4. 
						
  4. php插入式排序的两种写法。
			
    百度了下插入式排序,百度百科中php版本的插入式排序如下: function insert_sort($arr) { // 将$arr升序排列 $count = count($arr); for ($ ...
    
			
    5. 
						
  5. 我有几个NUMA节点
			
    在SQL Server交流会,经常被问到的一个问题,SQL Server在几个NUMA节点上运行.因此,在今天的文章里,我想向你展示下几个方法和技术,找出你的SQL Server有几个NUMA节点.  ...
    
			
    6. 
						
  6. Composer根据Name显示与隐藏
			
    //主要设置 模型的显示与隐藏 private void TransmissionByData_AxSendSelectionChange(string domName, bool isVisible ...
    
			
    7. 
						
  7. case break结构与return的有关要点
			
    //确认事件 private void cmd_ok_Click(object sender, EventArgs e) { //客户名称是否为空 if (txt_banhao.Text.TrimEn ...
    
			
    8. 
						
  8. a标签有小手状和无小手状css属性
			
    有小手状: <a href="##" title="2" style="cursor:pointer"> 无小手状: <a ...
    
			
    9. 
						
  9. luogg_java学习_05_面向对象(方法和类)
			
    这篇总结断断续续写了2天,内容来自Oracle java8编程入门官方教程和课外搜索总结,希望自己以后返回来看的时候都懂,也希望可以起到帮助初学者的作用. 转载请注明 出自 luogg的博客园 , 因 ...
    
			
    10. 
						
  10. TensorFlow知识总结
			
    学习资料: 英文官方网站 Tensorflow 将要写的博客目录: 1.使用Spring AOP对异常进行统一处理 2.动态代理模式理解  aop中的动态代理模式 3.工厂模式三种的理解.logger ...
    
			
    11.