MVC项目中使用js 设置Checkbox的选中事件
2016-03-29 10:57
603 查看
要实现的效果是,当点击checkbox时,跳转到Action中
CheckBox实例:
View界面:
@Html.CheckBox("prd.IsChecked", Model.IsChecked,new { data_url = Url.Action("Save", "Home"),ProductID= Model.ProductID })
注释:new { data_url = Url.Action("Save", "Home"),ProductID= Model.ProductID },要传输的数据
页面生成:
<input name="prd.IsChecked" id="prd_IsChecked" type="checkbox" value="true" data-url="/Home/Save" productid="77">
<input name="prd.IsChecked" type="hidden" value="false">
注释:MVC中Checkbox控件在页面显示为两条数据
JS:
<script src="~/Scripts/jquery-1.4.1.js"></script>
//引用JS文件
<script type="text/javascript">
$(function () {
$(":checkbox").change(function () {
$.ajax({
url: $(this).attr('data-url'),
type: 'POST',
data: { IsChecked: $(this).attr('checked'), ProductID: $(this).attr('ProductID') }
});
});
});
</script>
//$(this).attr('checked'),点击复选框后的当前状态,勾选后界面HTML中会显示checked=‘checked’,获取当前复选框状态(true,false)
//$(this).attr() :this当前对象,attr()当前对象中的元素
Controller:
[HttpPost]
Public ActionResult Save(bool IsChecked,int ProductID)
{
//选中,取消事件
}
//(bool IsChecked,int ProductID):参数名称要与Ajax中的参数名称相对应
CheckBox实例:
View界面:
@Html.CheckBox("prd.IsChecked", Model.IsChecked,new { data_url = Url.Action("Save", "Home"),ProductID= Model.ProductID })
注释:new { data_url = Url.Action("Save", "Home"),ProductID= Model.ProductID },要传输的数据
页面生成:
<input name="prd.IsChecked" id="prd_IsChecked" type="checkbox" value="true" data-url="/Home/Save" productid="77">
<input name="prd.IsChecked" type="hidden" value="false">
注释:MVC中Checkbox控件在页面显示为两条数据
JS:
<script src="~/Scripts/jquery-1.4.1.js"></script>
//引用JS文件
<script type="text/javascript">
$(function () {
$(":checkbox").change(function () {
$.ajax({
url: $(this).attr('data-url'),
type: 'POST',
data: { IsChecked: $(this).attr('checked'), ProductID: $(this).attr('ProductID') }
});
});
});
</script>
//$(this).attr('checked'),点击复选框后的当前状态,勾选后界面HTML中会显示checked=‘checked’,获取当前复选框状态(true,false)
//$(this).attr() :this当前对象,attr()当前对象中的元素
Controller:
[HttpPost]
Public ActionResult Save(bool IsChecked,int ProductID)
{
//选中,取消事件
}
//(bool IsChecked,int ProductID):参数名称要与Ajax中的参数名称相对应
相关文章推荐
- Package.json中dependencies依赖包中^符号和~符号前缀的区别
- C#将XML与JSON数据的互相转换
- 原生JS写的一个瀑布流布局-------------提示:需放到服务器下才能运行(XAMPP服务器等)
- JSP的八个内置对象
- js 字符串转换数字
- JSONArray 合并相同的数据
- JSP内置对象
- js中创建form表单
- JS闭包回调的理解
- DWZ框架分页控件中遇到的问题
- jsp显示doc,xls,jpg
- 写复杂的json方法
- HTML5 audio标签使用js进行播放控制实例
- JavaScript中将金钱格式化
- 学习aiax(javascript)--页面无刷新更新ajax更新时间
- 学习aiax(javascript)--页面无刷新用ajax检查用户名是否已注册(POST方式)
- 学习aiax(javascript)--省份-城市二级下拉联动(POST方式)
- JSP脚本中的9个内置对象
- 《Javascript权威指南》学习笔记之十九--HTML5 DOM新标准---处理文档元信息和管理交互能力
- 【JS】javascript 正则表达式 大全 总结