Question

背景

我在MVC网站中遇到捆绑和重定向问题。站点项目由默认路由中的桌面版本和单独区域中的移动友好主题组成。两个主题都使用捆绑配置，如下所示。

// BundleConfig.cs
using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-*"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

        bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include(
                        "~/Scripts/jquery-1.*", "~/Scripts/jquery-ui-1.*", "~/Scripts/jquery.mobile-{version}.js"));

        bundles.Add(new StyleBundle("~/Content/jquerymobile/css").Include(
                        "~/Content/jquery.mobile-{version}.css"));

        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/Site.css"));

        bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
    }
}

在Global.asax中注册的捆绑包：

// Global.asax
protected void Application_Start()
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

请注意，我使用不同的jQuery版本用于桌面（当前为3.1.1）和移动主题（当前为1.12.4），因为＆＃34;绑定不是函数＆＃34;如果使用版本3（details），jquery.mobile-1.4.5中的错误。

两个主题的布局视图如下：

桌面（使用DevExpress主题）

@using System.Web.Optimization

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

    @{
        Scripts.Render("~/bundles/jquery");
        Scripts.Render("~/bundles/jqueryval");
        Styles.Render("~/Content/css");
    }

    @Html.DevExpress().GetStyleSheets(
    new StyleSheet { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
    new StyleSheet { ExtensionSuite = ExtensionSuite.HtmlEditor },
    new StyleSheet { ExtensionSuite = ExtensionSuite.GridView },
    new StyleSheet { ExtensionSuite = ExtensionSuite.CardView },
    new StyleSheet { ExtensionSuite = ExtensionSuite.PivotGrid },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Chart },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Report },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Scheduler },
    new StyleSheet { ExtensionSuite = ExtensionSuite.TreeList },
    new StyleSheet { ExtensionSuite = ExtensionSuite.RichEdit },
    new StyleSheet { ExtensionSuite = ExtensionSuite.Spreadsheet },
    new StyleSheet { ExtensionSuite = ExtensionSuite.SpellChecker }
)
    @Html.DevExpress().GetScripts(
    new Script { ExtensionSuite = ExtensionSuite.NavigationAndLayout },
    new Script { ExtensionSuite = ExtensionSuite.HtmlEditor },
    new Script { ExtensionSuite = ExtensionSuite.GridView },
    new Script { ExtensionSuite = ExtensionSuite.CardView },
    new Script { ExtensionSuite = ExtensionSuite.PivotGrid },
    new Script { ExtensionSuite = ExtensionSuite.Editors },
    new Script { ExtensionSuite = ExtensionSuite.Chart },
    new Script { ExtensionSuite = ExtensionSuite.Report },
    new Script { ExtensionSuite = ExtensionSuite.Scheduler },
    new Script { ExtensionSuite = ExtensionSuite.TreeList },
    new Script { ExtensionSuite = ExtensionSuite.RichEdit },
    new Script { ExtensionSuite = ExtensionSuite.Spreadsheet },
    new Script { ExtensionSuite = ExtensionSuite.SpellChecker }
)
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

</head>
<body>
    <div>
    <form id="form1" enctype="multipart/form-data" method="post">
        @Html.DevExpress().Splitter(settings =>
            {
                settings.Name = "MainSplitter";
                settings.AllowResize = false;
                settings.Orientation = System.Web.UI.WebControls.Orientation.Vertical;
                settings.FullscreenMode = true;
                settings.SeparatorVisible = false;
                settings.Styles.Pane.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(0);
                settings.Styles.Pane.Paddings.Padding = System.Web.UI.WebControls.Unit.Pixel(0);
                settings.Theme = AristaHRM.Theme.SelectTheme;

                settings.Panes.Add(pane =>
                {
                    pane.Name = "Header";
                    pane.PaneStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);
                    pane.PaneStyle.CssClass = "headerPane";
                    pane.SetContent(() =>
                    {
                        Html.RenderPartial("HeaderPartialView", HeaderViewRenderMode.Full);
                    });
                });

                settings.Panes.Add(pane =>
                {
                    pane.Name = "Content";
                    pane.AutoHeight = true;
                    pane.PaneStyle.CssClass = "mainContentPane";
                    pane.MinSize = System.Web.UI.WebControls.Unit.Pixel(375);
                    pane.ScrollBars = ScrollBars.Auto;
                    pane.PaneStyle.BackColor = System.Drawing.Color.White;
                    pane.PaneStyle.BorderBottom.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1);
                    pane.SetContent(RenderBody().ToHtmlString());
                });

                settings.Panes.Add(pane =>
                {
                    pane.Name = "Footer";
                    pane.Size = System.Web.UI.WebControls.Unit.Pixel(45);
                    pane.PaneStyle.CssClass = "footerPane";
                    pane.SetContent(() =>
                    {
                        Html.RenderPartial("FooterPartialView");
                    });
                });
            }).GetHtml()
    </form>
    </div>
</body>
</html>

移动（使用jQuery移动主题）

@using System.Web.Optimization

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    @{
        @Scripts.Render("~/bundles/jquerymobile");
        @Scripts.Render("~/bundles/jqueryval");
        @Styles.Render("~/Content/themes/base/css");
        @Styles.Render("~/Content/jquerymobile/css");
    }

    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

</head>
<body>
    <div data-role="page" data-theme="b" style="overflow:scroll">
        <div data-role="header">
                <h1>Mobile HRM</h1>
        </div>
        <div data-role="header" style="text-align:center">
            @if (IsSectionDefined("Title"))
            {
                @RenderSection("Title")
            }
        </div>
        <div data-role="content" style="overflow:scroll">
            @RenderBody()
        </div>
        <div data-role="footer" style="text-align:center">
            @* this link redirects to Desktop theme as root site *@
            @Html.ActionLink("Desktop View", "Index", "Home", new { area = "" }, new { id = "button" })
        </div>
    </div>

    <script type="text/javascript">
        $(document).on('mobileinit', function () {
            $.mobile.ajaxEnabled = false;
        });

        $(document).on('pageshow', '[data-role=page]', function () {
            $(window).resize();
        });
    </script>

    @RenderSection("Scripts", required: false)
</body>
</html>

问题陈述

通过以上设置，我成功进入了网址为/Mobile/Home/Index的移动区域（请注意，移动区域索引页面使用移动布局）。但是，当我尝试通过＆＃34;桌面视图＆＃34;切换到桌面主题时链接，我在控制台中出错：

在“调试器”选项卡中检查的

是指window.execScript：

( window.execScript || function( data ) {
    window[ "eval" ].call( window, data ); // jscs:ignore requireDotNotation
})( data );

但如果我点击控制台右侧提供的错误链接（见上图），它会显示一个视图源页面，其中包含一些错误详情：

System.Web.HttpException: A potentially dangerous Request.Path value was detected from the client (&gt;).

[HttpException (0x80004005): A potentially dangerous Request.Path value was detected from the client (&gt;).]
   at System.Web.HttpRequest.ValidateInputIfRequiredByConfig() +9560004
   at System.Web.PipelineStepManager.ValidateHelper(HttpContext context) +53

如何解决此区域重定向问题？

注意：我搜索了异常详细信息（see results）中给出的消息并怀疑在重定向到根站点时提交的非法字符，但我无法弄清楚移动布局页面的哪个部分导致了问题。< / p>

Answer 1

在jQuery Mobile框架中，为了启用动画页面转换，所有指向外部页面的链接都将通过Ajax加载。框架解析链接的href以制定Ajax请求。所有这些都是由jQuery Mobile自动完成的。我认为这种机制可能是你问题的原因您可以尝试添加属性数据-ajax =＆＃34; false＆＃34;到＆＃34;桌面＆＃34;链接。它将导致整页刷新而没有动画过渡。

@Html.ActionLink("Desktop View", "Index", "Home", new { area = "",  }, new { id = "button", data_ajax = "false" })

如何解决＆＃34; ASPx没有定义＆＃34;错误变成＆＃34;潜在危险的Request.Path＆＃34;例外？

1 个答案: