MVC 4 下拉列表格式化移动应用程序答案

【问题标题】：MVC 4 Dropdownlist formatting Mobile AppMVC 4 下拉列表格式化移动应用程序
【发布时间】：2012-12-30 10:01:36
【问题描述】：

MVC 4 的新手。

我刚开始做一个测试项目。我已成功将数据绑定到 html5 下拉列表。

我的问题是为什么我的 dd 呈现为丑陋的灰色/白色框，而不是像其他控件那样呈现为蓝色上的性感白色。

在我附上的屏幕截图中，蓝色似乎在丑陋的下方。

有谁知道如何用一个例子来操作这个？

我查看了 CSS 并有一个小提琴，但似乎无法确定与 html5 控件的连接。

public ActionResult Index()
    {
        ViewBag.Message = "My Blah";
        List<SelectListItem> Languages = new List<SelectListItem>();
        Languages.Add(new SelectListItem
        {
            Text = "English",
            Value = "1",
            Selected = true
        });
        Languages.Add(new SelectListItem
        {
            Text = "русский",
            Value = "2",
        });
        ViewData.Add("Languages", Languages);
        return View();
    }

@using Resources;
@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

@Html.DropDownList("Languages")

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink(@HomeResource.About, "About", "Home")</li>
    <li>@Html.ActionLink(@HomeResource.Contact, "Contact", "Home")</li>
</ul>

CSS 未改动

编辑代码

【问题讨论】：

我刚刚在 IE 和 Chrome 中尝试过这个......似乎 Opera 不渲染，但其他人可以。 Opera mobile 没有。

标签： c# css html asp.net-mvc-4 mobile-application

【解决方案1】：

你一定是把 CSS 搞砸了。不看代码就很难判断。

但您可以尝试以下一些步骤进行设置，然后开始：

使用 Mobile 模板创建新的 ASP.NET MVC 4 应用程序

添加视图模型：

public class MyViewModel
{
    public string Value { get; set; }
    public IEnumerable<SelectListItem> Items
    {
        get
        {
            return new[]
            {
                new SelectListItem { Value = "1", Text = "item 1" },
                new SelectListItem { Value = "2", Text = "item 2" },
                new SelectListItem { Value = "3", Text = "item 3" },
            };
        }
    }
}

更新 HomeController 以将视图模型传递给视图：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }
}

在相应的视图内渲染下拉菜单（~/Views/Home/Index.cshtml）：

@model MyViewModel

@Html.DropDownListFor(x => x.Value, Model.Items)

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>

运行应用程序并获得所需的输出：

【讨论】：