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

前端之家收集整理的这篇文章主要介绍了《MVC + EasyUI 》——利用Ajax给Action传值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

下面就是两个实例,一个是数据从后台前台传送,一个是前台页面(View)向后台传送数据。


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

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

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


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

  1. public string EditAddCourseTypeInfo()
  2. {
  3. int IsEnabled = 1;
  4. var courseTypeInfo = IBasicCourseTypeService.LoadCourseTypeInfo(IsEnabled);
  5. return GetJson(courseTypeInfo);
  6. }
这就是给comboBox绑定默认值

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

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

我们将comboBox选好值后,然后开始编写AJax代码代码如下

  1. function submitForm(){
  2. if (r) {
  3. $.ajax({
  4. type: "POST",url: "/BasicCourse/EditCourse",//跳到BasicCourseController里面的EditCourse() 方法中,然后执执行相应的操作。
  5. data: "CourseID=" + $("#CourseID").val()
  6. + "&CourseCode=" + $("#CourseCode").val()
  7. ... ...
  8. ... ...
  9. + "&CourseTypeID=" + $("#CourseType").comboBox('getValue')
  10. + "&CoursePropertyID=" + $("#CourseProperty").comboBox('getValue') //获取value值用getValue 获取text值用getText
  11. + "&OrganizationID=" + $("#Organization").comboBox('getValue')
  12. + "&CourseNote=" + $("#CourseNote").val(),success: function (data) { //这个data就是后台方法传送回来的数据,这里面添加课程成功后返回true
  13. $.messager.show({
  14. title: '提示',msg: '课程信息修改成功!',timeout: 5000,showType: 'slide'
  15. });
  16. $('#win').window('close');
  17. $('#dg').datagrid('reload');
  18. },error: function (msg) {
  19. $.messager.show({
  20. title: '提示',msg: '课程信息修改失败,请联系管理员!',showType: 'slide'
  21. });
  22. }
  23. });
  24. }

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


  1. public void addCourse(BasicCourseviewmodel enCourse)
  2. {
  3. try
  4. {
  5. //接收从界面传来的信息
  6. enCourse.CourseID = Guid.NewGuid();
  7. enCourse.CourseCode = Request["CourseCode"];
  8. enCourse.CourseName = Request["CourseName"];
  9. enCourse.CourseTypeID = new Guid(Request.Form["CourseTypName"]);
  10. enCourse.CoursePropertyID = new Guid(Request.Form["CoursePropertyName"]);
  11. enCourse.ArrangeMent = Convert.ToInt32(Request["arrangement"]);
  12. enCourse.Period = Request["period"];
  13. enCourse.Credit = Request["credit"];
  14. enCourse.Rank = Request["rank"];
  15. enCourse.OrganizationID = new Guid(Request.Form["OrganizationName"]);
  16. enCourse.CourseNote = Request["CourseNote"];
  17. enCourse.PublicCourseType = Request["PublicCourseType"];
  18. enCourse.IsEnabled = 1;
  19. bool courseIsAdd = IBasicCourseService.AddBasicCourse(enCourse);//调用服务,执行添加操作
  20. }
  21. catch (Exception ex)
  22. {
  23. Response.Write(ex);
  24. }
  25. }

三、小结

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

猜你在找的Ajax相关文章