ASP.NET MVC使用AJAX方式撈取資料

1.可能要撈取的條件不只是一筆資料, 例如使用兩部電影ID去撈取各自的資料, 因此在jQuery組成JSON字串

        // 撈出頁面資料放到陣列

        var $video = $('.video');

        var videoIdArr = [];

        $video.each(function (index, element) {

            videoIdArr.push($(element).attr('data-videoid'));

        });

        videoIdArr = $.unique(videoIdArr);

        var url = '@Url.Action("GetVideos", "Video")';

        // 使用JSON.stringify將JavaScript值轉換成以JSON表示的字串

        var data = { videoIds: JSON.stringify(videoIdArr) };

        // data為service端return的JSON 格式之內容

        $.post(url, data, function (data) {

            $(data).each(function (index, element) {

                $('.video_' + element.VideoID).text(element.Name);

            });

        });

        // MVC的Controller Action :

        [HttpPost]

        public ActionResult GetVideos(string videoIds)

        {

            var db = new HappyMovieEntities();

            var Serializer = new JavaScriptSerializer();

            // 將指定的 JSON 字串轉換成 T 型別的物件。

            // (此範例是將videoIds轉換成List<string>)

            var _videoIds = Serializer.Deserialize<List<string>>(videoIds);

            var query = db.Video.Where(x => _videoIds.Contains(x.VideoID)).Select(x => new

            {

                x.VideoID,

                x.Picture,

                x.Name,

                ReleaseYear = x.ReleaseDate.Value.Year,

            });

            return Json(query);

        }

* 備註 :

因為Action裡面有解序列化的程式, 所以接收的資料一定要是Json格式的字串

如果要client端發送的只有一筆可以這樣寫 :

        var vid = '@Model.VideoId';

        var data = { videoIds: JSON.stringify([vid]) };

如果不傳入資料 :

        var data = { videoIds: undefined };

但是server端要加入判斷是否接收到的是null

-----------------------------------------------------------------------------------

1. 使用 autocomplete (jQuery UI)

        // 輸入文字搜尋人名

        $('#search_user').autocomplete({

            source: "@Url.Action("UserName", "Search")",

            minLength: 2,

            select: function (event, ui) {

                $('#ReceiverId').val(ui.item.id); // 將真正的值放到指定元素

            }

        });

        // MVC的Controller Action :

        // autocompelete送出的請求url為 : UserName?term=

        // 所以接收的參數必須命名為 term

        public ActionResult UserName(string term)

        {

            var _db = new HappyMovieEntities();

            var query = _db.UserProfile.Where(x => x.NickName.Contains(term))

            .OrderBy(x => x.NickName)

            .Select(x => new

            {

                id = x.UserId, // 真正的值

                label = x.NickName, // 顯示於搜尋結果

                value = x.NickName, // 被選取後帶回欄位的值

            });

            return Json(query, JsonRequestBehavior.AllowGet);

        }