用ajax做级联操作,学习笔记之MVC级联及Ajax操作

由于刚转型到MVC，MVC的架构模式很多不是很清楚，比如今天就想做个级联的操作，因为之前的ASP.NET的方式是通过：控件-->添加事件-->后台编写级联事件进行触发，但是这个MVC就不同了。于是乎，开始网上搜寻相关的资料，大部分都是给了一部分，但是不给出详细的说明，练习的话都是半成品；所以为了大家的方便，我把级联的开发过程贴出来，当然大神级的就自动略过了。

第一、数据库数据准备(Mysql)

第二、准备Models实体；(对应数据库中的数据)

public class my_selection

{

[Key]

public int ID { get; set; }

[StringLength()]

public string Months { get; set; }

[StringLength()]

public string Money { get; set; }

[StringLength()]

public string Remark { get; set; }

}

第三、准备Controllers，这边名字是PayController;这边主要贴出来两个必备的方法;

//

// GET: /Pay/

private UBMRegContext db = new UBMRegContext();

public ActionResult Payment(string select_month)

{

//定义一个泛型;

var selectionlist = new List();

var money_values = new List();

//从数据库中查询mx;

var mx = from d in db.selectioon orderby d.Months select d.Months;

//将从实体查询的数据添加到泛型之内

selectionlist.AddRange(mx.Distinct());

money_values.Insert(, new SelectListItem() { Text = "--请选择--", Value = "-1" });

//生成列表(将加入的泛型添加到页面便于显示)

ViewBag.select_month = new SelectList(selectionlist);

ViewData["Money_value"] = money_values;

return View();

}

//实现级联

[HttpGet]

public ActionResult ShowSecondDropDownList(string FirstLevel)

{

var moneys = db.selectioon.Where(x => x.Months == FirstLevel);

ViewBag.Money_value = moneys;

return PartialView("Moneyvalue");

}

第四、最为重要的是View的显示页面：当然是刚才创建的Home文件夹下的Views里面；(我第一个卡点就是JS，之前JS实在是不熟练哈哈。检查了之后测试出来是HTML表头的问题，无敌尴尬。)

这里面有引用到Ajax，笔者之前对于Ajax完全陌生可以说是0基础。研究了将近2小时才研习透彻。这里面有段代码是data: { FirstLevel: FirstLevel }这个参数测试了N多变后台的方法获取的方法值就是null，差点要砸电脑。刚开始第一反应是直接用一个确定的值调试结果还是null,后来又开始怀疑是JS加载有问题，于是调啊调啊，结果还是null(接近奔溃);最后终于参考了别人的方法和官方的说明之后(以后首要地位就是参考官方的文献)，{}里面第一个值代表是后台参数的string X是这个X, ":"后面则是触发的传参值，阿西吧。最后经过N多次调试之后终于调通了，感谢祖国。

$(document).ready(init);

function init() {

$("select[name='selectioon']").change(function () {

var FirstLevel = $(this).val();

//获取当前的选择的内容传递给方法ShowCityWithSelectedProvince

if (FirstLevel != "请选择续费时间")

ShowSecondDropDownList(FirstLevel);

else

alert("Please choose the renewal time before next move!!");

});

}

function ShowSecondDropDownList(FirstLevel) {

$.ajax({

url: "@Url.Action("ShowSecondViews", "Pay")",

type: "get",

dataType: "JSON",

data: { FirstLevel: FirstLevel },

success: function (moneys) {

var ddl = $("#secondlist");

//删除节点

RemoveOption();

if (moneys != "") {

//第一个value是用于后台使用的值，第二个是用于显示的值

ddl.append("$" + moneys + "");

}

else {

ddl.append("--Auto--");

}

}

});

}

function RemoveOption() {

$("#secondlist option").remove();

}

第五、使用到的Razor语法。级联。

@Html.DropDownList("selectioon", (IEnumerable)ViewData["select_month"], new { style = "width:300px; height:30px" })

@Html.DropDownList("Money_value", (IEnumerable)ViewData["Money_value"], new { style = "width:300px; height:30px;" })

至此，花了整整4个小时才彻底理解通了，反正每天都进一步一点就不算浪费今天的时间，加油吧。

jsp学习笔记：mvc开发模式

jsp学习笔记:mvc开发模式2017-10-12 22:17:33 model(javabe)与view层交互 view(视图层,html.jsp) controller(控制层,处理用户提交的信息 ...

java 学习笔记之 流、文件的操作

ava 学习笔记之 流.文件的操作 对于一些基础的知识,这里不再过多的解释, 简单的文件查询过滤操作 package com.wfu.ch08; import java.io.File; import ...

MongoDB学习笔记(2)：数据库操作及CURD初步

MongoDB学习笔记(2):数据库操作及CURD 数据库操作 创建数据库 首先MongoDB中数据库的创建和数据库的切换都是使用命令,USE DATABASE,如果要切换的数据库不存在则会进行创建, ...

Android学习笔记(十六)——数据库操作(上)

//此系列博文是的学习笔记,如有错漏,欢迎指正! Android 为了让我们能够更加方便地管理数据库,专门提供了一个 SQLiteOpenHelper帮助类, ...

node学习笔记(二)(ajax方式向node后台提交数据)

通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式

ASP.NET学习笔记(5)——原生Ajax基本操作

说明(2017-11-4 15:32:49): 1. 回北京后又快一个月了,上次在家写的下回预告,到底是没把加水印写完,而且这次也不想写.. 2. 上次许的愿,十月份看完asp.net,已经泡汤了,翻 ...

[Python学习笔记][第七章Python文件操作]

2016/1/30学习内容 第七章 Python文件操作 文本文件 文本文件存储的是常规字符串,通常每行以换行符'\n'结尾. 二进制文件 二进制文件把对象内容以字节串(bytes)进行存储,无法用笔 ...

【JAVAEE学习笔记】hibernate03：多表操作详解、级联、关系维护和练习:添加联系人

一.一对多|多对一 1.关系表达 表中的表达 实体中的表达 orm元数据中表达 一对多