0

I have an ASP.Net MVC application. I need to send a file to Controller with ajax. but I have twice request.

@using (Ajax.BeginForm("Create", "MyController", new { area = "" },
    new AjaxOptions
    {
        HttpMethod = "POST",
        OnBegin = "onBegin",
        OnSuccess = "onSuccess(data)"
    }, new { enctype = "multipart/form-data", id = "myform" }))
    {

    <section class="col col-md-12">
        @Html.DisplayFor(model => model.Title)
        <label class="input">
            @Html.TextBoxFor(model => model.Title)
        </label>
    </section>

    <section class="col-md-6">
        <label class="label text-left">
            My File
        </label>
        <label for="file" class="input input-file">
            <div class="button">
                <input name="files" type="file" id="file" onchange=" this.parentNode.nextSibling.value = this.value ">choose...
            </div>
            <input type="text" readonly="" class="text-right">
        </label>
    </section>

    <button type="submit" class="btn btn-primary">
        Submit
    </button>
}

Controller Action, When posting my data using AJAX, here's twice request in my Action.

[HttpPost]
public ActionResult Create(HttpPostedFileBase files, CreateViewModel model)
{
    // The Request comes here twice.
}

and my references in page,

<script src="/Scripts/jquery.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/bootstrap/bootstrap.min.js"></script>
<script src="/Scripts/jquery.form.js"></script>
$(function () {
    $('#myform').ajaxForm({
        beforeSubmit: ShowRequest,
        success: SubmitSuccesful,
        error: AjaxError
    });
});

function ShowRequest(formData, jqForm, options) {
    var queryString = $.param(formData);

    alert('BeforeSend method: \n\nAbout to submit: \n\n' + queryString);
    return true;
}

function AjaxError() {
    alert("An AJAX error occured.");
}

function SubmitSuccesful(responseText, statusText) {
    alert("SuccesMethod:\n\n" + responseText);
}

what should I do?

3
  • Shouldn't you change button type from 'submit' to 'button'? Commented Oct 22, 2015 at 8:53
  • No, It does not matter Commented Oct 22, 2015 at 9:00
  • 1
    You have Ajax.BeginForm() which does an ajax submit, and then you also have $('#myform').ajaxForm() which does another ajax submit. Change it to Html.BeginForm() Commented Oct 22, 2015 at 9:08

1 Answer 1

2

The problem is that you are using ASP.NET MVC AjaxForm as well jQuery ajaxForm plugin. When you press submit button, the request is sent by MVC as well jQuery.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.