Question

如何在一次调用MVC控制器方法的同时获取图像和工具提示？我可以使用类似下面的内容来获取图像，但是如何获得相关的工具提示？用例是在允许用户查看图像时显示图像，否则显示通用图像和工具提示，指示图像未显示的原因。

为了澄清，我想避免两次调用控制器，一次是获取图像路径和工具提示，另一次是获取图像文件。这不仅会导致两次往返网络，还会重复验证检查。问题是img src调用只能容纳图像，而不是其他属性，例如与图像相关的标题。

<img src="@Url.Action("GetPicture", "User", new { userId = Model.User.Id })" />

Answer 1

您是否只能使用GetImage的相同权限逻辑为GetTitle设置第二种方法，并为每个用户返回相应的文本？然后为title属性调用此方法。

Answer 2

您能否以下列方式解决问题。

创建模型

agree

创建部分视图

public class ImageViewModel
{
    public string ImagePath
    {
        get;
        set;
    }
    public string ImageTitle
    {
        get;
        set;
    }
}

您的控制器

@using StackOverFlowProject.Models
@model ImageViewModel

<img src=@Model.ImagePath title=@Model.ImageTitle />

最后在您的MainView中，您要显示图像渲染局部视图

Answer 3

不确定这是否是最好的方法，但我是通过创建Ajax表单，使用jQuery提交它，返回一个JSON对象，字节数组编码为Base64字符串，并使用Javascript显示图片。到目前为止似乎工作，将从进一步的测试中了解更多。

在视图中：

<div id="imgDiv">
@using (Ajax.BeginForm("GetImg", "User", null, new AjaxOptions()
{
  HttpMethod = "POST",
  Url = Url.Action("GetImg", "User"),
  OnSuccess = "DisplayImageWithTooltip(data, 'imgDiv')",
}, new { id = "ImgForm", @class = "imageGetterWithTooltip" }))
{
  @Html.AntiForgeryToken()
  @Html.Hidden("userId", @Model.User.Id)
}
</div>

Javascript提交表单：

$(".imageGetterWithTooltip").submit();

在控制器中（基于https://stackoverflow.com/a/9464137/1385857）

return Json(new
{
  fileBytes = Convert.ToBase64String(<File byte[]>), 
  fileType = <FileType>,
  tooltip = <toolTip>
}, JsonRequestBehavior.AllowGet);

Javascript显示图片

function DisplayImageWithTooltip(data, target) {

  var oImg = document.createElement("img");
  oImg.width = 150;
  oImg.height = 150;
  oImg.setAttribute('src', "data:" + data.fileType + ";base64," + data.fileBytes);
  oImg.setAttribute('title', data.tooltip);

  document.getElementById(target).appendChild(oImg);
}

Answer 4

使用Manish的想法，我的简化解决方案是创建局部视图并直接为其提供图像数据：

控制器：

            vmMiniData data = new Models.vmMiniData();
            byte[] byteArray = Users.GetPersonnelImage(personnelID);
            if (byteArray != null)
            {
                data.ImageStr  = Convert.ToBase64String(byteArray);
            }
            else
            {
                data.ImageStr = Convert.ToBase64String(Users.GetPersonnelImage("00000000-0000-0000-0000-000000000000")); //get blank image                
            }
            data.CaptionStr = Users.GetUserJobTitle(personnelID);
            return PartialView("Personnel/MiniPersonnelPartial", data);

型号：

public static byte[] GetPersonnelImage(string personnelID)
{
    byte[] img = (byte[])(from record in db.PersonnelImages
                   .Where(R => R.PersonnelID == new Guid(personnelID))
                          select record.Image).FirstOrDefault();
    return img;
}

然后在部分：

@model vmMiniData

<div>
    <div>@Model.CaptionStr</div>
    <div> <img src="data:image;base64,@Model.ImageStr" style="width:60px;min-height:30px;" /></div>
</div>

它在MVC 5中非常有效：）。

在一次通话中同时获取图像和工具提示

4 个答案: