0

画像の URL、説明、およびそのカテゴリが保存されている xml ファイルがあります。私の見解では、xml ファイルの「カテゴリ名」からも引き出されるドロップダウン リストがあり、選択したカテゴリの画像を表示する必要があります。私は、MVCとhttp://forums.asp.net/t/1580460.aspx/1でドロップダウン リストを作成するいくつかの例に従ってきました。ドロップダウンリストの部分は機能しましたが、画像のURLと説明を取得するのに行き詰まりました。

私の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>

助けてくれてありがとう。

4

1 に答える 1

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>
于 2012-11-15T16:42:30.850 に答える