Question

我们使用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>

Answer 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
             ));

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

Answer 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")给他们

页面无法正确使用MVC和Jquery Mobile进行渲染

2 个答案: