控制器返回Content()后怎么回去数据，执行相应的JavaScript方法SaveFile

Question

问题遇到的现象和发生背景

控制器返回Content()后之间显示里面的数据，而没有执行相应的JavaScript方法SaveFile

问题相关代码，请勿粘贴截图

 @using (Ajax.BeginForm("UpdatePhoto", "User", Model, new AjaxOptions() { HttpMethod = "post", OnSuccess = "SaveFile" }, new { enctype = "multipart/form-data" }))
            {
                @Html.AntiForgeryToken()
                @*更换头像*@
                <div>
                    <img src=@Model.userHeadPortrait id="HeadPortrait" />
                    <input type="file" name="HeadPortrait" id="newHeadPortrait" style="display:none" />
                </div>
                <input type="submit" value="保存头像" />
            }

<script type="text/javascript">

        function SaveFile(data) {
            if (data == "suc") {
                alert("头像修改成功！");
                window.location.reload();
            }
            else if (data == "fail") {
                alert("头像修改失败！");
            }
            else if (data == "unfound") {
                alert("读取文件失败！");
            }
        }

        $("#HeadPortrait").click(function () {
            document.getElementById('newHeadPortrait').click();//打开文件功能绑定到图片上
        });

        //找到头像的input标签绑定change事件
        $("#newHeadPortrait").change(function () {
            // 获取上传文件对象
            var file = $(this)[0].files[0];
            // 读取文件URL
            var reader = new FileReader();
            reader.readAsDataURL(file);
            // 阅读文件完成后触发的事件
            reader.onload = function () {
                // 读取的URL结果：this.result
                $("#HeadPortrait").attr("src", this.result);//HeadPortrait  img标签的ID
            }
        });

       
    </script>

#region 修改头像
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult UpdatePhoto(UserInfo user)
        {
            
            string dir = "/Upload/Img/";

            //获取用户新头像
            HttpPostedFileBase HeadPortrait = Request.Files["HeadPortrait"];
           
            if(HeadPortrait!=null && HeadPortrait.FileName!=null)
            {
                string fileExt = Path.GetExtension(HeadPortrait.FileName);
                user.userHeadPortrait = dir + HeadPortrait.FileName;

                if (fileExt != null)
                {
                    if ("(.bmp)|(.png)|(.jpg)|(.gif)|(.jpeg)".Contains(fileExt))
                    {
                        HeadPortrait.SaveAs(Server.MapPath(user.userHeadPortrait));    //保存新头像
                                                         
                    }
                }

                try
                {
                    db.Entry(user).State = EntityState.Modified;
                    db.SaveChanges();
                    ((UserInfo)Session["login"]).userHeadPortrait= user.userHeadPortrait;
                    return Content("sus");
                }
                catch (Exception)
                {
                  return Content("fail");
                }
            }
            else
            {
                return Content("unfound");
            }
        }
        #endregion

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

弹出弹窗

Answer 1

你好,
我发现了你的没有弹出提示框的问题. 不过我不知道是你本身代码中就没有呢,还是说你只是没给我.
你应该有两行这个代码:

<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

我的demo 是这样的, 你试一下呢.

@using (Ajax.BeginForm("Export", "Suc", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "SaveFile" }))
{
    <input type="submit" id="btnSubmit" value="Export" />
}
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script type="text/javascript">
    function SaveFile(data) {
        if (data == "suc") {
            alert("头像修改成功！");
            window.location.reload();
        }
        else if (data == "fail") {
            alert("头像修改失败！");
        }
        else if (data == "unfound") {
            alert("读取文件失败！");
        }
    }
</script>

Controller:

 public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Export()
        {
            return Content("suc");
        }