AJAX表单帖子 - 不传递数据

时间:2015-03-20 12:25:37

标签: c# jquery ajax asp.net-mvc

我有一个表单没有传递给我的控制器。 它正在触及控制器方法,但在传递任何参数时失败,' jsonString' 始终为NULL。

**注意:我也尝试过使用@razor w。模型绑定但具有相同的问题。

形式:

 <form id="CarreersForm">
            <div class="form-group">
                @Html.Label("Name")<br />
                @Html.TextBoxFor(m => m.name)  
            </div>
            <div class="form-group">
                @Html.Label("Phone")<br />
                @Html.TextBoxFor(m => m.phone)
                @Html.ValidationMessage("Phone", new { @class = "text-danger" })
            </div>
            <div class="form-group">
                @Html.Label("Email")<br />
                @Html.TextBoxFor(m => m.email) 
            </div>   
            <div class="form-group">
                <input type="file" id="filepath" name="filepath" value="Upload Resume" class="btn btn-default" />
            <input type="submit" name="submit" id="submit" value="submit" />
        </form>

JS / AJAX:

<script>
    $(function () {
        $("#submit").click(function (e) {
            e.preventDefault();
            var formData = {
                "name": $("#CarreersForm  #name").val(),
                "phone": $("#CarreersForm  #phone").val(),
                "email": $("#CarreersForm  #email").val(),
                "filepath": $("#CarreersForm  #filepath").val(),
            };
            var jsonString = JSON.stringify(formData);
            console.log(jsonString);
            $.ajax({
                type: 'POST',
                data: jsonString,
                url: "@Url.Action("CarreersForm")",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                cache: false,
                success: function (response) {
                    if (response == 'True') {
                        alert("The form was successfully submitted.");
                        $("#contactUs form input").val("");
                    }
                    if (response == 'False') {
                        alert("There was an error submitting the form. Fill in all of the form fields with no errors.");
                    }
                },
                error: function (response) {
                    alert("There was an error submitting the form. Fill in all of the form fields with no errors.");
                }
            });
        });
    });
</script>

控制器:

//Current Method
[HttpPost]
public bool CarreersForm(string jsonString)   
{
    return false;
}

HTTP POST的副本

NEW REQUEST
POST http://localhost:51721/Transportation/CarreersForm

REQUEST HEADERS:
Content-Type: application/json; charset=utf-8
X-Requested-With: XMLHttpRequest
Referer: http://localhost:51721/Transportation/Careers
Content-Length: 95
Cache-Control: no-cache

REQUEST BODY
{"name":"Mark","phone":"123456789","email":"email@emailaccount.com","filepath":"logo_main.png"}

CareersModel:

public class CareersModel
    {

        [Required]
        public string name { get; set; }

        public string job { get; set; }

        [Required]
        [EmailAddress]
        public string email { get; set; }

        [Phone]
        public string phone { get; set; }


        [Required]
        public HttpPostedFileBase filepath { get; set; }


    }

我也试过直接传递模型:

  [HttpPost]
        public bool CarreersForm(ContactForm model)   
        {

             if (!ModelState.IsValid){
                    return false;
              }
         return true;
     }

2 个答案:

答案 0 :(得分:1)

我很确定这是因为您还没有在表单上设置正确的编码类型。将其更改为以下内容以允许上传文件,这样就可以成功提交您的模型。

<form id="CarreersForm" enctype="multipart/form-data">

另外:您无法使用类似的jQuery AJAX请求上传文档。它必须是标准的帖子请求,或者使用插件允许ajaxified文件上传。

答案 1 :(得分:0)

       var formData = new FormData($("#CarreersForm")[0]);

在ajax中使用以传递数据“ data:jsonString”