使用 MVC 和 Jquery Mobile 无法正确呈现页面答案

【问题标题】：Page not rendering Properly using MVC and Jquery Mobile使用 MVC 和 Jquery Mobile 无法正确呈现页面
【发布时间】：2014-06-21 10:16:03
【问题描述】：

我们使用 MVC 和 Jquery mobile 开发 Web 应用程序。除了页面渲染，一切都很好。当我们使用慢速互联网连接进行测试时，样式会被一一加载。我们分析了很多，但找不到原因。是否指定的css和jquery顺序错了？现在我需要在 dom 中加载所有元素后显示页面。下面是我的登录页面代码。它一一呈现样式，而不是我需要在 DOM 中加载所有元素后显示页面。请指导我。

@model Highway905MobileApplication.Models.User

@{
    Layout = null;
}


@{
    ViewBag.Title = "Login";
}

<!DOCTYPE html>

<style>
    #dvLoginButton .ui-btn {
    font-size:22px !important;
    }
</style>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hwy905Mobile</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="~/Content/Hwy905Custom.css" rel="stylesheet" />
    <link href="~/Content/Css/my-custom.min.css" rel="stylesheet" />
    <link href="~/Content/Css/jquery.mobile.icons.min.css" rel="stylesheet" />
    <link href="~/jquery.mobile-1.4.2(1)/jquery.mobile.structure-1.4.2.min.css" rel="stylesheet" />
    <link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/site")" rel="stylesheet" type="text/css" />    
</head>
<body>


        <div class="loginimage" data-role="page" data-theme="none">
            <div class="LoginPopUpPosition">
                <div class="LoginBackground">
                    <div data-role="header" class="LoginHeaderStyle">
                        <span class="LoginHeaderFont">HWY905 WMS <span class="TradeWork">Mobile</span></span>
                    </div>
                    <div class="LoginPoPStyle">
                        @using (Html.BeginForm("LoginClient", "Login", FormMethod.Post, new { autocomplete = "off" }))
                        {
                        <div class="ui-grid-a LoginPopUpTop" >
                           <div class="ui-block-a LoginPicImageWrapper"><img src="~/Content/HwyImages/ClientCode.png" class="LoginImageStyle"/></div>
                            <div class="ui-block-b LoginTextBox">@Html.TextBoxFor(m => m.ClientCode, new { @class = "myInputStyle", @placeholder = "Client code", autocomplete = "off" , @id="txtClientCode" ,@border_radius="0.1em !important" })
                           </div>
                            <div class="ui-block-a LoginPicImageWrapper"><img src="~/Content/HwyImages/user.png" class="LoginImageStyle"/></div>
                             <div class="ui-block-b LoginTextBox"> @Html.TextBoxFor(m => m.UserID, new { @class = "myInputStyle", @placeholder = "User ID", @autocomplete = "off" , @id="txtUserID" ,  @border_radius="0.1em !important" })</div> 
                             <div class="ui-block-a LoginPicImageWrapper"><img src="~/Content/HwyImages/keys.png" class="LoginImageStyle"/></div>
                              <div class="ui-block-b LoginTextBox">   @Html.PasswordFor(m => m.Password, new { @class = "myInputStyle", @placeholder = "Password", @autocomplete = "off" , @id="txtPassword" ,  @border_radius="0.1em !important"}) </div>
                           </div>

                        <div class="LoginMessage ErrorMessageStyle">
                            @ViewBag.ErrorMessage
                        </div>
                        <div data-role="content" class="LoginButtonWrapper"  id="dvLoginButton">
                            <input type="submit" value="LOGIN" id="btnLogin" data-theme="c" class="Button"/>
                        </div>
                        }

                    </div>
                </div>
            </div>
        </div>

    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jquerymobile")
    @Scripts.Render("~/bundles/Hwy905Custom")
    @Scripts.Render("~/bundles/ToastMessage")
    @Styles.Render("~/Content/ToastMessage")
</body>
</html>

【问题讨论】：

标签： jquery asp.net-mvc asp.net-mvc-4 jquery-mobile

【解决方案1】：

首先，我会将您的自定义样式放在您的第三方样式之后。这将覆盖他们文件中的更改，而不是相反。

我确实相信 css 文件是异步下载的，并且由于您有这么多 css 文件，因此很可能连接缓慢，无法下载 css 文件。

我建议您将样式捆绑在一起并缩小它们。这将创建一个包含所有样式的文件，然后缩小将减小它的大小。这将允许单个 http 请求获取所有样式而不是多个样式。

使用 MVC 包：

bundles.Add(new ScriptBundle("~/bundles/main").Include(
             "~/Content/Hwy905Custom.css",
             "~/Content/Css/my-custom.min.css"
             //So on and so forth
             ));

请注意，如果机器动力不足，您可能会看到元素渲染问题。

【讨论】：

【解决方案2】：

在 BundleConfig.cs 中添加你所有的 CSS 文件，然后在你的视图中渲染它们

bundles.Add(new ScriptBundle("~/bundles/MyNewCss").Include(
         "~/Content/Hwy905Custom.css",
         "~/Content/Css/my-custom.min.css"
         "~/Content/Css/jquery.mobile.icons.min.css"
         "~/jquery.mobile-1.4.2(1)/jquery.mobile.structure-1.4.2.min.css"
         ));

将这些保留在您的 HTML 标签之外

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquerymobile")
@Scripts.Render("~/bundles/Hwy905Custom")
@Scripts.Render("~/bundles/ToastMessage")
@Styles.Render("~/Content/ToastMessage")

添加

@Styles.Render("~/Content/MyNewCss") 给他们

【讨论】：