如何将Jquery Mobile与现有的ASP.net WebForms应用程序集成

Question

我有一个现有的ASP.net 4.5 Webforms应用程序，我想将该应用程序制作为类似于“ WebApp”的移动浏览器应用程序。

我主要感兴趣的是图形/大小调整/缩放方面，因为WebForms站点已经可以很好地与移动浏览器一起使用，但是它看起来很丑，根本不是“移动”的。

在阅读中，我偶然发现了jQuery mobile，乍看之下似乎很完美：只要将其包含在我的网站中，页面的每个元素就变得“移动友好”（固定页面大小，大按钮和元素，自动拉伸等）。

但是我最初的热情是短暂的：当我尝试使用该网站时，我注意到尽管图形完美，包括JQ mobile几乎打破了所有逻辑，例如：

• DropDownLists停止生成回发
• 单击LinkBut​​tons停止工作（单击没有任何反应）
• UpdatePanels完全坏了（ajax调用不再触发）
• MultiViews完全崩溃（它们在每次回发时都会重置为initlia View）

我是在做错什么，还是WebForms和JQuery Mobile不兼容？

如果它们不兼容，那么谁能提出让我的网站看起来像移动Web应用程序的替代方法（而不是手动重新设计所有内容）。

Answer 1

我将asp.net网络表单与jQuery Mobile结合使用，它们可以很好地协同工作。 但是，与传统的Webforms方法相比，它需要一些周到的计划和规划，并且可能需要一些新的处理方式。 因此，转换现有的Webapp并不像您想要的那样简单快捷。

一些提示：

如果您使用的单个aspx页面带有多个data-role =“ page”元素，请考虑将所有元素都放在一个FORM元素中，以便asp.net postbacks / updatePanels可以正常工作。

对于链接按钮，您很可能需要关闭jQM中页面链接的默认AJAX加载。

在许多情况下，不是使用控件的回发，而是使用客户端脚本通过背后代码中的PageMethods或WebService（asmx）中的WebMethods进行异步调用。 如果您对UpdatePanels较为满意，但是如果您将所有内容都包含在form标记中，并且将脚本管理器也包含在form标记中，则它们仍然可以正常工作。

DropDowns确实会被jQM设置样式，因此您可能想捕获javascript中的change事件，然后使用异步调用或通过javascript触发回发。

以下是一些其他意见：

JQuery-Mobile和ASP.Net-AJAX还是回发？

如何混合使用jQuery Mobile和ASP.NET

ASP.NET WebForm中的jQueryMobile

Answer 2

如果您选择通过jquery mobile JQM启用Ajax（在使用JQM使用户感觉像是本机应用程序时首选）， 那么您将不再有任何帖子 。 这不好，因为您会丢失很多内置功能，例如验证控件，内置请求验证...。

因此，一种选择是使用WCF静态服务，并使它与asp.net兼容（通过在Web配置中使用：serviceHostingEnvironment aspNetCompatibilityEnabled =“ true”）。 在这种情况下，由于没有内置的请求验证，因此您需要减轻WCF服务内部的安全威胁，如脚本注入和交叉请求伪造以及....。

现在， 一些JQM陷阱：

为了避免很多意外，通过从DOM中删除前一页，您在DOM中可能只有一页。 这样，您无需担心DOM中有多个具有相同ID的项目。

另一件事是绑定事件。 如果您的母版页中有一个Java脚本，并且说要绑定一个click事件，请确保使用一个而不是on。 否则，它的行为会异常。

对于客户端验证，jquery验证工作良好且易于使用，并且与JQM无冲突。