Question

我有一个xml文件，其中存储了图像网址，描述及其类别。在我看来，我有一个下拉列表，它也从xml文件的“类别名称”中拉出，现在我需要显示所选类别的图像。我一直在关注几个例子Populate dropdown list in MVC和http://forums.asp.net/t/1580460.aspx/1。我得到了下拉列表部分工作，但坚持获取图像网址和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>

感谢您的帮助。

Answer 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>

从xml中读取子元素

1 个答案: