jquery移动多页MVC4_Jquery_Asp.net Mvc_Jquery Mobile_Razor

jquery移动多页MVC4

jquery asp.net-mvc jquery-mobile razor

jquery移动多页MVC4,jquery,asp.net-mvc,jquery-mobile,razor,Jquery,Asp.net Mvc,Jquery Mobile,Razor,我只是想用jquerymobile做一个简单的多页面，但缓存（我想）把它搞砸了这是我的布局：\u MobileSwipe.Mobile.cshtml <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <meta charset="utf-8" /> <title>@ViewBag.Tit

我只是想用jquerymobile做一个简单的多页面，但缓存（我想）把它搞砸了

这是我的布局：\u MobileSwipe.Mobile.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <meta charset="utf-8" />
    <title>@ViewBag.Title </title>
    @Html.MetaAcceptLanguage()
    <script src="@Url.Content("~/Scripts/kendo/2012.3.1121/jquery.min.js")"></script>
    @Scripts.Render("~/bundles/jquerymobile")
    @Styles.Render("~/Content/Mobile/css")
    @Styles.Render("~/Content/jquerymobile/css")
</head>
<body>
    @RenderBody()
</body>
</html>


<script>
    $(document).ready(function () {
        $.ajaxSetup({ cache: false });

    });
</script>


@视图包。标题
@Html.MetaAcceptLanguage（）
@Scripts.Render（“~/bundles/jquerymobile”）
@style.Render（“~/Content/Mobile/css”）
@style.Render（“~/Content/jquerymobile/css”）
@RenderBody（）
$（文档）.ready（函数（）{
$.ajaxSetup（{cache:false}）；
});

这是我的观点：

 @model List<ExtremeOnline.Models.BookingDays>

@{
    ViewBag.Title = "Välj din tid";
    Layout = "~/Views/Shared/_MobileSwipe.Mobile.cshtml";
}

<div data-role="page" id="1" class="ui-page">
    page 1
</div>
<div data-role="page" id="2" class="ui-page">
    page 2
</div>

 <script>
        $('div.ui-page').live("swipeleft", function () {
            var nextpage = $(this).next('div[data-role="page"]');
            // swipe using id of next page if exists
            if (nextpage.length > 0) {
                $.mobile.changePage(nextpage, 'slide');
            }
        });
        $('div.ui-page').live("swiperight", function () {
            var prevpage = $(this).prev('div[data-role="page"]');
            // swipe using id of next page if exists
            if (prevpage.length > 0) {
                $.mobile.changePage(prevpage, 'slide', true);
            }
        });

    </script>

@型号列表
@{
ViewBag.Title=“Välj din tid”；
Layout=“~/Views/Shared/_MobileSwipe.Mobile.cshtml”；
}
第1页
第2页
$（'div.ui-page'）.live（“swipeleft”，函数（）{
var nextpage=$（this.next（'div[data role=“page”]）；
//如果存在，请使用下一页的id刷卡
如果（下一页长度>0）{
$.mobile.changePage（下一页“幻灯片”）；
}
});
$（'div.ui-page'）.live（“swiperight”，函数（）{
var prevpage=$（this.prev（'div[data role=“page”]”）；
//如果存在，请使用下一页的id刷卡
如果（prevpage.length>0）{
$.mobile.changePage（前页“幻灯片”，true）；
}
});

这是表格

  @using (Html.BeginForm("SearchMobile", "Boka", FormMethod.Post))
            {
                <input class="searchbutton" id="searchBtn" data-ajax="false" type="submit" data-theme="b" value="Sök bokning" />
            }

        </div>

@使用（Html.BeginForm（“SearchMobile”、“Boka”、FormMethod.Post））
{
}

问题是，当我运行它时，我发送帖子的页面布局被缓存并显示在源代码中

为什么要缓存布局？怎么办？

JQuery mobile依赖页面事件进行多页面布局。而不是使用$（document）.ready（）。使用此处列出的页面事件：

然后可以在mobileinit事件中禁用ajax导航

$(document).on(“mobileinit”, function() { 
    $.mobile.ajaxEnabled = false; 
});

您还需要将data ajax=“false”属性移动到表单，而不是输入按钮

@using (Html.BeginForm("SearchMobile", "Boka", FormMethod.Post, new {data_ajax="false"}))
{
    <input class="searchbutton" id="searchBtn" type="submit" data-theme="b" value="Sök bokning" />
}

@使用（Html.BeginForm（“SearchMobile”、“Boka”、FormMethod.Post、new{data\u ajax=“false”}））
{
}

不确定它是否有什么事要做，但最后还有一个额外的内容。另外，你能按页面的原样发布整个视图吗？