在表单中更新时不显示图像 [英] image does not display when updated in a form
问题描述
Hello fellas，
我正在关注ASP.NET的MvcMusicStore教程，到目前为止一直很好，除了我在相册封面上没有更新时遇到一些问题。基本上，有一个带有音乐列表表的商店页面。此表具有编辑，删除和详细信息选项。当您编辑时，它会转到您可以添加相册网址的表单。此专辑网址应传递到另一个显示所有音乐专辑的视图。 （包括显示前5张专辑的索引页面）
这是如何构建的
控制器编辑GET和POST部分
// GET：/ StoreManager / Edit / 5
public ActionResult Edit（ int id）
{
专辑专辑= db.Albums.Find（id）;
ViewBag.GenreId = new SelectList（db.Genres， GenreId， 名称，album.GenreId）;
ViewBag.ArtistId = new SelectList（db.Artists， ArtistId， 名称，album.ArtistId）;
return 查看（专辑）;
}
//
// POST：/ StoreManager / Edit / 5
[HttpPost]
public ActionResult编辑（ int Id，专辑专辑）
{
if （ModelState.IsValid）
{
album.AlbumId = Id;
db.Entry（album）.State = EntityState.Modified;
db.SaveChanges（）;
return RedirectToAction（ Index）;
}
ViewBag.GenreId = new SelectList（db.Genres， < span class =code-string> GenreId， 名称，专辑。 GenreId）;
ViewBag.ArtistId = new SelectList（db.Artists， ArtistId， 名称，album.ArtistId）;
return 查看（专辑）;
} Hello fellas, 这篇关于在表单中更新时不显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
这是编辑视图
< pre lang =c＃> @ model WebsiteManager.Models.Album
@ {
ViewBag.Title = 编辑;
}
< h2>编辑< / h2 >
@using（Html.BeginForm（））{
@ Html.AntiForgeryToken（）
@Html .ValidationSummary（ true ）
< fieldset>
< legend>相册< / 图例 >
@ Html.HiddenFor（model = > model.AlbumId）
< div class = editor-label >
@ Html.LabelFor（model = > model.GenreId，< span class =code-string> 类型）
< / div >
< div class = editor-field > ;
@ Html.DropDownList（ GenreId， String .Empty）
@ Html.ValidationMessageFor（model = > model.GenreId）
< / div >
< div class = editor-label >
@ Html.LabelFor （model = > model.ArtistId， 艺术家 ）
< / div >
< div class = editor-field >
@ Html.DropDownList（ ArtistId， String .Empty）
@ Html.ValidationMessageFor（model = > model.ArtistId）
< / div >
< div < span class =code-keyword> class = editor-label >
@ Html.LabelFor（model = > model.Title）
< span class =code-keyword>< / div >
< div class = editor-field >
@ Html.EditorFor（model = > model.Title）
@ Html.ValidationMessageFor（model = > model.Title）
< / div >
< div class = editor-label >
@ Html.LabelFor（model = > model.Price）
< / div >
< div class = editor-field >
@ Html.EditorFor（ model = > model.Price）
@ Html.ValidationMessageFor（model = > model.Price）
< / div >
< div class = editor-label >
@ Html.LabelFor（model = > model.AlbumArtUrl）
< / div >
< div < span class =code-keyword> class = editor-field >
@ Html.EditorFor（model = > model.AlbumArtUrl）
@ Html.ValidationMessageFor（model = > model.AlbumArtUrl）
< / div >
< p>
< input type = submit 值 = 保存 />
< / p >
< / fieldset >
}
< div>
@ Html.ActionLink（ 返回列表， 索引）
< / div >
@section脚本{
@ Scripts.Render（ 〜/ bundles / jqueryval）
}
这是细节视图。据说，如果正在观看的字段包含专辑封面，则应在此处显示。到目前为止，所有传递的都是封面专辑本身的URL，而不是图像。
@ model WebsiteManager.Models.Album
>
@ {
ViewBag.Title = 详情;
}
< h2>详细信息< / h2 >
< fieldset>
< legend>相册< / 图例 >
< div class = < span class =code-string> display-label
@ Html.DisplayNameFor（model = > model.Genre.Name）
< / div >
< div class = display-field >
@ Html.DisplayFor（model = > model.Genre.Name）
< / div >
< div class = display-label >
@ Html.DisplayNameFor（model = > model.Artist.Name）
< / div >
< div class = display-field >
@ Html.DisplayFor（model = > model.Artist.Name ）
< / div >
< div class = display-label >
@ Html.DisplayNameFor（mo del = > model.Title）
< / div >
< div class = display-field >
@ Html.DisplayFor（model = > model.Title）
< / div >
< div class = display-label > ;
@ Html.DisplayNameFor（model = > model.Price）
< / div >
& lt; div class = display-field >
@ Html.DisplayFor（model = > model.Price）
< / div >
< div class = display-label >
@ Html.DisplayNameFor（model = > model.AlbumArtUrl）
< / div >
< div class = display-field >
@ Html.Displ ayFor（model = > model.AlbumArtUrl）
< / div >
< / fieldset >
< p>
@ Html.ActionLink（ 编辑， 编辑， new {id = Model.AlbumId}）|
@ Html.ActionLink（ 返回列表， 索引）
< / p >
Album类，如果它有任何帮助
使用系统;
使用 System.Collections.Generic;
使用 System.Linq;
使用 System.Web;
使用 System.ComponentModel;
使用 System.ComponentModel.DataAnnotations;
使用 System.Web.Mvc;
namespace WebsiteManager.Models
{
[Bind（Exclude = AlbumId）]
public class 专辑
{
[ScaffoldColumn（ false ）]
public int AlbumId { get ; set ; }
[DisplayName（ 类型）]
public int GenreId { get ; set ; }
[DisplayName（ 艺术家）]
public int ArtistId { get ; set ; }
[必需（ErrorMessage = 需要相册标题）]
[StringLength（ 160 ）]
public string 标题{ get ; set ; }
[必需（ErrorMessage = 价格是必需的）]
[范围（ 0 。 01 ， 100 。 00 ，
ErrorMessage = 价格必须是在0.01到100.00之间）]
public decimal 价格{获得; set ; }
[DisplayName（ 专辑艺术网址）]
[StringLength（ 1024 ）]
public string AlbumArtUrl { get ; set ; }
public virtual 流派类型{ get < /跨度>; set ; }
public virtual 艺术家艺术家{ get < /跨度>; set ; }
public virtual List< OrderDetail> OrderDetails { get ; set ; }
}
}
最后是索引表单，显示对前5张专辑图片的调用
< div id = promotion > < / div > < br />烧烤的
< h3> Fresh < / h3 >
< ul id = album-list >
@foreach（ var 相册 型号）
{
< li>< a href = @ Url.Action（详细信息 ， 存储 ，new {id = album.AlbumId}）>< img alt = @ album.Title src = @ album.AlbumArtUrl /> < span> @ album.Title < / span > < / a > < / li >
}
< / ul >
我感谢任何帮助。我和另一位工程师一直在集思广益，但还没有。
如果你想看到网站直播并测试它去
djfitz.azurewebsites.net
谢谢正如我们之前讨论过的更新问题现在已经解决了。
但是根据问题再次显示图像问题。
所以，我刚刚访问过你的网站并玩过它。
当我查看专辑及其详细信息显示的页面的html源时，我发现已更新的图像Url已添加到图像标记中，但由于路径不正确而无法加载该图像。
然后我将一个在线图像更新为一个相册封面，然后检查它。
它正在工作。
因此，请检查您正在更新相册封面的网址，无论它们是否正确。
I am following the MvcMusicStore tutorial from ASP.NET and so far so good, except I am having some issues with the Album Covers not updating. basically, there is a Store page with a Music List table. This table has edit, delete, and details options. When you "edit" it takes you to a form where you can add an Album URL. This album URL should be passed to another view where all the music albums are displayed. (to include the index page where the top 5 albums are also displayed)
This is how it is structured
Controller Edit GET and POST portions
// GET: /StoreManager/Edit/5
public ActionResult Edit(int id)
{
Album album = db.Albums.Find(id);
ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
return View(album);
}
//
// POST: /StoreManager/Edit/5
[HttpPost]
public ActionResult Edit(int Id, Album album)
{
if (ModelState.IsValid)
{
album.AlbumId = Id;
db.Entry(album).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.GenreId = new SelectList(db.Genres, "GenreId", "Name", album.GenreId);
ViewBag.ArtistId = new SelectList(db.Artists, "ArtistId", "Name", album.ArtistId);
return View(album);
}
This is the Edit View
@model WebsiteManager.Models.Album
@{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>Album</legend>
@Html.HiddenFor(model => model.AlbumId)
<div class="editor-label">
@Html.LabelFor(model => model.GenreId, "Genre")
</div>
<div class="editor-field">
@Html.DropDownList("GenreId", String.Empty)
@Html.ValidationMessageFor(model => model.GenreId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ArtistId, "Artist")
</div>
<div class="editor-field">
@Html.DropDownList("ArtistId", String.Empty)
@Html.ValidationMessageFor(model => model.ArtistId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Title)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Title)
@Html.ValidationMessageFor(model => model.Title)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.AlbumArtUrl)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.AlbumArtUrl)
@Html.ValidationMessageFor(model => model.AlbumArtUrl)
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
This is the Detail View. Supposedly, if the field being viewed had an album cover included, it should show here. So far all it is passed is the URL of the cover album itself, not the image.
@model WebsiteManager.Models.Album
@{
ViewBag.Title = "Details";
}
<h2>Details</h2>
<fieldset>
<legend>Album</legend>
<div class="display-label">
@Html.DisplayNameFor(model => model.Genre.Name)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Genre.Name)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.Artist.Name)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Artist.Name)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.Title)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Title)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.Price)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.Price)
</div>
<div class="display-label">
@Html.DisplayNameFor(model => model.AlbumArtUrl)
</div>
<div class="display-field">
@Html.DisplayFor(model => model.AlbumArtUrl)
</div>
</fieldset>
<p>
@Html.ActionLink("Edit", "Edit", new { id=Model.AlbumId }) |
@Html.ActionLink("Back to List", "Index")
</p>
The Album class in case it is of any help
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace WebsiteManager.Models
{
[Bind(Exclude = "AlbumId")]
public class Album
{
[ScaffoldColumn(false)]
public int AlbumId { get; set; }
[DisplayName("Genre")]
public int GenreId { get; set; }
[DisplayName("Artist")]
public int ArtistId { get; set; }
[Required(ErrorMessage = "An Album Title is required")]
[StringLength(160)]
public string Title { get; set; }
[Required(ErrorMessage = "Price is required")]
[Range(0.01, 100.00,
ErrorMessage = "Price must be between 0.01 and 100.00")]
public decimal Price { get; set; }
[DisplayName("Album Art URL")]
[StringLength(1024)]
public string AlbumArtUrl { get; set; }
public virtual Genre Genre { get; set; }
public virtual Artist Artist { get; set; }
public virtual List<OrderDetail> OrderDetails { get; set; }
}
}
And finally the index form where it shows the call to the top 5 album images
<div id="promotion"></div><br />
<h3>Fresh off the grill</h3>
<ul id="album-list">
@foreach (var album in Model)
{
<li><a href="@Url.Action("Details", "Store", new { id = album.AlbumId })"><img alt="@album.Title" src="@album.AlbumArtUrl" /> <span>@album.Title</span></a></li>
}
</ul>
I appreciate any help. ME and another engineer have been brainstorming but nothing yet.
if you want to see the site live and test it go to
djfitz.azurewebsites.net
thanksAs we discussed about the update issue before and it is now solved.
But again there was an issue on display of image as per the question.
So, I just visited your website and played with it.
When I viewed the html source of the pages where Album and its details are displaying, I found that the updated image Url is added to the image tag, but it is failed to load that image due to incorrect path.
Then I just updated one online image to one of the Album cover and then checked it.
It is working.
So, please check the Urls you are updating for the Album covers, whether they are correct or not.
