[英]How to use View Models in MVC to display multiple model in razor view?
在完成了如此多的研發之后,我才開始與mvc一起工作,但是現在我陷入了這樣的局面:我不知道如何創建一個視圖模型來顯示來自兩個不同模型的數據。
模型1
public class Product
{
public int ProductId { get; set; }
[Required(ErrorMessage = "Enter Product name")]
[StringLength(160)]
public string ProductName { get; set; }
[Required(ErrorMessage = "Enter Product Description")]
[StringLength(500)]
public string ProductDescription { get; set; }
public Product() { this.AddDate = DateTime.Now; }
public DateTime AddDate { get ; private set; }
[Required(ErrorMessage = "Select Category")]
[Display(Name="Category")]
public string Category { get; set; }
[Required(ErrorMessage = "Location")]
public bool location { get; set; }
}
模型2
public class ProductPicture
{
public int id { get; set; }
public int ProductId { get; set; }
[Required(ErrorMessage ="Please Select Picture")]
public string pictureurl { get; set; }
}
通過使用視圖模型,如果每個產品只有一個圖像,但是由於有多個圖像,我可以得到顯示,那么我如何獲取第一個圖像或圖像列表並將其顯示為剃刀視圖。
下面是我的控制器,並且視圖都很混亂:|
public ActionResult Details(long? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
ProductViewModel product = new ProductViewModel();
Mapper.CreateMap<Product, ProductViewModel>().ForMember(m => m. );
var pro = Mapper.Map< ProductViewModel>(product);
product.ProductPictures = db.ProductPictures.Where(m => m.ProductId == id);
// product.Products = db.Products.Where(m=>m.ProductId==id);
//Product product = db.Products.Find(id);
if (product == null)
{
return HttpNotFound();
}
return View(product);
}
詳細資料檢視
@model sullivan.Models.ProductViewModel
@{
ViewBag.Title = "Details";
}
<h2>Details</h2>
<div>
<div class="col-sm-7">
<div class="product-information">
<!--/product-information-->
<img src="images/product-details/new.jpg" class="newarrival" alt="" />
<h2>@Html.DisplayFor(model => model.ProductName)</h2>
<p>
@Html.DisplayFor(model => model.ProductDescription)</p>
<img src="images/product-details/rating.png" alt="" />
<a href=""><img src="images/product-details/share.png" class="share img-responsive" alt="" /></a>
</div><!--/product-information-->
</div>
<p>
@Html.ActionLink("Edit", "Edit", new { id = Model.ProductId }) |
@Html.ActionLink("Back to List", "Index")
</p>
</div>
<div id="similar-product" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
@foreach (var Picture in Model.ProductPictures)
{
<a href=""><img src="~/images/wallimages/imagepath/thumb2_@Picture.pictureurl" alt=""></a>
}
</div>
</div>
<!-- Controls -->
<a class="left item-control" href="#similar-product" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right item-control" href="#similar-product" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
如在剃刀視圖中,我可以在底部分別獲取圖像列表,但我只需要第一張圖像和產品的其他數據,我該如何實現呢?
假設您在ProductViewModel
具有string
類型的ProductImage
屬性。
public class ProductViewModel
{
public string ProductImage { set;get;}
//Other existing properties
}
在您的操作方法中,您可以在產品圖片集合上調用First()
方法(如果存在至少一個)
var product = new ProductViewModel();
var pictures = db.ProductPictures.Where(m => m.ProductId == id);
if(pictures!=null && pictures.Any())
{
product.ProductImage = pictures.First(x=>x.pictureurl);
}
或如果視圖模型中已經具有一個collection屬性來存儲產品圖像網址列表,但又不想創建一個新屬性來存儲第一個圖像,則只需在剃刀中對該集合調用First()方法即可視圖
<h1>Product Image</h1>
@if(Model.ProductPictures.Any())
{
<div>
<img src="~/images/wallimages/imagepath/thumb2_@Model.ProductPictures.First().pictureurl" />
</div>
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.