jquery移动多页MVC 4
Posted
技术标签:
【中文标题】jquery移动多页MVC 4【英文标题】：jquery mobile multiple pages MVC 4 【发布时间】：2013-01-24 08:28:42 【问题描述】：我只是想用 jquery mobile 做一个简单的多页，但是缓存的东西（我认为）把它搞砸了。
这是我的布局：_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>
这是我的观点：
@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>
这是表格
@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>
问题是当我运行它时，我发送帖子的页面布局被缓存并显示在源代码中。
为什么布局被缓存？怎么办？
【问题讨论】：
不确定是不是有事，但最后多了一个 。 另外，您可以将整个视图原样发布在您的页面中吗？ 【参考方案1】：JQuery mobile 依赖于多个页面布局的页面事件。而不是使用 $(document).ready()。使用此处列出的页面事件：http://api.jquerymobile.com/category/events/
然后您可以在移动初始化事件中禁用 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" />
【讨论】：
以上是关于jquery移动多页MVC 4的主要内容，如果未能解决你的问题，请参考以下文章
如何在 jQuery 移动多页模板结构中将第二页显示为默认页面？