ASP.NET MVC+Colorbox做的一个Demo(一)

这两天忙着准备考试，背书背的一个烦字了得，于是做了一个Demo来解解烦。

这个Demo是关于简历的，并没有什么技术含量，只是一直想拿Colorbox做个例子发上来。还是先来分析一下功能，主要是实现简历的CRUD，其次是利用Colorbox弹出对话框来代替跳转到一个新的页面执行操作。

这个Demo我打算一步一步的完成操作，希望给初学者提供一点点的帮助。

搭建程序的框架

打开VS2010，选择File➤Project➤Asp.net MVC 3 Web Application，设置项目的名称为Resume。如下图所示：

点击“OK”，在弹出的“New ASP.NET MVC 3 Project”对话框中，选择“Internet Application”，其他选择默认，这样就完成了我们这个Demo的框架，非常简单，不许要我们添加任何额外的东西。

使用CodeFirst自动创建数据库

首先，在项目的Models文件夹中，新建一个ResumeModels.cs类文件，删除默认生成的ResumeModels类，新添加三个类Resume、Experience和Nation。Resume类用来表示简历的基本信息，Experience类表示一个人的工作经历，Nation类用来表示民族，Resume和Experience存在一对多的关系。具体看代码吧：

/// 

/// 基本信息
/// 
public class Resume
{
    /// 

    /// 简历编号
    /// 
    public virtual int ResumeId { get; set; }
    /// 

    /// 姓名
    /// 
    [Required(ErrorMessage = "*")]
    [Display(Name = "姓名")]
    public virtual string Name { get; set; }
    /// 

    /// 性别
    /// 
    [Required(ErrorMessage = "*")]
    [Display(Name = "性别")]
    public virtual bool Sex { get; set; }
    /// 

    /// 出生年月
    /// 
    [Required(ErrorMessage = "*")]
    [DataType(DataType.DateTime)]
    [Display(Name = "出生年月")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
    public virtual DateTime Birth { get; set; }
    /// 

    /// 籍贯
    /// 
    [Required(ErrorMessage = "*")]
    [Display(Name = "籍贯")]
    public virtual string Origin { get; set; }
    /// 

    /// 民族
    /// 
    [Required(ErrorMessage = "*")]
    public virtual int NationId { get; set; }
    /// 

    /// 政治面貌
    /// 
    [Required(ErrorMessage = "*")]
    [Display(Name = "政治面貌")]
    public virtual string Status { get; set; }
    /// 

    /// 联系电话
    /// 
    [Required(ErrorMessage = "*")]
    [Display(Name = "联系电话")]
    public virtual string Phone { get; set; }

    /// 

    /// 电子邮件
    /// 
    [Required(ErrorMessage = "*")]
    [DataType(DataType.EmailAddress, ErrorMessage = "格式错误")]
    [Display(Name = "电子邮件")]
    public virtual string Email { get; set; }

    /// 

    /// 专业
    /// 
    [Display(Name = "所学专业")]
    public virtual string Major { get; set; }

    /// 

    /// 毕业学校
    /// 
    [Display(Name = "毕业学校")]
    public virtual string Graduate { get; set; }

    /// 

    /// 工作经历集合
    /// 
    public virtual List<Experience> Experiences { get; set; }

    public virtual Nation Nation { get; set; }
}

/// 

/// 工作经历
/// 
public class Experience
{
    /// 

    /// 工作经历编号
    /// 
    public virtual int ExperienceId { get; set; }

    public int ResumeId { get; set; }

    /// 

    /// 开始时间
    /// 
    [Required(ErrorMessage = "*")]
    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
    public virtual DateTime StartTime { get; set; }
    /// 

    /// 结束时间
    /// 
    [Required(ErrorMessage = "*")]
    [DataType(DataType.DateTime)]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
    public virtual DateTime EndTime { get; set; }
    /// 

    /// 工作单位
    /// 
    public virtual string WorkUnit { get; set; }
    /// 

    /// 证明人
    /// 
    public virtual string Voucher { get; set; }

    public Resume Resume { get; set; }
}

public class Nation
{
    /// 

    /// 民族代码
    /// 
    public int NationId { get; set; }
    /// 

    /// 民族名称
    /// 
    [Required]
    public string Name { get; set; }
}

第二，在Models文件夹中新建一个ResumeDbContext类，让它继承自DbContext，添加如下代码：

public class ResumeDbContext : DbContext
{
    public DbSet<Resume> Resumes { get; set; }
    public DbSet<Experience> Experiences { get; set; }
    public DbSet<Nation> Nations { get; set; }
}

第三，修改Web.config文件，name的值跟上面新建的ResumeDbContext类的名称相同。

    <add name="ResumeDbContext" connectionString="Data Source=.;Initial Catalog=ResumeExercise;User ID=sa;Password=sasa;Integrated Security=True"
         providerName="System.Data.SqlClient"/>

第四，新建一个ResumeController，先添加如下代码即可。

private ResumeDbContext context = new ResumeDbContext();

//
// GET: /Resume/

public ActionResult Index()
{
    var resumes = context.Resumes.Include(r => r.Nation);
    return View(resumes);
}

第五，在上面代码的Index Action上右击，新建一个View，在弹出的对话框中那个按下图设置。

第六，在修改Shared文件中的_Layout.cshtml，添加如下代码：

            <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")li>
                    
                    <li>@Html.ActionLink("简历", "Index", "Resume")li>
                    <li>@Html.ActionLink("About", "About", "Home")li>
                ul>
            div>

第七，在项目上“右击”，选择“Use IIS Express”。

第八，在Global.asax中修改默认路由为Resume，运行程序，OK，数据库就生成了，现在首页运行的效果如下：

实现CRUD

既然使用Colorbox弹出对话框，就需要准备一下Colorbox。

Colorbox的官方网址是：http://jacklmoore.com/colorbox/，进去之后就可以直接下载。

第一，下载完后，解压缩，我们使用example4文件夹里的主题。在项目的Content文件夹里新建一个colorbox文件夹，将example4文件夹里的images文件夹和colorbox.css文件夹拷贝到刚刚新建的colorbox文件夹里，同时还需要引入colorbox的js文件。完成后，项目结构如下图所示：

第二，修改Shared文件夹里的_Layout.cshtml文件，在head部分添加如下所示的代码：

<head>
    <title>@ViewBag.Titletitle>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript">script>
    
    @RenderSection("Head", false)
head>

第三，修改Resume文件夹里的Index.cshtml，添加如下所示代码：

@model IEnumerableResume>
@{
    ViewBag.Title = "Index";
}

@section Head{
    <link href="@Url.Content("~/Content/colorbox/colorbox.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript">script>
    <script src="@Url.Content("~/Content/colorbox/jquery.colorbox.js")" type="text/javascript">script>
}

解释一下，colorbox.css是colorbox的样式表文件，jquery.ui.all.css是jquery.ui的样式表文件，其他两个js文件不用多说，jquery.ui在我们的demo中在添加日期会用到。

第四，实现添加功能。在ResumeController中，添加如下两个Action：

//
// GET: /Resume/Create
public ActionResult Create()
{
    ViewBag.NationId = new SelectList(context.Nations, "NationId", "Name");
    return View();
}

//
// POST: /Resume/Create
[HttpPost]
public ActionResult Create(Resume.Models.Resume resume)
{
    if (ModelState.IsValid)
    {
        context.Resumes.Add(resume);
        context.SaveChanges();
        return RedirectToAction("Index");
    }
    ViewBag.NationId = new SelectList(context.Nations, "NationId", "Name", resume.NationId);
    return View(resume);
}

用上面提到的方法创建Create的View，具体设置如下图：

Create.cshtml中的代码我就不贴出来了，如果感兴趣的可以下载源码查看，源码会在后面贴出下载地址。

接下来，再修改Index.cshtml中的内容。在@section Head{}块内添加如下代码：

    <script type="text/javascript">
        $(function () {
            $("a[rel='addResume']").click(function () {
                $(this).colorbox({
                    width: 1000,
                    heigth: 500,
                    href: "/Resume/Create",
                    overlayClose: false,
                    close: "",
                    onComplete: function () {
                        $("#Birth").datepicker({
                            changeMonth: true,
                            changeYear: true,
                            dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
                            monthNamesShort: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                            dateFormat: 'yy-mm-dd',
                            yearRange: 'c-50:c+50',
                            showMonthAfterYear: true
                        });
                        $("#btnCancel").click(function () {
                            $.colorbox.close();
                        });
                    }
                });
            });
    script>

在运行之前还有一件事要做，在Nation表里添加数据，不要忘了哦。

我添加数据的方法是新建了一个ResumeDbInitializer类，添加如下代码：

public class ResumeDbInitializer : DropCreateDatabaseAlways<ResumeDbContext>
{
    protected override void Seed(ResumeDbContext context)
    {
        string[] nations = { "汉族", "壮族", "满族", "回族", "苗族", "维吾尔族", "土家族", "彝族", "蒙古族", "藏族", "布依族", "侗族", "瑶族", "朝鲜族", "白族", "哈尼族", "哈萨克族", "黎族", "傣族    ", "畲族    ", "傈僳族", "仡佬族", "东乡族", "高山族", "拉祜族", "水族", "佤族", "纳西族", "羌族", "土族", "仫佬族    ", "锡伯族", "柯尔克孜族", "达斡尔族", "景颇族", "毛南族", "撒拉族", "布朗族", "塔吉克族", "阿昌族", "普米族", "鄂温克族", "怒族", "京族", "基诺族", "德昂族", "保安族", "俄罗斯族    ", "裕固族", "乌兹别克族", "门巴族", "鄂伦春族", "独龙族", "塔塔尔族", "赫哲族", "珞巴族" };
        foreach (var item in nations)
        {
            context.Nations.Add(new Nation
            {
                Name = item
            });
        }


        base.Seed(context);
    }
}

然后再在Global.asax里面注册。

Database.SetInitializer(new ResumeDbInitializer());

这段代码只使用一次，Nation的数据之后就注释掉就行了。

第五，运行程序，查看结果。