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. 运行应用程序并获得所需的输出：