可以js定义一个function xx()，在你html按钮onclick="xx()"中调用
url值为你执行数据库的操作，如下(controller中)：
public ContentResult OperateHandler()
{
string result = "Faiulure"
SqlConnection conn = new SqlConnection("数据库连接字符串")。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jquery做的滑动按钮开关</title><link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/></head><style>.switch{ width: 100pxmargin: 100px 0px 0 100px} .btn_fath{ margin-top: 10pxposition: relativeborder-radius: 20px} .btn1{ float: left} .btn2{ float: right} .btnSwitch{ height: 40pxwidth: 50pxborder:nonecolor: #fffline-height: 40pxfont-size: 16pxtext-align: centerz-index: 1} .move{ z-index: 100width: 40pxborder-radius: 20pxheight: 40pxposition: absolutecursor: pointerborder: 1px solid #828282background-color: #f1eff0box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999} .on .move{ left: 60px} .on.btn_fath{ background-color: #5281cd} .off.btn_fath{ background-color: #828282} </style><body><p class="switch"><p class="btn_fath clearfix on" onclick="toogle(this)"><p class="move" data-state="on"></p><p class="btnSwitch btn1">ON</p><p class="btnSwitch btn2 ">OFF</p></p><p class="btn_fath clearfix off" onclick="toogle(this)"><p class="move" data-state="off"></p><p class="btnSwitch btn1">ON</p><p class="btnSwitch btn2 ">OFF</p></p></p><script type="text/javascript" src="jquery/jquery.min.js"></script><script type="text/javascript" src="bootstrap/bootstrap.min.js"></script><script type="text/javascript">function toogle(th){ var ele = $(th).children(".move")if(ele.attr("data-state") == "on"){ ele.animate({left: "0"}, 300, function(){ ele.attr("data-state", "off")alert("关！")})$(th).removeClass("on").addClass("off")}else if(ele.attr("data-state") == "off"){ ele.animate({left: '60px'}, 300, function(){ $(this).attr("data-state", "on")alert("开！")})$(th).removeClass("off").addClass("on")} } </script></body></html>需要注意的是：
1、这边滑动使用的速度是300ms，好像是匀速，没有线性的快慢那种；试着找下能不能像CSS3中ease那种线性运动的。
2、animate方法中的回调函数，即运动结束后调用的function。
