Search code examples
c#javascriptsqlitewindows-phone-8

Can I load dynamic HTML data in a WebBrowser from Windows Phone 8?

I'm developing a new App but I have some issues because I need to do something like an hybrid App but I have an issue:

I need to use a SQLite DB where I'm updating some new tips for our users. This data comes from a Web Service however our App is designed with XAML and C# and I'd like to know if there's any way to access to that DB from JS, this is my code:

$(function () {
    var db = openDatabase('db.sqlite', '1.0', 'Test DB', 2 * 1024 * 1024);
    db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM info', [], function (tx, results) {
            var len = results.rows.length, i;
            msg = "<p>Found rows: " + len + "</p>";
            document.querySelector('#status').innerHTML += msg;
            for (i = 0; i < len; i++) {
                alert(results.rows.item[i].log);
            }
        }, null);
    });
});

It didn't do anything just said me: [object Error] with the SQLite code no error or anything or anyone has any idea if I can set HTML information directly in the control (everything has been tested on the emulator). Thanks for your time and help.

Solution

  • After some tests and research I create this codes:

    XAML: You need to set a WebBrowser Control and set a source and enable Script and Geolocation (if you need them).

     <phone:WebBrowser x:Name="wv" IsScriptEnabled="True" IsGeolocationEnabled="True" Source="/test.html" LoadCompleted="wv_LoadCompleted" />

    Create a class or something where you are going to manipulate SQLite:

    class data
{
    [SQLite.PrimaryKey, SQLite.AutoIncrement]

    public int idData { get; set; }
    public string info { get; set; }
}

public class sqliteDB
{
    private string dbPath;
    public SQLiteConnection db;

    public sqliteDB()
    {
        this.dbPath = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "db.sqlite");
    }

    public string getPath() {
        return this.dbPath;
    }

    public void close()
    {
        db.Close();
    }

    public void createDB()
    {
        if (!FileExists("db.sqlite").Result)
        {
            open();
            using (this.db)
            {
                this.db.CreateTable<data>();
            }
        }
    }

    public void open()
    {
        this.db = new SQLiteConnection(dbPath);
    }

    private async Task<bool> FileExists(string fileName)
    {
        var result = false;
        try
        {
            var store = await Windows.Storage.ApplicationData.Current.LocalFolder.GetFileAsync(fileName);
            result = true;
        }
        catch { }

        return result;
    }
}

    To set information in your example to have data in the DB

    string infoData;
public MainPage()
{
    InitializeComponent();

    infoData = @"<table class='infobox vcard' style='width: 22em'><tbody><tr><th colspan='2' class='n' style='text-align: center; font-size: 132%;'><span class='fn'><span style='position: relative; bottom: 0.2em;'>Xi Jinping</span></span><br><span class='nickname'><span style='position: relative; top: 0.1em;'><span style='font-weight:normal;'><span lang='zh-hans' xml:lang='zh-hans'>???</span></span></span></span></th></tr><tr><td colspan='2' style='text-align: center'><a href='/wiki/File:Xi_jinping_Brazil_2013.png' class='image'><img alt='Xi jinping Brazil 2013.png' src='//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Xi_jinping_Brazil_2013.png/220px-Xi_jinping_Brazil_2013.png' width='220' height='298' srcset='//upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Xi_jinping_Brazil_2013.png/330px-Xi_jinping_Brazil_2013.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/0c/Xi_jinping_Brazil_2013.png/440px-Xi_jinping_Brazil_2013.png 2x' data-file-width='519' data-file-height='704'></a></td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'><a href='/wiki/General_Secretary_of_the_Communist_Party_of_China' title='General Secretary of the Communist Party of China'>General Secretary</a> of the <a href='/wiki/Central_Committee_of_the_Communist_Party_of_China' title='Central Committee of the Communist Party of China'>Central Committee</a> of the <a href='/wiki/Communist_Party_of_China' title='Communist Party of China'>Communist Party of China</a></th></tr><tr><td colspan='2' style='text-align:center; background-color: lavender'><b><a href='/wiki/Incumbent' title='Incumbent'>Incumbent</a></b></td></tr><tr><td colspan='2' style='text-align:center'><span class='nowrap'><b>Assumed office</b></span><br>15 November 2012</td></tr><tr><th style='text-align:left;'>Deputy</th><td><a href='/wiki/Li_Keqiang' title='Li Keqiang'>Li Keqiang</a> <small>(<a href='/wiki/Politburo_Standing_Committee' title='Politburo Standing Committee' class='mw-redirect'>? 2nd in PSC</a>)</small></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Preceded by</span></th><td><a href='/wiki/Hu_Jintao' title='Hu Jintao'>Hu Jintao</a></td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'><a href='/wiki/President_of_the_People%27s_Republic_of_China' title='President of the People's Republic of China'>President of the People's Republic of China</a></th></tr><tr><td colspan='2' style='text-align:center; background-color: lavender'><b><a href='/wiki/Incumbent' title='Incumbent'>Incumbent</a></b></td></tr><tr><td colspan='2' style='text-align:center'><span class='nowrap'><b>Assumed office</b></span><br>14 March 2013</td></tr><tr><th style='text-align:left;'>Premier</th><td><a href='/wiki/Li_Keqiang' title='Li Keqiang'>Li Keqiang</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Vice President</span></th><td><a href='/wiki/Li_Yuanchao' title='Li Yuanchao'>Li Yuanchao</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Preceded by</span></th><td><a href='/wiki/Hu_Jintao' title='Hu Jintao'>Hu Jintao</a></td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'><a href='/wiki/Chairman_of_the_Central_Military_Commission' title='Chairman of the Central Military Commission'>Chairman of the CPC Central Military Commission</a></th></tr><tr><td colspan='2' style='text-align:center; background-color: lavender'><b><a href='/wiki/Incumbent' title='Incumbent'>Incumbent</a></b></td></tr><tr><td colspan='2' style='text-align:center'><span class='nowrap'><b>Assumed office</b></span><br>15 November 2012</td></tr><tr><th style='text-align:left;'>Deputy</th><td><a href='/wiki/Fan_Changlong' title='Fan Changlong'>Fan Changlong</a><br><a href='/wiki/Xu_Qiliang' title='Xu Qiliang'>Xu Qiliang</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Preceded by</span></th><td><a href='/wiki/Hu_Jintao' title='Hu Jintao'>Hu Jintao</a></td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'><a href='/wiki/Supreme_Military_Command_of_the_People%27s_Republic_of_China' title='Supreme Military Command of the People's Republic of China'>Chairman of the PRC Central Military Commission</a></th></tr><tr><td colspan='2' style='text-align:center; background-color: lavender'><b><a href='/wiki/Incumbent' title='Incumbent'>Incumbent</a></b></td></tr><tr><td colspan='2' style='text-align:center'><span class='nowrap'><b>Assumed office</b></span><br>14 March 2013</td></tr><tr><th style='text-align:left;'>Deputy</th><td><a href='/wiki/Fan_Changlong' title='Fan Changlong'>Fan Changlong</a><br><a href='/wiki/Xu_Qiliang' title='Xu Qiliang'>Xu Qiliang</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Preceded by</span></th><td><a href='/wiki/Hu_Jintao' title='Hu Jintao'>Hu Jintao</a></td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'>Chairman of the <a href='/wiki/National_Security_Commission_of_the_Communist_Party_of_China' title='National Security Commission of the Communist Party of China'>National Security Commission</a></th></tr><tr><td colspan='2' style='text-align:center; background-color: lavender'><b><a href='/wiki/Incumbent' title='Incumbent'>Incumbent</a></b></td></tr><tr><td colspan='2' style='text-align:center'><span class='nowrap'><b>Assumed office</b></span><br>25 January 2014</td></tr><tr><th style='text-align:left;'>Deputy</th><td><a href='/wiki/Li_Keqiang' title='Li Keqiang'>Li Keqiang</a><br><a href='/wiki/Zhang_Dejiang' title='Zhang Dejiang'>Zhang Dejiang</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Preceded by</span></th><td>New position</td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'>First Secretary of the <a href='/wiki/Secretariat_of_the_Communist_Party_of_China_Central_Committee' title='Secretariat of the Communist Party of China Central Committee'>Central Secretariat of the Communist Party of China</a></th></tr><tr><td colspan='2' style='border-bottom:none; text-align:center'><span class='nowrap'><b>In office</b></span><br>22 October 2007&nbsp;– 15 November 2012</td></tr><tr><th style='text-align:left;'><span class='nowrap'>General Secretary</span></th><td><a href='/wiki/Hu_Jintao' title='Hu Jintao'>Hu Jintao</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Preceded by</span></th><td><a href='/wiki/Zeng_Qinghong' title='Zeng Qinghong'>Zeng Qinghong</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Succeeded by</span></th><td><a href='/wiki/Liu_Yunshan' title='Liu Yunshan'>Liu Yunshan</a></td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'><a href='/wiki/Vice_President_of_the_People%27s_Republic_of_China' title='Vice President of the People's Republic of China'>Vice President of the People's Republic of China</a></th></tr><tr><td colspan='2' style='border-bottom:none; text-align:center'><span class='nowrap'><b>In office</b></span><br>15 March 2008&nbsp;– 14 March 2013</td></tr><tr><th style='text-align:left;'>President</th><td><a href='/wiki/Hu_Jintao' title='Hu Jintao'>Hu Jintao</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Preceded by</span></th><td><a href='/wiki/Zeng_Qinghong' title='Zeng Qinghong'>Zeng Qinghong</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Succeeded by</span></th><td><a href='/wiki/Li_Yuanchao' title='Li Yuanchao'>Li Yuanchao</a></td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'>President of the <a href='/wiki/Central_Party_School_of_the_Communist_Party_of_China' title='Central Party School of the Communist Party of China'>CPC Central Party School</a></th></tr><tr><td colspan='2' style='border-bottom:none; text-align:center'><span class='nowrap'><b>In office</b></span><br>22 December 2007&nbsp;– 15 January 2013</td></tr><tr><th style='text-align:left;'>Deputy</th><td><a href='/wiki/Li_Jingtian' title='Li Jingtian'>Li Jingtian</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Preceded by</span></th><td><a href='/wiki/Zeng_Qinghong' title='Zeng Qinghong'>Zeng Qinghong</a></td></tr><tr><th style='text-align:left;'><span class='nowrap'>Succeeded by</span></th><td><a href='/wiki/Liu_Yunshan' title='Liu Yunshan'>Liu Yunshan</a></td></tr><tr><th colspan='2' style='background-color: lavender; text-align: center'>Personal details</th></tr><tr><th style='text-align:left;'>Born</th><td><span style='display:none'>(<span class='bday'>1953-06-15</span>)</span> 15 June 1953 <span class='noprint ForceAgeToShow'>(age&nbsp;61)</span><br><a href='/wiki/Beijing' title='Beijing'>Beijing</a>, China</td></tr><tr><th style='text-align:left;'>Political party</th><td><a href='/wiki/Communist_Party_of_China' title='Communist Party of China'>Chinese Communist</a></td></tr><tr><th style='text-align:left;'>Spouse(s)</th><td><a href='/wiki/Peng_Liyuan' title='Peng Liyuan'>Peng Liyuan</a></td></tr><tr><th style='text-align:left;'>Children</th><td><a href='/wiki/Xi_Mingze' title='Xi Mingze'>Mingze</a></td></tr><tr><th style='text-align:left;'>Residence</th><td class='label'><a href='/wiki/Zhongnanhai' title='Zhongnanhai'>Zhongnanhai</a></td></tr><tr><th style='text-align:left;'><a href='/wiki/Alma_mater' title='Alma mater'>Alma mater</a></th><td><a href='/wiki/Beijing_101_Middle_School' title='Beijing 101 Middle School'>Beijing 101 Middle School</a><br><a href='/wiki/Tsinghua_University' title='Tsinghua University'>Tsinghua University</a></td></tr><tr><th style='text-align:left;'>Profession</th><td><a href='/wiki/Chemical_engineering' title='Chemical engineering'>chemical engineer</a></td></tr><tr><th style='text-align:left;'>Signature</th><td><a href='/wiki/File:Xi_Jinping_sign.svg' class='image' title='Xi Jinping's signature'><img alt='' src='//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Xi_Jinping_sign.svg/128px-Xi_Jinping_sign.svg.png' width='128' height='59' srcset='//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Xi_Jinping_sign.svg/192px-Xi_Jinping_sign.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/07/Xi_Jinping_sign.svg/256px-Xi_Jinping_sign.svg.png 2x' data-file-width='109' data-file-height='50'></a></td></tr></tbody></table>";
}

private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
    sqliteDB cn = new sqliteDB();
    cn.createDB();

    try
    {
        cn.open();
        using (cn.db)
        {
            cn.db.RunInTransaction(() =>
            {
                cn.db.Insert(new data()
                {
                    info = infoData
                });
            });
        }

        cn.close();
    }
    catch (Exception ex)
    {
        Console.Write(ex.ToString());
    }
}

    And then loads the information in your HTML page:

    class dataInfo
{
    public int idData { get; set; }
    public string info { get; set; }
}

private void wv_LoadCompleted(object sender, NavigationEventArgs e)
{
    sqliteDB cn = new sqliteDB();
    cn.open();

    string query = "SELECT * FROM data";
    List<dataInfo> placeInfo = cn.db.Query<dataInfo>(query);

    string[] args = { placeInfo[0].idData.ToString(), placeInfo[0].info };
    wv.InvokeScript("callMe", args);
    cn.close();
}

    In your HTML code you need to have something like this:

    <html>
<head>
    <script src="jquery.js"></script>
    <script>

        function callMe(arg1, arg2) {
            $("#status").html("arg1 is " + arg1 + " and arg2 is " + arg2 + "!");
        }            
    </script>
</head>
<body>
    <div id="status"></div>
</body>

    The function from the script (CallMe) should have the same name from your InvokeScript in C# in the JS function you should have the same number of Variables that you're sending if you don't it won't work.