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中。