javascript - 在 MVC 中通过 JavaScript 提交动态生成的表单

Question

我正在使用特殊样式的输入元素，这些元素实际上无法使用输入标签，因此我正在通过 Javascript 构建并提交表单，例如 this答案描述。简而言之:

var form = document.createElement("form");
var hiddenField = document.createElement("input");
hiddenField.setAttribute("type", "hidden");
hiddenField.setAttribute("name", "id["+index+"]");
hiddenField.setAttribute("value", this.id);
form.submit();

现在据我所知，在我的 MVC Controller 中我必须像这样检索数据:

public ActionResult Submit(string a = null, string b = null...)
{
    //something
}

我的问题是，我通过此表单提交的数据非常简单，只是用作字段 ID 的可变长度未知数字的列表。例如:
[1,2,5,3,10,199999]
我不知道这些 ID 的范围或数量。 如何将此数据发送回我的 MVC 页面 Controller ？

编辑:当前选择的答案确实回答了我提出的问题。到目前为止我还没有机会对此进行测试，但是 IE9 中不支持 FormData。我可以使用任何后备方法在 IE9 中获得相同的结果吗？

Answer 1

执行以下操作:

如果您不知道传递的字符串数量，或者它们可能会有所不同，请改用 params[]:

    [HttpPost]
    [ValidateJsonAntiForgeryToken]
    //See this: http://stackoverflow.com/a/24394578/1057052
    public ActionResult Submit(params string[] a)
    {
          //Read it like this!
          foreach (var myvar in a)
          {
             //Do whatever you want with it!
          }          
    }

创建一个名为 ValidateJsonAntiForgeryTokenAttribute 的新文件:

   [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, AllowMultiple= false, Inherited = false)]
    public sealed class ValidateJsonAntiForgeryTokenAttribute : FilterAttribute, IAuthorizationFilter
    {
        public void OnAuthorization(AuthorizationContext filterContext)
        {
            if (filterContext == null)
            {
                throw new ArgumentNullException("filterContext");
            }

            var httpContext = filterContext.HttpContext;
            var token = httpContext.Request.Headers["__RequestVerificationToken"] ?? httpContext.Request.Form["__RequestVerificationToken"];
            var cookie = httpContext.Request.Cookies[AntiForgeryConfig.CookieName];
            AntiForgery.Validate(cookie != null ? cookie.Value : null,token);
        }
    }

并将其放入您的 .cshtml 或 .js 文件中:

<script>
function AjaxSubmit(Url,Method, data, success)
{
    $.ajax( {
        url: Url,
        method: Method,
        data: data,
        contentType: false, 
        processData: false,
        //Protect 
        headers: {"__RequestVerificationToken" : document.getElementsByName('__RequestVerificationToken')[1].value},
        success: success
        });
    }
}


//use it like this:

var formData = new FormData();
    /**
    * Note: The "a" is the "key" or the name of the parameter
    * of your MVC controller.
    * The second parameter of the formData.append is the actual data
    * that you want to pass.
    *
    **/
    formData.append('a', "The Value I want to append. You can query for this value");
    formData.append('a', "The Value I want to append. You can query for this value");
    formData.append('a', document.getElementById('js-element').value);

    //You can modify alert("Success") for whatever the function you want.
    //Just remember to wrap it  inside function(){}
    AjaxSubmit("/MyController/Submit", "POST", formData, function(){alert("Success")});

</script>