c# - MVC 4 下拉列表格式化移动应用程序

Question

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 保持不变

编辑代码

Answer 1

你一定是把 CSS 搞砸了。没有你看到你的代码很难说。

但是这里有一些步骤，您可以尝试设置并开始：

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

2. 添加视图模型：

   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" },
               };
           }
       }
   }
   

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

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

4. 在相应的视图中渲染下拉列表 ( ~/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>
   

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