MVC学习系列6--使用Ajax加载分部视图和Json格式…

2018-06-22 06:01:41来源：未知阅读 ()

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(50);
            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(50).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

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：MVC学习系列1--什么是MVC

下一篇：MVC学习系列2--向Action方法传递参数

Asp.net MVC SignalR来做实时Web聊天实例代码 2020-03-29
ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据 2020-03-29
ASP.NET MVC Admin主页快速构建 2020-03-23
Asp.Net MVC4通过id更新表单内容的思路详解 2020-03-19
asp.net定点执行任务的方法 2020-03-18

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签