将表单发送到ajax中的控制器

Question

This is my form

<form id="postProblemForm" action="/Problems/Post"  method="post" enctype="multipart/form-data">
            <input type="text" id="problemSubject" name="problemSubject" class="inp-form"/>
            <input type="file" id="uploadFile" name="uploadFile"/>
            <textarea rows="" cols="" class="form-textarea" id="problemDescription" name="problemDescription"></textarea>
            <input type="submit" value="Post" id="btnPostProblem"  style="width:70px;"/>

    </form>

following is JS

$("#postProblemForm").submit(function (event) {
                event.preventDefault();
                var $this = $(this);
                var url = $this.attr('action');
                var dataToSend = $this.serialize();
                var callBack = function (isPosted) {
                                    if (isPosted) { alert("posted successfully"); } }
                $.get(url,dataToSend,callBack);

            });

Following is Controller code

[HttpPost]
        public bool Post(FormCollection form) 
        {
            string subject = form["problemSubject"];
            string description = form["problemDescription"];
            var image = WebImage.GetImageFromRequest();

            return true;

        }

But controller method is not being called. Plese help.

Answer 1

You cannot upload files using AJAX. I see that your form contains a file input but this won't work with AJAX. Also you are using a $.get whereas you probably wanted to $.post the contents. Another issue with your action is that it should return an ActionResult and not boolean types. For example you could return a JsonResult for tat matter.

If you want to be able to upload files with your form you could use a client side upload plugin such as Uploadify , Fine Uploader or the jQuery.form plugin .

Here's for example how your code might look like with the jQuery.form plugin:

$('#postProblemForm').ajaxForm(function(isPosted) {
    if (isPosted) { 
        alert('posted successfully');
    }
});

Answer 2

You're doing a GET on a controller method that accepts a POST request. You need to change it to:

$.post(url,dataToSend,callBack);