ASP.net mvc 架构中在JQuery脚本与Action传值

 

 今天在学习ASP.net MVC架构和JQuery开发WEB应用过程中，想实现在前台（View）的JQuery脚本中将某个界面元素的位置座标传递到服务器Action 方法中。在网上看了不少高手写的东西，还是不能理解（本人水平比较菜 ：）），后来一个一个滴试验，基本上弄清楚了，就此做个笔记。

一、需求：

         1、利用JQuery脚本读出指定DOM元素的left和top两个CSS属性。

         2、再将这2个数据传递给Controller中的Action方法，保存在数据库或者XML文档中。

二、实现：

         1、页面（View）中有元素：

    <div  class ="mydrag"style=" position: absolute">姓名</div>

     <input  id="Button1"  type="button"  value="保存数据" />

    2、有JQuery脚本如下：

    <scripttype="text/javascript">

    $(document).ready(function () {

         $("#Button1").click(function () {

          var left = $(".mydrag").css("left");

            var top = $(".mydrag").css("top");

         $.post("/Home/SendData", {"ss":left,"ss1":top} , function(data){alert(data);},"HTML");

        });     })    </script>

   其中：

            var left = $(".mydrag").css("left");            var top = $(".mydrag").css("top");

   两句读出指定元素的left和top CSS 属性保存在left 和 top 变量中；

$.post("/Home/SendData", {"ss":left,"ss1":top} ,function(data){alert(data);},"HTML");

  这句需要理解：

    ①"/Home/SendData" 是Controller中的Action方法；

   ②{"ss":left,"ss1":top}是需要传递的两个参数，"/Home/SendData"会以函数参数的形式读取；

   ③function(data){alert(data);}是执行这条语句的回调函数，其中的data是由"/Home/SendData"函数执行返回数据。

   ④"HTML" 是本条语句传递方式，可以是"HTML",可以是"Json",可以是"TEXT"等等。

   $.post（）是JQuery.ajax()方法的高级版本，对应的还有$.get（），这个是JQuery的内容。

   3 、Controller中的Action写法如下：

        [HttpPost]

        public ActionResult SendData(string ss ,string ss1)

        {

           

        //   do something for save data.

            return Content(ss +"|||" +ss1);

        }

4、执行后会有个Alert 弹出如下：

 

Alert中显示的内容就是ss +"|||" +ss1，这样证明两个参数已经被传到Action中。