讲讲怎么在
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中使用用户控件就是这么简单。
本文出自
“微软技术” 博客，请务必保留此出处http://leelei.blog.51cto.com/856755/412702