(MVC,JS)FormData 的运用

小弟是初新者,第一次写笔记,写不好请见谅也请多指教!

因为公司功能需求有去接触到,想说尝试做个笔记与大家分享讨论^^

功能需求是需要一个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去装传过来的四个值,然後下面再去作所需的功能需求...
    以上是我的分享!

<<:  Day 57. 系列完结心得

>>:  iOS APP 开发 OC 第九天,网路请求原理

[Day20] Flutter GetX routing

这篇主要讲GetX在页面切换之间的路由(上下页的前後文关系) 初步先建立一个routes的资料夹 里...

[Day 7] -『 GO语言学习笔记』- 指标函式设计 & 常数(constants)

以下笔记摘录自『 The Go Workshop 』。 采用指标的函式设计 如果变数是指标,或者传递...

[Day26] 制作测试场景

今天又加班了,回到家快速的实现一下脑中想法,但貌似碰到问题... 今日目标 制作简易场景 接下来 接...

.NET Core第20天_TextAreaTagHelper的使用

TextAreaTagHelper : 可以换(多)行的输入框,为.net 对html 的封装。 新...

[第02天]理财达人Mx. Ada-登入作业

目标 本文主要说明登入作业。 程序实作 # 载入shioaji函式库 import shioaji ...