1

I have an ASP.net 4.5, MVC5 project that I have open in Visual Studio 2015. My Ajax.BeginForm doesn't want to update the div like it should but opens up in a new tab.

This question been posted many times and the answer seems to always be to add microsoft's jquery unobtrusive library. However I have added it and the ajax form still opens in a new tab instead of the current partial page section.

Here is my code in my cshtml

In cshtml

@Html.Partial("_UploadFile")

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/jqueryajax")
}

In BundleConfig.cs

    bundles.Add(new ScriptBundle("~/bundles/jqueryajax").Include(
                    "~/Scripts/jquery.unobtrusive-ajax*"));

jquery.unobtrusive-ajax is added to project via nuget

In Scripts folder jquery.unobtrusive-ajax.js jquery.unobtrusive-ajax.min.js

In Packages.config

<package id="jQuery" version="1.10.2" targetFramework="net45" />
<package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net45" />
<package id="jQuery.Validation" version="1.11.1" targetFramework="net45" />
<package id="Microsoft.jQuery.Unobtrusive.Ajax" version="3.2.3" targetFramework="net45" />
<package id="Microsoft.jQuery.Unobtrusive.Validation" version="3.2.3" targetFramework="net45" />

Partial Page (_UploadFile.cshtml): 

@using (Ajax.BeginForm(
    "UploadFile",
    null,
    new AjaxOptions
    {
        HttpMethod = "POST",
        InsertionMode = InsertionMode.Replace,
        UpdateTargetId = "uploadfile1"
    },
    new { id = "UploadForm", enctype = "multipart/form-data", data_ajax = "false" }
))
{
    @Html.AntiForgeryToken()
    <div id="uploadfile1">
        <div class="form-horizontal">
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                   <input type="file" name="file" />
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Upload" class="btn btn-sm" />
                </div>
            </div>
        </div>
</div>
}

Take note I had to add data_ajax = "false" otherwise I would get a jquery error if jquery.unobtrusive-ajax.js is linked on the page.

In my Controller

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult UploadFile(HttpPostedFileBase file)
    {
        return PartialView("_UploadFile");
    }

I tried putting jquery.unobtrusive-ajax in different places in the page but this file doesn't seem to be the issue.

  1. Is there any way to troubleshoot this unwanted open in new tab behavior? It feels like pissing in the dark troubleshooting it.
  2. What other reasons could cause this behaviour apart from jquery.unobtrusive-ajax.js not being referenced in the page?
greay
  • 1,725
  • 5
  • 18
  • 37
  • If you check the source of the page, can you post the `
    ` tag that is generated as a result of this code, that will probably reveal what the problem is?
     – Luke Jul 27 '15 at 09:14
  • 1
    Include only one file in your bundle (not the `.min` version). Have you also included `jquery{version}.js? And `data-ajax = "false"` means it wont do a ajax submit (it will no a normal submit) so you need to remove that. –  Jul 27 '15 at 09:19
  • If I put data-ajax = "true" and it resolved it. If true however the file doesn't get passed, when I refresh the page and click on the upload it calls the HttpPost method twice and never again when clicking on the button unless you refresh. The file upload functionality seem to be causing problems combined with the jquery ajax. – greay Jul 27 '15 at 10:22
  • What jquery error do you get if you ommit data_ajax = "false" and jquery.unobtrusive-ajax.js is linked on the page. – Symeon Breen Jul 27 '15 at 10:27
  • 1
    @greay, Because you cannot upload files using `Ajax.BeginForm()`. You need to use `FormData`. Refer [this answer](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) for an example –  Jul 27 '15 at 10:33
  • When I ommit it the button only works on refresh but calls it twice and not again. Also it doesn't pass the file. I have read that you cannot send a file via Ajax begin form http://stackoverflow.com/questions/2428296/jquery-ajax-upload-file-in-asp-net-mvc so my question is not possible. I was trying to get a workaround by setting data-ajax false which creates a new page with a file being sent to the controller – greay Jul 27 '15 at 10:33
  • Thanks Stephen. Just found the same. – greay Jul 27 '15 at 10:36

0 Answers0