【问题标题】:Showing Image on Index.cshtml page with Entityframework使用 Entityframework 在 Index.cshtml 页面上显示图像
【发布时间】:2014-10-14 11:08:04
【问题描述】:

我有这个:

控制器:

[HttpPost]
        public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
        {

            if (file != null && file.ContentLength > 0)
            {


                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // store the file inside ~/App_Data/uploads folder
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                path = Url.Content(Path.Combine("~/~/App_Data/uploads", fileName));
                file.SaveAs(path);
            }



            if (ModelState.IsValid)
            {
                string username = User.Identity.Name;
                // Get the userprofile
                UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields
                user.Image = new byte[file.ContentLength];
                file.InputStream.Read(user.Image, 0, file.ContentLength);


                user.FirstName = userprofile.FirstName;
                user.LastName = userprofile.LastName;
                user.Email = userprofile.Email;
                user.Motto = userprofile.Motto;

                user.PlaceOfBirth = userprofile.PlaceOfBirth;
                user.HowManyBikes = userprofile.HowManyBikes;
                user.BesideYourBeth = userprofile.BesideYourBeth;
                user.NicestRide = userprofile.NicestRide;
                user.WorstRide = userprofile.WorstRide;
                user.AmountKmPerYear = userprofile.AmountKmPerYear;
                user.AverageSpeed = userprofile.AverageSpeed;
                user.AbleToChatWhileRiding = userprofile.AbleToChatWhileRiding;
                user.PhoneNumber = userprofile.PhoneNumber;

                db.Entry(user).State = EntityState.Modified;

                db.SaveChanges();

                return RedirectToAction("Edit", "Account");
            }

            return View(userprofile);
        }

并查看:

@foreach (var item in Model)
            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.LastName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.FirstName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Motto)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.PlaceOfBirth)
                                    </td>

                                    <td><img width="200px" height="150px" src="@Url.Content(item.Image)" /></td>



                                    <td>

                                        @Html.ActionLink("Details", "Details", new { id = item.Id })

                                    </td>
                                </tr>
            }

                        </table>
                    </div>
                </div>
                <br />
                Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

                @Html.PagedListPager(Model, page => Url.Action("Index",
    new { page, sortOrder = ViewBag.CurrentSort, currentFilter = ViewBag.CurrentFilter }))

所以我想在索引文件中显示图像,作为缩略图。图像已经保存在数据库中,我尝试像这样显示图像: &lt;td&gt;&lt;img width="200px" height="150px" src="@Url.Content(item.Image)" /&gt;&lt;/td&gt; 但这不起作用。

感谢您的帮助

我有索引,像这样:

 @foreach (var item in Model)
                            {
                                <tr>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.LastName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.FirstName)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.Motto)
                                    </td>
                                    <td>
                                        @Html.DisplayFor(modelItem => item.PlaceOfBirth)
                                    </td>

                                    <td>
                                        <img width="200" height="150" src="@Url.Action("GetImage", "Account", new { item.Id })">
                                    </td>



                                    <td>

                                        @Html.ActionLink("Details", "Details", new { id = item.Id })

                                    </td>
                                </tr>
            }

但我在 chrome 中查看的尺寸是:img 74x22,而且也很奇怪,因为图像来自:

img {
background-image: url('../Images/Large.JPG');
background-repeat: no-repeat;
background-position: top;
background-size: cover;
width: 100%;
height: 100%;

因此,对于每个配置文件,图像都是相同的,但图像存储在:~/App_Data/uploads。

好吧,我在 site.css 中取消了 img{} 的注释,现在我看到了正确的尺寸,但是图像损坏了

GET http://localhost:41787/Account/GetImage/34 500 (Internal Server Error) Account:179
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. 

accountController 现在看起来像这样:

[HttpPost]
        public ActionResult Edit(UserProfile userprofile, HttpPostedFileBase file)
        {

            if (file != null && file.ContentLength > 0)
            {


                // extract only the fielname
                var fileName = Path.GetFileName(file.FileName);
                // store the file inside ~/App_Data/uploads folder
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
               // path = Url.Content(Path.Combine("~/~/App_Data/uploads", fileName));
                file.SaveAs(path);
            }



            if (ModelState.IsValid)
            {
                string username = User.Identity.Name;
                // Get the userprofile
                UserProfile user = db.userProfiles.FirstOrDefault(u => u.UserName.Equals(username));

                // Update fields
                user.Image = new byte[file.ContentLength];
                file.InputStream.Read(user.Image, 0, file.ContentLength);
                user.ImageMimeType = file.ContentType;


                user.FirstName = userprofile.FirstName;
                user.LastName = userprofile.LastName;
                user.Email = userprofile.Email;
                user.Motto = userprofile.Motto;

                user.PlaceOfBirth = userprofile.PlaceOfBirth;
                user.HowManyBikes = userprofile.HowManyBikes;
                user.BesideYourBeth = userprofile.BesideYourBeth;
                user.NicestRide = userprofile.NicestRide;
                user.WorstRide = userprofile.WorstRide;
                user.AmountKmPerYear = userprofile.AmountKmPerYear;
                user.AverageSpeed = userprofile.AverageSpeed;
                user.AbleToChatWhileRiding = userprofile.AbleToChatWhileRiding;
                user.PhoneNumber = userprofile.PhoneNumber;

                db.Entry(user).State = EntityState.Modified;

                db.SaveChanges();

                return RedirectToAction("Edit", "Account");
            }

            return View(userprofile);
        }

        public FileContentResult GetImage(int itemId)
        {
            UserProfile user = db.userProfiles.FirstOrDefault(u => u.Id.Equals(itemId));
            if (user != null)
                return File(user.Image, user.ImageMimeType);
            else return null;
        }

和视图(Index.cshtml):

@foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.LastName)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.FirstName)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Motto)
                                </td>
                                <td>
                                    @Html.DisplayFor(modelItem => item.PlaceOfBirth)
                                </td>

                                <td>
                                    <img width="200" height="150" src='@Url.Action("GetImage", "Account", new { item.Id  }, Request.Url.Scheme)'>
                                </td>



                                <td>

                                    @Html.ActionLink("Details", "Details", new { id = item.Id })

                                </td>
                            </tr>
        }

但这是正确的吗??

<td>
                                        <img alt="" src="@Url.Action("GetImage", "Account", new {item.Id })" width="200" height="150"  class="Image" />
                                    </td>

【问题讨论】:

    标签: c# asp.net entity-framework razorengine


    【解决方案1】:

    而不是

    <img width="200px" height="150px" src="@Url.Content(item.Image)" />
    

    <img width="200px" height="150px" src="@Url.Action("GetImage", "Account", new { item.Id })
    

    在您的帐户控制器中添加此方法:

    public FileContentResult GetImage(int itemId)
    {
    UserProfile user = db.userProfiles.FirstOrDefault(u => u.Id.Equals(itemId));
    if(user != null)
    return File(user.Image, user.ImageMimeType);
    else return null;
    }
    

    您必须向用户表 ImageMimeType 添加一个新字段。

    在这个部分

    // Update fields
    user.Image = new byte[file.ContentLength];
    file.InputStream.Read(user.Image, 0, file.ContentLength);
    

    添加

    user.ImageMimeType = file.ContentType;
    

    就是这样。

    希望对你有帮助。

    【讨论】:

    • 感谢您的快速回复 Marius,但是 ImageMimeType 的类型是什么?我在 Model(UserProfile) public string ImageMimeType { get;放; }
    • 但是图片坏了,不可见
    • 检查我的答案,你必须在编辑操作中添加这行代码 user.ImageMimeType = file.ContentType;现有的注册将不起作用,但如果您添加新的代码行。
    • 我改进了一些东西: 但仍然看不到图像:加载资源失败:服务器响应状态为 500 (Internal Server Error) 为什么找不到图像?
    • 使用调试检查 GetImage 并查看它是否返回应有的结果。
    猜你喜欢
    • 1970-01-01
    • 2018-07-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-13
    • 2019-02-21
    • 1970-01-01
    • 2017-11-11
    相关资源
    最近更新 更多