2012-11-15 8 views
0

이미지 URL, 설명 및 해당 범주가 저장되는 xml 파일이 있습니다. 내 견해로는 XML 파일의 "범주 이름"에서 끌어온 드롭 다운 목록이 있는데 이제는 선택한 범주의 이미지를 표시해야합니다. 나는 한 쌍의 예인 Populate dropdown list in MVChttp://forums.asp.net/t/1580460.aspx/1을 따라왔다. 나는 드롭 다운 목록 부분이 작동하지만 이미지 url과 desctiption을 받고 붙어있어. 여기 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을 얻을하지만 어떻게 하나 개의 범주를 위해 당신은 많은이 이미지. 첫 번째 것을 원하니? 그리고 어떤 카테고리? 선택한 하나? 자바 스크립트 코딩을해야 할 것입니다. –

+0

해당 카테고리의 모든 이미지를 표시하고 싶습니다. 예 선택한 범주의 이미지를 표시하고 싶습니다. 감사합니다. –