0

我有一个 xml 文件，其中存储了图像 url、描述及其类别。在我看来，我有一个下拉列表，它也是从 xml 文件的“类别名称”中提取的，现在我需要显示所选类别的图像。我一直在关注MVC和http://forums.asp.net/t/1580460.aspx/1中的几个示例填充下拉列表。我得到了下拉列表部分的工作，但卡住了图像 url 和 desctiption。

这是我的 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 回答