ASP.NET MVC 3 上 jQuery Mobile 的主题分配失败

Posted 2023-05-09

【中文标题】ASP.NET MVC 3 上 jQuery Mobile 的主题分配失败

【英文标题】：Theme assignment failing for jQuery Mobile on ASP.NET MVC 3

【发布时间】：2012-04-08 23:15:53

【问题描述】：

我正在尝试使用 ASP.NET MVC 3 和 jQuery Mobile 创建一个 Web 应用程序。我要做的就是运行一个简单的页面。

我已将元、脚本和 css 引用添加到我的头部：

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="@Url.Content("~/Content/themes/mobile/jquery.mobile-1.1.0-rc.1.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.2.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.mobile-1.1.0-rc.1.js")" type="text/javascript"></script>

而我的身体很简单：

@RenderBody()

在我的索引视图中，我有基本的 jQuery 页面标记：

<div data-role="page">
    <div data-role="header">
        <h1>Page Title</h1>
    </div>
    <div data-role="content">
        <h2>@ViewBag.Message</h2>
        <p>
            To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">
                http://asp.net/mvc</a>.
        </p>
    </div>
    <div data-role="footer">
        <h4>Page Footer</h4>
    </div>
</div>

jQuery Mobile 已初始化，因为（大部分）正确的类被添加到页面/页眉/内容/页脚 div 中，但由于某种原因，它没有为主题找到正确的数据。

最终发生的事情是页面最终看起来像这样：

<div data-role="page" tabindex="0" class="ui-page ui-body-[object Object] ui-page-active" style="min-height: 965px; ">

正确的页面应该是这样的：

<div data-role="page" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 965px; ">

我什至尝试过手动声明页面主题：

<div data-role="page" data-theme="c">

但这不会改变结果。

知道为什么会这样吗？

【参考方案1】：

我刚刚遇到了同样的问题，在绞尽脑汁太久之后，我回滚到 jQuery v1.7.1 并且它起作用了。由于 1.7.2 是 5 天前刚刚发布的，我认为它可能需要更多的测试才能在 jQuery 主页上进行宣传。