MVC 5 Html.BeginForm 使用 JQuery 带有数据和文件上传的 ajaxForm，returns 一个新页面。什么时候应该更换

Question

我想 post 一个 Html.BeginForm 数据和一个文件，并用新数据替换内容。我只用数据做到了。

JQuery 成功但只有数据。

 $('form').submit(function () {
    if ($(this).valid()) {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                // Element is a div.
                $(element).html(result);
            }
        });
    }
    return false;
});

我已经试了 8 个小时了，想出了这个。但是当它应该更新 div 时，它会将我重定向到一个新页面。其他一切都正常工作。比如上传文件和数据。它只是将我重定向到一个新页面。我要疯了。

我用的是unobtrusive和validate.min。我可以验证表单并让它更新 "WHITOUT THE FILEUPLOAD"

8 小时后我的方法...

ParticalView

@using Website.Models
@model MySuperModel
@if (Model != null)
{      
    using (Html.BeginForm("Action", "Controller", null, FormMethod.Post, new { enctype = "multipart/form-data", id = "helpme", @class = "please" }))
    {
        @Html.AntiForgeryToken()
        // Some code..
    }
}

控制器

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Action(MySuperModel Model, HttpPostedFileBase file)
{           
        // Some file validation

        if (ModelState.IsValid)
        {
            // Updating the database and sets Model to its new values.                    
        }

    return PartialView("Action", Model);
}

也试过

return View(Model);
return ParticalView(Model);
return ParticalView("~/Views/SecretService/Action.cshtml", Model);

JQuery

$('form').submit(function () {
    if ($(this).valid()) {
        $(this).ajaxForm({
            beforeSend: function () {
                // Doing some loading gif stuff
            },
            success: function (result) {
                // element is div holding the ParticalView
                $(element).html(result);
            },
            complete: function () {
                $.validator.unobtrusive.parse('form');
                // And so on.
            }
        });

    }
    return false;
});

我对代码进行了精简以使其更具可读性。希望有人能帮忙。

Answer 1

您好，对于 ajax 调用，您应该使用 JsonResult 而不是 ActionResult。 ActionResult 将始终导致页面刷新。

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Action(MySuperModel Model, HttpPostedFileBase file)
{           
        // Some file validation

        if (ModelState.IsValid)
        {
            // Updating the database and sets Model to its new values.                    
        }

    return (result.ToHtmlString(), JsonRequestBehavior.AllowGet)
}

Answer 2

感谢@Stephen Muecke，我让它开始工作。

供将来参考。

查看

-Replace-
using (Html.BeginForm("Action", "Controller", null, FormMethod.Post, new { enctype = "multipart/form-data", id = "helpme", @class = "please" }))
-With-
<form action="@Url.Action("Action", "Controller")" id="helpme" enctype="multipart/form-data" class="please" method="post">

JQuery

$('form').submit(function (event) {

    /*
        First it dinnt work until i prevented the server side form submit.
        So this may actual work with @Html.BeginForm()
        But i dinnt have the energy to try it, since i got it to work.
    */
    event.preventDefault();

    if ($(this).valid())
    {
        var formdata = new FormData($(this).get(0));

        $.ajax({
            url: this.action,
            type: this.method,
            data: formdata,
            processData: false,
            contentType: false,
            beforeSend: function () {
                // Doing some loading gif stuff
            },
            success: function (result) {
                // element is div holding the ParticalView
                $(element).html(result);
            },
            complete: function () {
                $.validator.unobtrusive.parse('form');
                // And so on.
            }
        });
    }
    return false;
});

现在可以了。

MVC 5 Html.BeginForm 使用 JQuery 带有数据和文件上传的 ajaxForm，returns 一个新页面。什么时候应该更换

MVC 5 Html.BeginForm using JQuery ajaxForm with data and fileupload, returns a new page. When it should replace

c#

jquery

asp.net-mvc-5

jquery-file-upload

ajaxform