《MVC + EasyUI 》——利用Ajax给Action传值

    在ITOO中，有许多界面用到了combobox，其中有一个用法就是在MVC的Controlle在后台获取数据之后，然后将获得的数据绑定在combobox上，也就是给combobox绑定默认值。另外一个利用AJax给后台传递数据，就是穿参，让后台获取之后再做出相应的操作。

    下面就是两个实例，一个是数据从后台向前台传送，一个是前台页面（View）向后台传送数据。

    

     一、给后台向前台传数据——给combobox绑定默认的值

     先说一下具体的业务需求，上面是一个添加课程页面，页面中有三个三个combobox，分别是类型、性质、课程名称，现在需要给这三个combobox绑定默认值，因为他们几乎是固定的。课程类型是专业必修、专业选修、公共必修、公共选修。课程性质分为调查课、实验课等等，他们分别在数据库中的不同表中。我们需要从JS中写好事件，然后调用Controller中的查询方法，最后绑定。下面是JS代码。    

function(){
$('#EditForm').form('clear');  //页面加载时清空内容
$('#CourseType').combobox({
url: '/BasicCourse/EditAddCourseTypeInfo',//跳到后台BasicCourseController中的EditAddCourseTypeInfo（）的方法中。
valueField: 'CourseTypeID',//绑定一条数据CourseTypeID
textField: 'CourseTypeName'//绑定上面这一条数据的CourseTypeName
});
$('#Degree').combobox('reload', 'QueryDegree')//加载下拉框中的数据
}

    后台Controller查询课程性质的代码

public string EditAddCourseTypeInfo()
{
int IsEnabled = 1;
var courseTypeInfo = IBasicCourseTypeService.LoadCourseTypeInfo(IsEnabled);
return GetJson(courseTypeInfo);
}

    这就是给combobox绑定默认值

    二、利用AJax，给后台传送数据

    就拿上面的为题来说吧，性质、类型都能在combobox显示出来了，那么我们怎样将这些数据传送给后台，然后让后台保存起来哪？利用AJax向后传值。

    我们将combobox选好值后，然后开始编写AJax代码。代码如下

function submitForm(){
if (r) {
$.ajax({
type: "POST",
url: "/BasicCourse/EditCourse",   //跳到BasicCourseController里面的EditCourse() 方法中，然后执执行相应的操作。
data: "CourseID=" + $("#CourseID").val()
+ "&CourseCode=" + $("#CourseCode").val()
... ...
... ...
+ "&CourseTypeID=" + $("#CourseType").combobox('getValue')
+ "&CoursePropertyID=" + $("#CourseProperty").combobox('getValue')  //获取value值用getValue 获取text值用getText
+ "&OrganizationID=" + $("#Organization").combobox('getValue')
+ "&CourseNote=" + $("#CourseNote").val(),
success: function (data) {  //这个data就是后台方法传送回来的数据，这里面添加课程成功后返回true
$.messager.show({
title: '提示',
msg: '课程信息修改成功！',
timeout: 5000,
showType: 'slide'
});
$('#win').window('close');
$('#dg').datagrid('reload');

},
error: function (msg) {
$.messager.show({
title: '提示',
msg: '课程信息修改失败，请联系管理员！',
timeout: 5000,
showType: 'slide'
});
}
});
}

     后台Controller获取前台Viwe页面传送过来的数据，后台代码如下。

public void addCourse(BasicCourseViewModel enCourse)
{

try
{
//接收从界面传来的信息
enCourse.CourseID = Guid.NewGuid();
enCourse.CourseCode = Request["CourseCode"];
enCourse.CourseName = Request["CourseName"];
enCourse.CourseTypeID = new Guid(Request.Form["CourseTypName"]);
enCourse.CoursePropertyID = new Guid(Request.Form["CoursePropertyName"]);
enCourse.ArrangeMent = Convert.ToInt32(Request["arrangement"]);
enCourse.Period = Request["period"];
enCourse.Credit = Request["credit"];
enCourse.Rank = Request["rank"];
enCourse.OrganizationID = new Guid(Request.Form["OrganizationName"]);
enCourse.CourseNote = Request["CourseNote"];
enCourse.PublicCourseType = Request["PublicCourseType"];
enCourse.IsEnabled = 1;

bool courseIsAdd = IBasicCourseService.AddBasicCourse(enCourse);//调用服务，执行添加操作

}
catch (Exception ex)
{
Response.Write(ex);
}
}

   三、小结

   上面就是我这几天的收获，突然感觉到，学习东西，不管懂不懂，先用着，然后慢慢的就懂了。另外提升自己代码能力的一个很好的方法就是看别人写的代码，现在感受颇深啊！