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

时间:2013-11-21 14:28:52

标签: asp.net jquery-mobile web-applications webforms

我有一个现有的ASP.net 4.5 webforms应用程序,我希望将其作为一个类似于WebApp"的移动浏览器应用程序。

我主要感兴趣的是图形/大小/缩放方面,因为WebForms网站已经很好地适用于移动浏览器,但它看起来很丑陋,而不是移动"一点都不。

阅读时,我遇到了jQuery mobile,它一眼就看起来很完美:只需将它包含在我的网站中就可以转换页面的每个元素"移动友好" (固定页面大小,大按钮和元素,自动拉伸等)。

但是我最初的热情很短暂:一旦我尝试使用网站,我注意到虽然图形很完美,但包括JQ mobile几乎打破了所有逻辑,例如:

  • DropDownLists停止生成回发
  • 点击LinkBut​​tons停止工作(点击没有任何反应)
  • UpdatePanels完全崩溃(ajax调用不再发射)
  • MultiViews完全崩溃(他们重置为initlia View on 每一次回发)

我做错了什么,或者只是WebForms和JQuery Mobile只是不兼容?

如果它们不兼容,任何人都可以提出另一种选择,让我的网站看起来像一个移动网络应用程序(除了手动重新设计所有内容)。

2 个答案:

答案 0 :(得分:2)

我将asp.net webforms与jQuery Mobile结合使用,它们可以很好地协同工作。然而,与传统的webforms方法相比,它需要一些预见和计划,并且可能需要一些新的方法。因此,转换现有的Web应用程序并不像您希望的那样快速和简单。

一些提示:

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

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

在许多情况下,不使用控件上的回发,而是使用客户端脚本通过代码隐藏中的PageMethods或WebService(asmx)中的WebMethods进行异步调用。如果您对UpdatePanels感觉更舒服,那么如果您在表单标记内部的所有内容以及表单标记内的脚本管理器,这些仍然可以正常工作。

DropDowns会被jQM重新设置,因此您可能希望在javascript中捕获更改事件,然后使用异步调用或通过javascript触发回发。

以下是其他一些观点:

JQuery-Mobile and ASP.Net - AJAX or Postback?

How to mix jQuery Mobile and ASP.NET

jQueryMobile in ASP.NET WebForm

答案 1 :(得分:1)

如果您选择使用jquery mobile JQM启用Ajax [这在使用JQM时会让用户感觉到本机应用程序时更受欢迎],您将不再拥有该帖子。这不好,因为你会失去许多内置功能,如验证控件,内置请求验证....

因此,其中一个选项是使用WCF restful服务并使其与asp.net兼容(通过在web配置中使用它:serviceHostingEnvironment aspNetCompatibilityEnabled =" true")。在这种情况下,您需要使用WCF服务缓解安全威胁,如脚本注入和交叉方请求伪造和....内部,因为没有内置请求验证。

现在一些JQM陷阱:

为了避免太多的惊喜,您可以通过从DOM中删除上一页来在DOM中只有一个页面。这样,您就不必担心DOM中具有相同ID的多个项目。

另一件事是绑定事件。如果您在母版页中有一个java脚本,并且您已经说过要绑定的click事件,请确保使用一个而不是on。否则,它表现得出乎意料。

对于客户端验证,jquery验证工作正常且易于使用且与JQM没有冲突。