ASP.NET MVC Razor检查数据库条目

Question

我想在我的网站上添加视频和图片。当在DB中添加条目时，我想检查用户是否添加了图片，然后才显示它。

我认为结构必须像这样

if(rows.count > 0)
{ 
    <img src = ="Uploads/@item.Image" />
}
else <img src ="" />

我希望你明白我想要的东西请帮助非常感谢

Answer 1

假设您在从数据库中获取图像内容并将其放入HTML时遇到问题：您不能这样做。请记住，img标记不仅包含图像的二进制数据，而且还有一个URL，浏览器将从中获取图像。因此，对于输出（使用正确的HTTP内容类型）二进制图像的图像，您需要另一个操作（可能还有控制器）。 HTML中的图片代码包含URL for this new action。

IE中。你需要两个动作。一个用于HTML，一个用于图像内容。

所以在你的剃须刀视图中：

if(rows.count > 0) { 
  <img src = ="@Url.Action("get", "image", new { id = @item.id })" alt="…" />
}

然后在您设置Response.ContentType Get的{​​{1}}操作中匹配图像类型，并将图像流出（ContentResult使此更容易）。

NB 在您的视图中访问数据库是不好的做法：您应该从控制器中的数据库填充模型类型，或者更好，让控制器协调模型以填充自身（并且可能是视图模型类型的实例），然后将该实例（已关闭数据库连接）传递给视图。

PS。如果图片较小，您可以查看内联数据网址，但这不适合大于几KB的图片。

Answer 2

  @if (!Model.Image.IsEmpty())
                        {
                            <figure><img src="~/Uploads/@Model.Image" alt=""></figure>

                        }

试过这个并且有效。

Answer 3

你的意思是什么？

查看：

<div class="legend-right">
@Html.LabelFor(m => m.ImageData)
@if (Model.ImageData == null)
{
    <img id="blah" class="photo" src="@Url.Content("~/Content/images/no_photo.png")" />
}
else
{
    <img id="blah" class="photo" src="@Url.Action("GetImage", "Participant", new { Model.ID })" />
}
    <label for="imgInp" class="custom-file-upload">
    <i class="fa fa-cloud-upload"></i>Add Photo
    </label>
    <input type='file' id="imgInp" name="image" />
</div>


<script>
//Preview & Update an image before it is uploaded
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}
$("#imgInp").change(function () {
    readURL(this);
});

<强>的CSS：

/*For photo/image upload operations */
input[type="file"] {
    display: none;
}

.custom-file-upload {
    border: 1px solid rgb(197, 197, 197);
    border-radius: 4px 4px 4px 4px;

    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    float: right;
    width: 5.25em;
    margin-left:200px;
}

.photo{
    width: 7em; 
    height: 9em; 
    border: 1px solid rgb(197, 197, 197); 
    border-radius: 4px 4px 4px 4px; 
    float:right;
}

<强>控制器：

public FileContentResult GetImage(int id)
{
    var dataContext = repository.Participants.FirstOrDefault(p => p.ID == id);
    if (dataContext != null)
    {
        return File(dataContext.ImageData, dataContext.ImageMimeType);
    }
    else
    {
        return null;
    }
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Exclude = null)] Participant participant, HttpPostedFileBase image)
{
    try
    {
        if (ModelState.IsValid)
        {                    
            if (image != null)
            {
                participant.ImageMimeType = image.ContentType;
                participant.ImageData = new byte[image.ContentLength];
                image.InputStream.Read(participant.ImageData, 0, image.ContentLength);
            }

            repository.SaveParticipant(participant);
………