2012-11-15 73 views
0

我有一个xml文件,其中存储了图像url,说明及其类别。在我看来,我有一个下拉列表,它也从xml文件的“类别名称”中拉出来,现在我需要显示所选类别的图像。我一直在跟随几个例子Populate dropdown list in MVChttp://forums.asp.net/t/1580460.aspx/1。我得到了下拉列表部分工作,但坚持获取图像的URL和描述。从xml读取子元素

这里是我的xml文件看起来像:

<?xml version="1.0" encoding="utf-8" ?> 

<SymbolOption> 
    <Category id="1" name="categoryA"> 
     <image url="A.png" desc="image a"/> 
     <image url="B.png" desc="image b"/> 
     <image url="C.png" desc="image c"/>  
    </Category> 
    <Category id="2" name="categoryB"> 
     <image url="x.png" desc="image x"/> 
     <image url="y.png" desc="image y"/>  
    </Category> 
</SymbolOption> 

控制器:

public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      var imageFile = Server.MapPath("~/Data/ImageSource.xml"); 
      var category = 
       from symbolCategory in XDocument.Load(imageFile).Descendants("Category") 
       select new SelectListItem 
       { 
        Value = symbolCategory.Attribute("id").Value, 
        Text = symbolCategory.Attribute("name").Value 
       }; 
      var model = new SymbolCategoryViewModel 
      { 
       Categories = category 
      }; 
      return View(model);    
     } 
    } 

视图模型:

public class SymbolCategoryViewModel 
{ 
    public string Category { get; set; } 
    public IEnumerable<SelectListItem> Categories { get; set; } 
} 

查看:

@Html.DropDownListFor(x => x.Category, Model.Categories) 

<div id="displayImage"> 
    <img src="@Url.Content("~/Content/img/" + URLfromXML)"> 
    @Html.DisplayFor(image description) 
<div> 

感谢您的帮助。

回答

1

我没有解决你的问题,但它不是最好的解决办法,因为你没有指定你会喜欢它做。

控制器:

public ActionResult Index() 
    { 
     List<MySelectListItem> category = 
      (from symbolCategory in XDocument.Load("d:\\data.xml").Descendants("Category") 
      select new MySelectListItem 
      { 
       Value = symbolCategory.Attribute("id").Value, 
       Text = symbolCategory.Attribute("name").Value, 
       Images = GetImgUrl(symbolCategory.Descendants("image")) 
      }).ToList(); 
     return View(category); 
    } 

    private List<ImageUrl> GetImgUrl(IEnumerable<XElement> list) 
    { 
     List<ImageUrl> retVal = new List<ImageUrl>(); 
     foreach (XElement el in list) 
     { 
      ImageUrl url = new ImageUrl(); 
      url.Description = el.Attribute("desc").Value; 
      url.Url = el.Attribute("url").Value; 
      retVal.Add(url); 
     } 
     return retVal; 
    } 

型号

public class MySelectListItem 
{ 
    public string Value { set; get; } 
    public string Text { set; get; } 
    public List<ImageUrl> Images { set; get; } 
} 
public class ImageUrl 
{ 
    public string Url { set; get; } 
    public string Description { set; get; } 
} 

查看

@{ 
    Layout = null; 
} 
@model List<MySelectListItem> 
<!DOCTYPE html> 

<html> 
<head> 
    <title>Index</title> 
    <script type="text/javascript"> 
     var images = []; 
     @foreach (var item in Model) 
     { 
      <text>images["@item.Value"] = 
      [ 
      @{int i=0;} 

       @foreach(var img in item.Images){ 
       <text>{url : "@img.Url",desc:"@img.Description"},</text> 
       i++; 

     }] 
     </text> 
     } 


     function changeImgs(obj) { 
      var img = images[obj.value]; 
      var divImg = document.getElementById("images"); 
      divImg.innerHTML = ""; 
      var html = ""; 
      for (var i = 0; i < img.length; i++) { 
       html += img[i].desc + "<br />" + "<img src='" + img[i].url + "' /><br/>"; 
      } 
      divImg.innerHTML = html; 
     } 
    </script> 
</head> 
<body> 

    <select onchange="changeImgs(this)"> 
     @foreach(var item in Model) 
     { 
      <option value="@item.Value">@item.Text</option> 

     } 
    </select> 
    <div id="images"> 

    </div> 
</body> 
</html> 
+0

感谢,我如何才能鉴于 –

+0

的形象描述和URL,但对于一类你有很多图片。你只想要第一个吗?和哪个类别?选定的一个?你将不得不做一些JavaScript编码。 –

+0

我想显示该类别的所有图像。是的,我想显示所选类别的图像。 谢谢 –