ASP.Net/Ruby/PHP MVC Website, jQuery Mobile and Phonegap

我有一个 ASP.Net 的MVC3应用程序(不管它是 ASP.NET MVC，PHP还是RAILS coz，最终它都在提供plaing HTML(，它使用jquery mobile并且在所有移动浏览器中都运行良好。我的下一步是使用Phonegap创建一个本机ios应用程序。

我的

猜测是我所要做的就是在我放入Phonegap的html页面中，我将挂接到页面加载事件并从远程服务器动态加载我的MVC视图的内容。

但是我正在寻找一些例子，如果其他人做过类似的事情。

-提前感谢缺口

更新：我能够通过编写以下索引.html页面来完成此操作。希望它对其他人有所帮助。

虽然仍然有问题：但是这样做了...您可能会注意到，我正在通过 http://IP:8081 URL请求我的 ASP.NET MVC页面。这工作正常，它也加载了我的页面...但它不是jQuery移动格式的。所以，如果有人能在这里帮助我，那就太好了。

解释： 因为，ajax.responseText包含从 <!DOCTYPE html> 标签开始的整个 HTML...我认为很明显，我最终在我的 <div data-role="page" id="home"> 标签中插入了整个 HTML 页面，这显然是错误的，但我还没有解决方案:(

<!DOCTYPE html>
<html>
<head>
    <title>PhoneGap Ajax Sample</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <script type="text/javascript"  src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript"  src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
    <script type="text/javascript">
        function onDeviceReady() {
            var ajax = new XMLHttpRequest();
            ajax.open("GET", "http://192.168.2.30:8081/", true);
            ajax.send();
            ajax.onreadystatechange = function () {
                alert(ajax.status);
                if (ajax.readyState == 4 && (ajax.status == 200 || ajax.status == 0)) {
                    document.getElementById('home').innerHTML = ajax.responseText;
                }
            }
        }
        $(document).bind("mobileinit", function () {
            alert('mobileinit');
            // Make your jQuery Mobile framework configuration changes here!
            $.support.cors = true;
            $.mobile.allowCrossDomainPages = true;
        });
        document.addEventListener("deviceready", onDeviceReady, false);
    </script>
</head>
<body>
     <div data-role="page" id="home"> 
     </div>
     <div data-role="page" id="search"> 
     </div>
     <div data-role="page" id="recent"> 
     </div>
</body>
</html>

为什么不使用jQuery帮助程序从远程服务器加载页面。

$(document).bind("mobileinit", function () {
     alert('mobileinit');
     // Make your jQuery Mobile framework configuration changes here!
     $.support.cors = true;
     $.mobile.allowCrossDomainPages = true;
     $("#home").load('http://192.168.2.30:8081/ #targetContent');
});

Load 方法可以发出请求，并将选择器的内容替换为 AJAX 请求的结果。它还允许您在 URL 之后提供一个选择器，该选择器将针对要加载到原始匹配选择器中的远程服务器中的特定内容。

据我了解，从广义上讲，PhoneGap有两种选择(我自己还没有尝试过。现在我正在了解它们(：

您可以在iOS开发环境中安装PhoneGap，它允许您直接从IDE生成本机iOS应用程序
在PhoneGap网站中，您上传Web应用程序，它们会生成您的iOS(或Android(应用程序二进制文件。

相关内容

最新更新

热门标签：