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中使用用戶控件就是這麼簡單。