ASP.NET MVC 中使用用户控件

周末加班，闲来无事，写篇博客，讲讲怎么在 ASP.NET MVC2中使用用户控件。首先我们新建一个用户控件，

我们命名为SelectGroup.ascx，代码如下

 
 


  
  
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 

  
  
<script language="javascript" type="text/javascript" src="<%=Url.Content("~/Areas/Util/Scripts/SelectGroup.js") %>"></script> 

  
  
<div> 

  
  
    <table> 

  
  
        <tr> 

  
  
            <td style="text-align:right"> 

  
  
                招生批次  

  
  
            </td> 

  
  
            <td> 

  
  
                <select id="admissionBatch" style="width: 150px"> 

  
  
                </select> 

  
  
            </td> 

  
  
            <td style="text-align:right; width:80px"> 

  
  
                学历层次  

  
  
            </td> 

  
  
            <td> 

  
  
                <select id="edcuationLevel" style="width: 150px"> 

  
  
                </select> 

  
  
            </td> 

  
  
            <td style="text-align:right; width:80px"> 

  
  
                专业名称  

  
  
            </td> 

  
  
            <td> 

  
  
                <select id="professional" style="width: 150px"> 

  
  
                </select> 

  
  
            </td> 

  
  
        </tr> 

  
  
    </table> 

  
  
</div> 
 
 

我们再编写其对应的控制器如下

 
 


  
  
using System;  

  
  
using System.Collections.Generic;  

  
  
using System.Linq;  

  
  
using System.Web;  

  
  
using System.Web.Mvc;  

  
  
 

  
  
namespace EducationManage.Areas.Util.Controllers  

  
  
{  

  
  
    using Utility.Json;  

  
  
    using EducationManage.Areas.Util.Models;  

  
  
    public class SelectGroupController : Controller  

  
  
    {  

  
  
        //  

  
  
        // GET: /Util/SelectGroup/  

  
  
        SelectgroupEntities selectgroupEntities = new SelectgroupEntities();  

  
  
 

  
  
        /// <summary>  

  
  
        /// 招生批次  

  
  
        /// 李磊 2010-10-29  

  
  
        /// </summary>  

  
  
        /// <returns></returns>  

  
  
        public JsonResult GetAdmissionBatch()  

  
  
        {  

  
  
            List<SG_Admission_Batchs> admissionBatchsList = selectgroupEntities.admission_batchs.ToList();  

  
  
            return Json(admissionBatchsList, JsonRequestBehavior.AllowGet);  

  
  
        }  

  
  
 

  
  
        /// <summary>  

  
  
        /// 学历层次  

  
  
        /// 李磊 2010-10-29  

  
  
        /// </summary>  

  
  
        /// <returns></returns>  

  
  
        public JsonResult GetEducationLevel()  

  
  
        {  

  
  
            List<SG_Education_Levels> educationLevelList = selectgroupEntities.education_levels.ToList();  

  
  
            return Json(educationLevelList, JsonRequestBehavior.AllowGet);  

  
  
        }  

  
  
 

  
  
        /// <summary>  

  
  
        /// 专业  

  
  
        /// 李磊 2010-10-29  

  
  
        /// </summary>  

  
  
        /// <returns></returns>  

  
  
        public JsonResult GetProfessional()  

  
  
        {  

  
  
            List<SG_Professional> professionalList = selectgroupEntities.professional.ToList();  

  
  
            return Json(professionalList, JsonRequestBehavior.AllowGet);  

  
  
        }  

  
  
 

  
  
        /// <summary>  

  
  
        /// 学籍批次  

  
  
        /// 李磊 2010-10-29  

  
  
        /// </summary>  

  
  
        /// <returns></returns>  

  
  
        public JsonResult GetRollBatch()  

  
  
        {  

  
  
            List<SG_Roll_Batchs> rollBatchList = selectgroupEntities.roll_batchs.ToList();  

  
  
            return Json(rollBatchList, JsonRequestBehavior.AllowGet);  

  
  
        }  

  
  
 

  
  
        /// <summary>  

  
  
        /// 专业学历层次联动  

  
  
        /// 李磊 2010-10-29  

  
  
        /// </summary>  

  
  
        /// <param name="id"></param>  

  
  
        /// <returns></returns>  

  
  
        public JsonResult GetProfessionalByEducationLevel(string id)  

  
  
        {  

  
  
            try 

  
  
            {  

  
  
                List<string> professionalIdList = selectgroupEntities.professional_educationlevel.Where(pe => pe.education_id == id).Select(pe => pe.prefessional_code).ToList();  

  
  
                List<SG_Professional> professionalList = selectgroupEntities.professional.Where(p => professionalIdList.Contains(p.prefessional_code)).ToList();  

  
  
                return Json(professionalList, JsonRequestBehavior.AllowGet);  

  
  
            }  

  
  
            catch 

  
  
            {  

  
  
                return null;  

  
  
            }  

  
  
        }  

  
  
    }  

  
  
}  
 
 

好的，我们接着编写js.

 首先在js的顶层引入 ///<reference path = "../../../Scripts/jQuery-1.4.1.js"/>这样编写js代码就有智能提示，如下

 
 


  
  
$(document).ready(function () {  

  
  
      

  
  
    $.ajaxSetup({  

  
  
        cache: false 

  
  
    });  

  
  
    $.getJSON("/SelectGroup/GetAdmissionBatch/", function (data) {  

  
  
        $("#admissionBatch").append("<option value=''>请选择</option>");  

  
  
        $.each(data, function (i, item) {  

  
  
            $("<option></option>")  

  
  
            .val(item["admission_batch_id"])  

  
  
            .text(item["name"])  

  
  
            .appendTo($("#admissionBatch"));  

  
  
        });  

  
  
 

  
  
    });  

  
  
 

  
  
    $.getJSON("/SelectGroup/GetEducationLevel/", function (data) {  

  
  
        $("#edcuationLevel").append("<option value=''>请选择</option>");  

  
  
        $.each(data, function (i, item) {  

  
  
            $("<option></option>")  

  
  
            .val(item["education_id"])  

  
  
            .text(item["name"])  

  
  
            .appendTo($("#edcuationLevel"));  

  
  
        });  

  
  
 

  
  
    });  

  
  
 

  
  
    $.getJSON("/SelectGroup/GetProfessional/", function (data) {  

  
  
        $("#professional").append("<option value=''>请选择</option>");  

  
  
        $.each(data, function (i, item) {  

  
  
            $("<option></option>")  

  
  
            .val(item["prefessional_code"])  

  
  
            .text(item["name"])  

  
  
            .appendTo($("#professional"));  

  
  
        });  

  
  
 

  
  
    });  

  
  
 

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

  
  
        $("#professional").empty();  

  
  
        $("#professional").append("<option value='0'>请选择</option>");  

  
  
        $.getJSON("/SelectGroup/GetProfessionalByEducationLevel/" + $("#edcuationLevel").val(), function (data) {  

  
  
            $.each(data, function (i, item) {  

  
  
                $("<option></option>")  

  
  
            .val(item["prefessional_code"])  

  
  
            .text(item["name"])  

  
  
            .appendTo($("#professional"));  

  
  
            });  

  
  
 

  
  
        });  

  
  
    });  

  
  
 

  
  
}) 
 
 

ok，好了，我们看看在页面怎么引用

 
 


  
  
<%Html.RenderPartial("~/Areas/Util/Views/Shared/SelectGroup.ascx"); %> 
 
 

只要你将这段代码放在页面上即可。Html.RenderPartial有很多重载，你也可以给用户控件传递一个需要绑定的对象。说到这里谈谈Html.RenderPartial和Html.Partial的区别。Html.RenderPartial是直接输出至当前HttpContext，而Html.Partial是将视图内容直接生成一个字符串并返回。所以在引用的时候不一样分别为<% Html.RenderPartial("~/Areas/Util/Views/Shared/SelectGroup.ascx"); %>和<%= Html.Partial("~/Areas/Util/Views/Shared/SelectGroup.ascx"); %>。说到这两个不免要说Html.RenderAction，它是通过Controller中的Action来调用用户控件。上面的代码大家可以根据js和控制器代码看到，每个下拉列表的绑定都有自己的控制器返回数据，在页面加载完成的时候去调用自己的控制器获取下拉列表数据。如果我们用Html.RenderAction就没有那么麻烦了，看看控制器代码

 
 


  
  
using System;  

  
  
using System.Collections.Generic;  

  
  
using System.Linq;  

  
  
using System.Web;  

  
  
using System.Web.Mvc;  

  
  
 

  
  
namespace EducationManage.Areas.Util.Controllers  

  
  
{  

  
  
    using Utility.Json;  

  
  
    using EducationManage.Areas.Util.Models;  

  
  
    public class SectionGroupController : Controller  

  
  
    {  

  
  
        //  

  
  
        // GET: /Util/SectionGroup/  

  
  
        SelectgroupEntities selectgroupEntities = new SelectgroupEntities();  

  
  
        public ActionResult Index()  

  
  
        {  

  
  
            List<SG_Admission_Batchs> admissionBatchList = selectgroupEntities.admission_batchs.ToList();  

  
  
            SelectList admissionBatch = new SelectList(admissionBatchList, "admission_batch_id", "name", "");  

  
  
            ViewData.Add("admissionBatch", admissionBatch);  

  
  
 

  
  
            List<SG_Education_Levels> educationLevelList = selectgroupEntities.education_levels.ToList();  

  
  
            SelectList educationLevel = new SelectList(educationLevelList, "education_id", "name", "");  

  
  
            ViewData.Add("educationLevel", educationLevel);  

  
  
 

  
  
            List<SG_Professional> professionalList = selectgroupEntities.professional.ToList();  

  
  
            SelectList professional = new SelectList(professionalList, "prefessional_code", "name", "");  

  
  
            ViewData.Add("professional", professional);  

  
  
            return PartialView("~/Areas/Util/Views/Shared/SectionGroup.ascx");  

  
  
        }  

  
  
 

  
  
    }  

  
  
}  
 
 

再看看前台

 
 


  
  
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %> 

  
  
<script language="javascript" type="text/javascript" src="<%=Url.Content("~/Areas/Util/Scripts/SelectGroup.js") %>" /> 

  
  
<div> 

  
  
    <table> 

  
  
        <tr> 

  
  
            <td style="text-align: right"> 

  
  
                招生批次 

  
  
            </td> 

  
  
            <td> 

  
  
                <%:Html.DropDownList("admissionBatch", ViewData["admissionBatch"] as SelectList, "请选择", new { id = "admissionBatch", style = "width: 150px" })%> 

  
  
            </td> 

  
  
            <td style="text-align: right; width: 80px"> 

  
  
                学历层次 

  
  
            </td> 

  
  
            <td> 

  
  
                <%:Html.DropDownList("edcuationLevel", ViewData["educationLevel"] as SelectList, "请选择", new { id = "edcuationLevel", style = "width: 150px" })%> 

  
  
            </td> 

  
  
            <td style="text-align: right; width: 80px"> 

  
  
                专业名称 

  
  
            </td> 

  
  
            <td> 

  
  
                <%:Html.DropDownList("professional", ViewData["professional"] as SelectList, "请选择", new { id = "professional", style = "width: 150px" })%> 

  
  
            </td> 

  
  
        </tr> 

  
  
    </table> 

  
  
</div> 
 
 

在这里我们一次性就获取到了所有下拉列表要绑定的数据。我们只需要在前台这样应用即可<%Html.RenderAction("Index", "SectionGroup");%>。好了，在MVC2中使用用户控件就是这么简单。

本文转自 BruceAndLee 51CTO博客，原文链接：http://blog.51cto.com/leelei/412702，如需转载请自行联系原作者