(MVC，JS)FormData 的運用

@mvc @formdata

Mars聖聖 2020-12-31 09:10:14 ‧ 1566 瀏覽

分享至

小弟是初新者，第一次寫筆記，寫不好請見諒也請多指教！

因為公司功能需求有去接觸到，想說嘗試做個筆記與大家分享討論^^

功能需求是需要一個Form表單並且把資料傳遞到後端，但是又想用ajax來發送資料到後端的話

以下:

<HTML>部份
 <tr>
            <td>PersonId : </td>
            <td>
                @Html.TextBox("PersonId")
            </td>
        </tr>
        <tr>
            <td>Name : </td>
            <td>
                @Html.TextBox("Name")
            </td>
        </tr>
        <tr>
            <td>Gender : </td>
            <td>
                @Html.DropDownList("Gender",new List<SelectListItem>
           {
               new SelectListItem{ Text ="Male",Value = "M"},
               new SelectListItem{ Text ="Female",Value = "F"}
           }, "Please select")
            </td>
        </tr>
        <tr>
            <td>City : </td>
            <td>
                @Html.TextBox("City")
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="送出" id="btnSubmit" />
            </td>
        </tr>
    </table>
    -----------------
    <JavaScript>部份
    $("#btnSubmit").click(function () {
            var formData = new FormData();
            formData.append("PersonId", $("#PersonId").val());
            formData.append("Name", $("#Name").val());
            formData.append("Gender", $("#Gender").val());
            formData.append("City", $("#City").val());

            $.ajax({
                url: "/FDTest/Index",
                method: "Post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    alert(data);
                }
            });
        });
    ---------------------------
    
    <Controller>部份
    [HttpPost]
        public list<string> Index(FormCollection formcollection)
        {
             List<string> list = new List<string>();
            for (int i = 0;i<formcollection.Count;i++) {
                var b = formcollection[i].ToString();
                list.Add(b);
            }                        
            return list;
        }

    簡單說明一下，前端用FormData重新去裝我需要的資料進去(就像是一個全新的Form表單)
    運用FormData.append();(這裡有個重點append()第一個參數是name的名稱)
    再利用ajax傳送(這裡需要注意一下:
    cache: false
    contentType: false-->告訴JQuery不要設置ContentType
    processData: false-->告訴JQuery不要擅自處理傳送的資料，這三個一定要有！)
    然後後端用FormCollection類別去接應它
    這裡我用了一個list去裝傳過來的四個值，然後下面再去作所需的功能需求...
    以上是我的分享！