使用jQuery.post傳送字串陣列參數到ASP.NET MVC

本範例展示如何透過jQuery.post傳送string[]參數給ASP.NET MVC。

情境模擬訊息發送操作,提供網頁介面供使用者挑選接收者(採用複選式下拉選單)、輸入發送內容後按鈕傳送訊息給指定對象。

ASP.NET MVC Controller如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace Mvc.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        public ActionResult Index()
        {
            return View();
        }
 
        public ActionResult SendMessage(string[] users, string message)
        {
            //假裝發通知給指定的使用者, 此處省略
            return Content(string.Format("已傳送訊息給{0}",
                users == null ? "null" : string.Join(",", users)));
        }
    }
}

至於前端,輸入欄位借重Knockout幾行搞定,按鈕動作則透過jQuery.post()以AJAX方式呼叫Controller的SendMessage方法,其中的users參數在C#端宣告型別為string[],Client端靠Knockout的下拉選單複選繫結selectedOptions直接取得使用者挑選的字串陣列,依直覺寫成{ users: vm.selUsers() }將字串陣列傳至Server端。

 
@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <script src="~/Scripts/jquery-2.0.3.js"></script>
    <script src="~/Scripts/knockout-3.0.0.debug.js"></script>
</head>
<body>
    <div>
        <input type="text" data-bind="value: msg" />
        <input type="button" data-bind="click: sendMsg" value="Send Message" />
        <br /> 
        <select data-bind="options: users, selectedOptions: selUsers" multiple></select>
    </div>
    <script>
        function myViewModel() {
            var self = this;
            self.msg = ko.observable("Test");
            self.users = ko.observableArray(
                ["Jeffrey", "Darkthread", "Admin", "Guest"]);
            self.selUsers = ko.observableArray();
            self.sendMsg = function () {
                $.post("@Url.Content("~/home/sendmessage")",
                    { users: vm.selUsers(), msg: vm.msg() },
                    function (res) {
                        alert(res);
                    });
            };
        }
        var vm = new myViewModel();
        ko.applyBindings(vm)
    </script>
</body>
</html>

事與願違,ASP.NET MVC端的輸入參數string[]沒接到值,users為null:

用IE Dev Tool檢視傳送內容,可以發現jQuery.post()自動將字串陣列序列化為users[]=...&users[]=...(上圖黃底部分,%5B%5D是"["與"]"的UrlEncode編碼),但ASP.NET MVC卻認不得,所幸,我們離接通只差一小步。

關於陣列參數的序列化形式,傳統採用a=..&a=..格式,後來如PHP、Ruby on Rails等Framework改採a[]=..&a[]=..格式,jQuery從1.4版起便將陣列序列化預設格式改為a[]=..,但仍提供traditional參數可指定採用舊格式。而ASP.NET MVC仍採a=..&a=..格式,所以只需將傳遞參數交給$.param()轉換並指定traditional參數為true: $.param({ users: vm.selUsers(), msg: vm.msg() }, true), 問題就解決囉!

PS: 如對陣列化序列格式有興趣深入了解,可以參考jQuery.param()文件

歡迎推文分享:
Published 14 December 2013 02:20 PM 由 Jeffrey
Filed under: ,
Views: 14,115



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<December 2013>
SunMonTueWedThuFriSat
24252627282930
1234567
891011121314
15161718192021
22232425262728
2930311234
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication