WebView not showing HTML

Hi.

I am trying to use a WebView to show HTML that I am receiving from an API. Unfortunately the WebView is not showing anything and I can not figure out why.

The WebView is added to a StackLayout within a ContentPage.
<WebView BackgroundColor="Fuchsia" x:Name="Terms" MinimumHeightRequest="1000" MinimumWidthRequest="1000" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> <WebView.Source> <HtmlWebViewSource Html="{Binding StockItem.Terms}"/> <!--<UrlWebViewSource Url="http://blog.xamarin.com/"></UrlWebViewSource>--> </WebView.Source> </WebView>

StockItem.Terms is HTML e.g. <p>Test <b>bold</b></p>

I have also tried to show the xamarin blog in my WebView but it is not showing up on my page also.

Any ideas or suggestions?

Thanks

Answers

  • JohnMillerJohnMiller USForum Administrator, Xamarin Team Xamurai

    @NikolaiHerbstritt,

    Try updating to version 2.2.0pre2 (pre-release NuGet package). It fixes this bug, which seems like what you are experiencing.

  • JassimRahmaJassimRahma USMember ✭✭✭

    I have the same problem John when I use HtmlWebViewSource... It's just showing blank...

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @JassimRahma - What version of the Xamarin.Forms NuGet are you using? What platform(s) are you seeing the problem on? Is your HTML valid? Post the code that you are using to display the HTML & WebView.

  • JassimRahmaJassimRahma USMember ✭✭✭
    edited October 29
    1. Nuget is Version: 4.3.1.4445
    2. I am using Visual Studio for Mac
    3. Yes my HTMl is valid and it's basic

    my text is here

    Here is the XAML:
    <?xml version="1.0" encoding="UTF-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Ghazi_Al_Rahma.Bio" ControlTemplate="{StaticResource MainPageTemplate}" Icon="ic_person_pin_2x.png" BackgroundColor="White" Title=""> <ContentPage.Content> <StackLayout> <WebView x:Name="lblBio" Margin="10" WidthRequest="1000" HeightRequest="1000" MinimumWidthRequest="1000" MinimumHeightRequest="1000" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" /> </StackLayout> </ContentPage.Content> <ActivityIndicator x:Name="indicatorLoading" IsVisible="true" /> </ContentPage>

    and this is the CS:

    `private async void GetBio()
    {
    var client = new HttpClient();
    client.BaseAddress = new Uri("https://www.softnames.com/mybio/ws/get_person_bio.php?id=1");
    client.DefaultRequestHeaders.Accept.Clear();
    client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
    HttpResponseMessage response = await client.GetAsync("https://www.softnames.com/mybio/ws/get_person_bio.php?id=1");

    if (response.IsSuccessStatusCode)
    {
        var data = await response.Content.ReadAsStringAsync();
        dynamic loginuserdata = JsonConvert.DeserializeObject(data);
        IsBusy = false;
    
        var htmlSource = new HtmlWebViewSource();
        htmlSource.Html = loginuserdata[0].bio_text;
    
        lblBio.Source = htmlSource;
    }
    
    indicatorLoading.IsRunning = false;
    

    }
    `

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @JassimRahma - Your HTML isn't showing up in your post. Can you re-post it, or post a link to it?

    Note also, that depending on what is in your HTML, you may need to set the BaseUrl property of the HtmlWebViewSource .

  • JassimRahmaJassimRahma USMember ✭✭✭
    edited October 30

    this is the link:

    https://www.softnames.com/mybio/ws/get_person_bio.php?id=1

    and the HTML is under bio_text

    It's a UTF arabic text which displays properly when I show it in a DisplayAlert

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭
    edited October 30

    @JassimRahma - I copied the HTML into a C# string and used it to populate a WebView. I then tested on UWP and Android, both of which showed the arabic text in the WebView. To do this, I did have to tweak escaping of the HTML in the C# string.

    I'm hoping this will show correctly in this post. This is what I ended up with:

    string htmlString = "<html style='dir: rtl'><body style='dir: rtl'><p style='dir: rtl; text-align: right;'>من مواليد 1978، فاز في الانتخابات النيابية 2014 ممثلاً عن الدائرة (4) بالمحافظة الشمالية في الجولة الثانية بعدد أصوات بلغت 853 وبنسبة 55.82%. لم يسبق له الفوز بعضوية مجلس النواب سابقاً. وهو عضو لجنة المرافق العامة والبيئة، وعضو اللجنة البرلمانية النوعية الدائمة للشباب والرياضة.</p></body></html>";
    

    Pop that into your own code and populate the WebView using it, and see if it works for you. If it does, then the escaping in your JSON and/or source HTML needs tweaking.

    Also, what is the Xamarin.Forms NuGet version? It will be something like "2.4.0.282" (you can find this in packages.config)

  • JassimRahmaJassimRahma USMember ✭✭✭

    It's working now

    Great

    Thanks John

Sign In or Register to comment.