vs2013+MVC3.0+EasyUI的ComboBox联动使用(一)


vs2013+MVC3.0+EasyUI的ComboBox联动使用(一)
简介：在vs2013(.net4.0)中使用MVC3.0对于EasyUI中ComboBox的联动使用，
加载ComboBox数据，并且实现多级联动效果。
先说下样例所需的几个架构层，如图：







-----------------------------------------------------------------------------------------------------------------------------------------------------
下面主要展现3个实用模块的代码：

Controller：

/// <summary>
/// 获取可用快递公司信息
/// </summary>
/// <returns></returns>
/// <remarks>创建人员(日期):★彭振★(140408 17:51)</remarks>
public ActionResult GetExpressCorp()
{
ISale_outerListService ser = Sale_outerListService.Instance;
//json
string json = string.Empty;
try
{
//获取可用快递公司信息
DataSet ds = ser.GetExpressCorp();
System.Data.DataTable dt = ds.Tables[0];
if (ds != null && ds.Tables.Count > 0)
{
dt = ds.Tables[0];
}
else
{
return Content(json);
}
if (dt != null && dt.Rows.Count > 0)
{
List<dynamic> list = new List<dynamic>();
foreach (System.Data.DataRow dr in dt.Rows)
{
list.Add(new
{
ID = dr["ExpressCorpID"].GetString(),
Name = dr["ExpressCorp"].GetString()
});
}

//2 查出数据 转 json
json = list.ToJsonSerialize();
}
else
{
return Content(json);
}
}
catch (Exception ex)
{
json = string.Empty;
}
//3 输出
return Content(json);
}

/// <summary>
/// 获取可用快递公司模板
/// </summary>
/// <param name="parentId"></param>
/// <returns></returns>
///<remarks>创建人员(日期):★彭振★(140408 18:00)</remarks>
public ActionResult GetPrintTemplate(string parentId)
{
ISale_outerListService ser = Sale_outerListService.Instance;
//json
string json = string.Empty;
try
{
//获取可用快递公司模板
DataSet ds = ser.GetPrintTemplate(parentId);
System.Data.DataTable dt = ds.Tables[0];
if (ds != null && ds.Tables.Count > 0)
{
dt = ds.Tables[0];
}
else
{
return Content(json);
}
if (dt != null && dt.Rows.Count > 0)
{
List<dynamic> list = new List<dynamic>();
foreach (System.Data.DataRow dr in dt.Rows)
{
list.Add(new
{
TemplateId = dr["TemplateId"].GetString(),
TemplateName = dr["TemplateName"].GetString(),
ExpressId = dr["ExpressCorpID"].GetString()
});
}

//2 查出数据 转 json
json = list.ToJsonSerialize();
}
else
{
return Content(json);
}
}
catch (Exception ex)
{
json = string.Empty;
}
//3 输出
return Content(json);
}

-----------------------------------------------------------------------------------------------------------------------------------------------------
Pub：

<table width='100%' border='0' cellpadding='0' cellspacing='1' id='editorScan' class='tbl-editor'>
<tr>
<td class="tbl-label">快递公司</td>
<td class="tbl-value">
<input type="text" id="ExpressCorp" name="ExpressCorp" class="inp-normal" panelheight="100" />
</td>
</tr>
<tr>
<td class="tbl-label">运单模板</td>
<td class="tbl-value">
<input type="text" id="Templates" name="Templates" class="inp-normal" panelheight="100" />
</td>
</tr>
</table>

-----------------------------------------------------------------------------------------------------------------------------------------------------
Biz：

<script language="javascript">
//所有快递公司模板
dataset807 =  @Html.Action("GetPrintTemplate", "Pack", new { parentId = 12 })
combobox807 = {
valueField: 'TemplateId',
textField: 'TemplateName',
data: [],
required: true,
editable: false
};

//所有快递公司
dataset806 = @Html.Action("GetExpressCorp", "Pack")

combobox806 = {
valueField: 'ID',
textField: 'Name',
data: dataset806,
required: true,
editable: false,
fieldRelation: [{ 'ID': "ExpressCorpID" }, { 'Name': "ExpressCorp" }],
onChange: function (newValue, oldValue) {
$('#Templates').combobox('clear');
if (!dataset807) return;
var newDateset=new Array();
for (var i=0 ; i < dataset807.length; i++) {
var item = dataset807[i];
if (item.ExpressId == newValue)
newDateset.push(item);
}
if (!newDateset) return;
$('#Templates').combobox('loadData', newDateset);
}
};

$(function () {
$('#Templates').combobox(combobox807);
$('#ExpressCorp').combobox(combobox806);
});
</script>