Ajax 调用刷新客户端页面答案

【问题标题】：Ajax call refreshes the client pageAjax 调用刷新客户端页面
【发布时间】：2018-04-12 04:08:38
【问题描述】：

我正在使用 html2canvas 截取 div 的屏幕截图，然后将其上传到服务器。图片保存到服务器后，客户端页面刷新。这是我不想要的。这是保存图片的代码：

public void SaveImage(string imageString, int id)
    {
        string s = imageString.Replace("data:image/png;base64,", "");
        byte[] imageB = Convert.FromBase64String(s);

        var filePath = Path.Combine(Server.MapPath("~/screens/" + id));
        Directory.CreateDirectory(filePath);
        using (var ms = new MemoryStream(imageB))
        {
            using (var image = Image.FromStream(ms))
            {
                image.Save(filePath + "/screen.png", ImageFormat.Png);                          
            }
        }                           
    }

这是 Javascript 代码

html2canvas(document.querySelector("#screen")).then(function (canvas) {
                var data = canvas.toDataURL("image/png");                      
                $.ajax({
                    url: '@Url.Action("SaveImage")',
                    type: 'POST',
                    data: { imageString: data, id: @ViewBag.id },
                    dataType: 'json'                        
                });
            });

我尝试了一些我在网上找到的建议，例如 jQuery 中的 preventDefault()。但仅此而已。我觉得所有其他问题和解决方案都不会影响我。

编辑：刷新页面的简单 HTML

    <!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Test</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/html2canvas.js"></script>
    <script>
        $(document).ready(function () {
            html2canvas(document.querySelector("#screen")).then(function (canvas) {
                var data = canvas.toDataURL("image/png");
                $.ajax({
                    url: '@Url.Action("SaveImage")',
                    type: 'POST',
                    data: { imageString: data, id: 2 },
                    dataType: 'json',
                });
            });
        });
    </script>
</head>

<body>
  <div id="screen">Some text</div>
</body>
</html>

编辑 1：使用 SaveImage 方法的整个控制器

using System;
using System.Linq;
using System.Web.Mvc;
using Microsoft.AspNet.Identity;
using BcVnc.Models;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

namespace BcVnc.Controllers
{
    [Authorize(Roles = "Admin, User")]    
    public class ConnectionController : Controller
    {
        private ApplicationDbContext db = new ApplicationDbContext(); 

        // GET: Connection
        public ActionResult Index(int id, bool viewOnly)
        {
            int access = checkUserAccess(id, viewOnly);
            if(access != 0)
            {
                ViewBag.id = id;                
                if (access == 1 & viewOnly == true)
                    ViewBag.viewOnly = true.ToString().ToLower();
                else if(access == 1 && viewOnly == false)
                    ViewBag.viewOnly = false.ToString().ToLower();
                else
                    ViewBag.viewOnly = true.ToString().ToLower();
                return View();
            }
            else
            {
                return View("Error");
            }
        }

        private int checkUserAccess(int id, bool viewOnly)
        {
            var userId = User.Identity.GetUserId();            
            var userDevice = db.UserDevices.Where(ud => ud.UserId == userId).FirstOrDefault(ud => ud.DeviceId == id);
            var device = db.Devices.FirstOrDefault(d => d.Id == id);
            ViewBag.name = device.Name;

            if (userDevice == null)
                return 0;
            else
            {
                if (userDevice.ViewOnly == false)
                    return 1;
                else
                    return -1;
            }
        }

        public void SaveImage(string imageString, int id)
        {
            string s = imageString.Replace("data:image/png;base64,", "");
            byte[] imageB = Convert.FromBase64String(s);

            var filePath = Path.Combine(Server.MapPath("~/screens/" + id));
            Directory.CreateDirectory(filePath);
            using (var ms = new MemoryStream(imageB))
            {
                using (var image = Image.FromStream(ms))
                {
                    image.Save(filePath + "/screen.png", ImageFormat.Png);                          
                }
            }                           
        }
    }
}

【问题讨论】：

请贴出“SaveImage”的完整动作方法。了解您正在使用的 Asp.net（核心）版本可能与此相关。
我已经编辑了我的帖子。我希望我能理解你的要求。唯一缺少的是方法名称和参数。
我们需要完整的代码，相关的HTML是什么样的？ Ajax 调用不会刷新页面，因此很可能是触发 html2canvas 的原因（可能是表单中的提交按钮）。
我要的是整个方法，因为我期待看到某种return View(viewmodel-foo); 电话。由于您使用的是 void，而不是某种 ContentResult 类型（为什么？），我们需要查看您的完整 html 表单和 javacript 代码，以查看您是否正在提交表单或其他任何问题。
即使我制作了非常简单的 HTML 页面。只是基本的 HTML，其中有一个 div 和一些文本。调用你可以在我的原始帖子中看到的 $(document).ready 函数中的 javascript 会使页面重新刷新（一次又一次……）。没有表格，没有按钮。我将用这个简单的代码编辑我的问题。

标签： asp.net-mvc html2canvas

【解决方案1】：

不知道我以前怎么找不到这个，但整个问题出在 Visual Studio 设置中。刷新可能不会在本地主机之外发生：Refresh in browser when uploading mvc file c # 在设置中更改后，不再刷新。

【讨论】：