讲讲怎么在 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")); }); }); }); })
好了,我们看看在页面怎么引用:
<%Html.RenderPartial("~/Areas/Util/Views/Shared/SelectGroup.ascx"); %>
只要你将这段代码放在页面上即可。Html.RenderPartial有很多重载,你也可以给用户控件传递一个需要绑定的对象。
说到这里谈谈Html.RenderPartial和Html.Partial的区别:
-
Html.RenderPartial是直接输出至当前HttpContext,
<% Html.RenderPartial("~/Areas/Util/Views/Shared/SelectGroup.ascx"); %>
-
Html.Partial是将视图内容直接生成一个字符串并返回。
•<%= 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
转载于:https://blog.51cto.com/hannahqi/1202028