时间戳

首页 > 解决方案 > 分配 src="@URL.action" 时如何显示特定错误

jquery - 分配 src="@URL.action" 时如何显示特定错误

问题描述

我有这个事件：

function onChange(productName) {
  $("#itemImage img").attr('src', "@Url.Action("GetCustomProductImage")" + "?productName=" + productName);
}

当图像无法加载时，我的控制器方法可能会引发异常（可能有多种原因，但主要原因是图像不存在），我可以在浏览器控制台中看到它。

重要的是要说图像不存在于任何服务器目录中并且我不想存储它，我将它作为一个字节数组从保管箱共享文件夹中检索出来。

但我无法在视图中显示用户友好的消息。由于我的控制器的响应存储在 src 中，我无法访问错误信息。

使用事件on("error")或img.onerror不提供有关错误的任何信息。

如果我返回Content("<script>alert("+errormessage+");</script>")它不会显示警报。

我想避免对服务器进行多次调用，因此 ajax 来检查错误然后分配 src 不适合我。

我还想避免将 img 转换为 base 64，然后将其分配给 src，因为 img 变得更大。

我在这里要求一个不可能的事情，或者有一种方法可以在我没有想到的视图上显示错误消息？

如果它太令人困惑，请指出，我会尝试以更好的方式解释自己。谢谢。

标签： jqueryasp.net-mvcrazor

解决方案

不要使用图像src来保存@Url.Action()- 这不是必需的，而且是不正确的 html。

有些人$.ajax应该努力实现你想要的。如果您愿意，您可以详细说明一个适当的返回模型（例如，不依赖任何字符串响应），但是这个或更具体的版本应该可以实现您所追求的：

<div id="itemImage">
    <img src="/path/to/initial-image.png" />
</div>

<button id="test-button">TEST</button>

<script>
    $("#test-button").on("click", function () {
        onChange("test-product-name");
    });

    function onChange(productName) {
        var url = "@Url.Action("GetCustomProductImage")";
        $.ajax({
            url: url + "?productName=" + productName,
            type: "GET",
            dataType: "json",
            success: function (transport) {
                if (transport !== "false") {
                    $("#itemImage img").attr('src', transport);
                } else {
                    $("#itemImage").text("Could not be retrieved");
                }
            },
            error: function () {
                console.log("ERROR");
            }
        });
    }
</script>

使用以下控制器操作：

public JsonResult GetCustomProductImage(string productName)
{
    // Get image src from productSrc - ideally, build a Json return model
    // EITHER:
    var transport = "/Path/To/image.png";
    // OR:
    //var transport = "false";
    return Json(transport, JsonRequestBehavior.AllowGet);
}

根据您更新的问题，您可能会发现此答案可用作参考点，以获取对 Dropbox 托管图像的引用或将文件下载到服务器并进行引用。

推荐阅读