Skip to main content
 首页 » 编程设计

c#之MVC Ajax 防止重定向到 Action Controller

2024年02月27日51pengyingh

在我看来我有一个模态窗口,它有下一个形式...

@using (Html.BeginForm("controllerAction", "Controller", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
    <div class="container" id="editRecordForm"> 
        <div class="row"> 
            <div class="col-md-6"> 
                @Html.LabelFor(model => model.Author) 
                @Html.TextBoxFor(model => model.Author, new { @class = "form-control", @style = "height:auto" }) 
                @Html.ValidationMessageFor(model => model.Author) 
            </div> 
        </div> 
        <br/> 
        <div class="row"> 
            <div class="col-md-6"> 
                @Html.LabelFor(model => model.Image) 
                <input type="file" name="file" accept="image/*"> 
            </div> 
        </div> 
        <br /> 
        <input type="submit" value="Submit" class="btn btn-primary"> 
    </div> 
} 

这是包含ajax请求的JS

<script> 
    var formdata = new FormData($('form').get(0)); 
    $('form').submit(function () { 
        if ($(this).valid()) { 
            $.ajax({ 
                url: this.action, 
                type: this.method, 
                cache: false, 
                data: formdata, 
                success: function (status, data) { 
                    console.log(data); 
                } 
            }); 
        } 
        return false; 
    }); 
</script> 

Action Controller 接收模型和文件两个参数

[HttpPost] 
public async Task<JsonResult> controllerAction(HttpPostedFileBase file, Model model) 
{ 
  var json = new 
  { 
      Success = true, 
      StatusCode = "200", 
      ErrorDesc = "OK", 
      ErrorCode = "", 
      NewId = "" 
  }; 
 
  //some process 
 
  return Json(json, JsonRequestBehavior.AllowGet); 
} 

问题是为什么当 Controller Action 完成时,它会重定向到 Action Controller url

http://controller/action  

它不在同一页面上?

我做错了什么?

请您参考如下方法:

您没有阻止表单的默认操作。

$('form').submit(function (e) { 
    e.preventDefault(); 
    if ($(this).valid()) { 
        $.ajax({ 
            url: this.action, 
            type: this.method, 
            cache: false, 
            data: formdata, 
            success: function (status, data) { 
                console.log(data); 
            } 
        }); 
    } 
    return false; 
});