Question

作为我的第一个项目的一部分，我必须使用MVC 5在视图中实现图像和视频显示。它正在工作，我对这一成就非常满意，但是必须做出一些改进，你会怎样？建议改进以下代码：

显示我使用此代码的图片：

<div style="float: none; margin: auto auto 30px auto  ;height: 280px; width: 400px; ">
    <div id="imageContainer">
        <img src="~/Images/@Html.Raw(Model.ImagePath)"  />
    </div>
</div>

在我没有提供路径的情况下，此容器保持空白但仍然可见为带有图像图标的页面上的空块，表示图像假设在这里...我怎么能摆脱它，如果我不想在这个视图中显示图片？

与视频容器相同的情况，我只是使用嵌入式YouTube链接作为Videolink视频：

 <iframe src=@Html.Raw(Model.VideoLink) width="560" height="315" frameborder="1" align="middle" display:block style="margin:auto auto 30px auto"></iframe>

如果我提供Videolink - 它工作正常，如果我不这样做，我有一个容器显示错误。如果没有输入，有没有办法简单地隐藏这些容器？

我会告诉你我设置它的方式，这一切都在一个班级Media

 public class Media
    {
        public int Id { get; set; }
        public string title { get; set; }
        [Required, StringLength(512)]
        public string description { get; set; }
        [Required]
        [AllowHtml]
        public string body { get; set; }
        public string ImagePath { get; set; }
        public string VideoLink { get; set; }
        public string Source { get; set; }
        public TagsEnum TagsEnum { get; set; }
        [Column(TypeName = "datetime2")]
        [DisplayFormat(DataFormatString = "{0:dd MMMM , yyyy HH:mm}", ApplyFormatInEditMode = true)]
        public DateTime? NewsDate { get; set; }

    }

更新

这就是我认为应该使用Sam的建议，对吧？如果是这样，它仍然没有给出正确的结果

@if (!string.IsNullOrEmpty(b.ImagePath)) 
    { 

    }
    else
    { 
            <div style="float: right; margin: 10px 10px 25px 25px; height: 100px; width:150px">
                <div id="imageContainer">           
                     <img src="~/Images/@Html.Raw(b.ImagePath))" style='height: 100%; width: 100%;' />
                   </div>
            </div>
    }

Answer 1

@if (!string.IsNullOrEmpty(b.ImagePath)) { 
    @<div style="float: right; margin: 10px 10px 25px 25px; height: 100px; width:150px">
        <div id="imageContainer">           
             <img src="~/Images/@Html.Raw(b.ImagePath))" style='height: 100%; width: 100%;' />
        </div>
    </div>
}

iframe和图像容器代码改进MVC 5

1 个答案: