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

Question

MVC 4 的新特性。

我刚刚开始一个测试元素。我已成功将数据绑定(bind)到 html5 下拉列表。

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

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

有人知道如何通过示例来操作吗？

我查看了 CSS 并有一个 fiddle ，但似乎无法指出与 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. 使用移动模板创建一个新的 ASP.NET MVC 4 应用程序

2. 添加 View 模型:

   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 以将 View 模型传递给 View :

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

4. 在相应的 View 中呈现下拉列表(~/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. 运行应用程序并获得所需的输出: