Calling a C# function through Javascript onClick event in WebView in Xamarin.Forms

Question

I have a post type WebView which I managed to bind with the service response as string but I have some links like related posts which have their ids. On clicking those links I want the user to go to that article. I have tried many solutions but its look like the JavaScript doesn't calls on click, it calls on load because my complete WebView is treated as string and if I concatenate it, it definitely doesn't remains a script.

Here is my complete WebView code and the screenshot attached is the link which is made in WebView.

I managed to make it work by concatenating the whole response in string. Below is the code which helped me achieve this

String getHtml()
{
    var bodyStyle = "<!DOCTYPE html><html><head><style>body{height: 100%;}p{text-align:left;color:#191919;}filter{background-color:#191919;}a:link"
        + "{color:#2588B0; background-color:transparent}a:visited {color:#0099CC; background-color:transparent}"
        + "a:hover{color:#0099CC; background-color:transparent}a:ative{color:#0099CC; background-color:transparent}span{background-color: yellow;color: black}customRight{float: right}</style></head><body>";}

    var refs = bodyStyle;

    refs = refs + "<center><h4>" + response.Title + "<h4></center>";

    if (response.Pc.Count > 0)
    {
        refs = refs + "<center><u>" + Pc +
            "</a></u></center><br>";
    }

    if (string.IsNullOrWhiteSpace(response.Cn))
    {
        refs = refs + "<center>" + response.Cn + "</center><br>";

    }

    if (response.Judges.Count() > 0)
    {
        refs = refs + "<center> <strong>Coram:</strong> " + JudgesN + "</center><br>";
    }

    if (string.IsNullOrWhiteSpace(response.JGD.ToString()))
    {
        refs = refs + "<center> <strong>Decided On:</strong> " + response.JGD + "</center><br>";
    }

    if(string.IsNullOrWhiteSpace(response.AppealType) )
    {
        refs = refs + "<center> <strong>Appeal Type: </strong>" + response.AppealType + "</center><br>";
    }

    if (response.Appellants != null)
    {
        refs = refs + "<left><b>" + apeal + "</b></left>";
        refs = refs + "<customRight>apeal</customRight><br>";

    }
    refs = refs + "<center>VERSUS</center>";

    if (response.Respondants != null)
    {
        refs = refs + "<left><b>" + resp + "</b></left>";
        refs = refs + "<customRight>resps</customRight><br><br>";
    }

    if (string.IsNullOrWhiteSpace(response.FinalVr))
    {
        refs = refs + "<center> <strong>Final:</strong> " + response.FinalVr + "</center><br>";
    }

    if (string.IsNullOrWhiteSpace(response.note))
    {
        refs = refs + "<p> <strong>Note:</strong><br/> " + response.Headnote.ToLowerInvariant() + "</p><br>";
    }

    if(response.Refs != null)
    {
        refs = refs + "<left><b>Refered Jdgmts: </b></left><br>";
        foreach(var obj in response.Refs) 
            {
            if(obj.Jid == null) {
                refs = refs + "<p style='font-size:13px;'>"
                    + obj.Title
                    +"</p>";
            }
            else
            {
                refs = refs + "<p style='font-size:13px;'>" + "<a href=\""
                    + obj.Jid
                         + "\" target=\"_blank\" onClick=\"(function(e){alert('e is here'); "+ loadJt(obj.Jid);+"return false;})(); return false;\">"
                         + obj.Title
                    + "</a>"
                    + "</p>";
            }

    jdgmt = jdgmt.Replace("^^^", "<br/><br/>");
    jdgmt = jdgmt.Replace("<SPARA>", "<p>");
    jdgmt = jdgmt.Replace("</SPARA>", "</p>");

    refs = refs + jdgmt;
    refs = refs + "</body></html>";

    return refs;
}

data.Source = new HtmlWebViewSource { Html = getHtml(), BaseUrl="http://url.com/", BindingContext = response };

Here is my LoadJt Function

string loadJt(string jjid)
{
    loadJmt(jid);// invokes the constructor and updates my VM too.
    return jid;
}

Below how links are displaying

7 revs, 3 users 94% · Accepted Answer · 2020-08-10 10:30:08Z

8

Unfortunately when we talk about WebView on mobile. Call a C# function through JavaScript it's a bad way to follow. Because of webview, it's very limited to do that and a lot of problems that you probably will have on each platform too

So here we go a solution that works fine for me and I used it a lot

1) You won't need to implement a CustomRenderer, just on your xamarin.forms and HTML

2) This solution works to Call camera, download files in a native way, and anything else you want, just intercept the navigating event

3) On your HTML implement in your tag

 "<a href=></a>"

something like this:

"<a href='..MyOnclickMethod?objId="+obj.Jid+"'>"
+ obj.Title+ "</a>"

4) On your Xamarin WebView

...
webview.Navigating+=WebView_Navigating
...


private void WebView_Navigating(object sender, WebNavigatingEventArgs evt)
{
      string url = evt.Url;

      if (url.Contains("..MyOnclickMethod"))
      {
         //do your code here...
            evt.Cancel = true;
      }
}

make sure that you calling evt.Cancel = true; To prevent the webview continuing process requisition

If the id not coming yet: The string that you mounted maybe is not correct If you sure about this and it not working yet, try the pass in

"<a href>"

a valid URL with your id like

"<a href='www.google.com/?objId='"+obj.Jid+">"

I hope I have helped you

edited Aug 10, 2020 at 10:30

community wiki

7 revs, 3 users 94%
André Tamietti Quintão

Sign up to request clarification or add additional context in comments.

2 Comments

Shreeti G Over a year ago

Thanks André it has definitely helped me. But I am running into new issue. The url doesn't contains the Id that I am concatenating to the href part of my webview. It comes like below: This is how I concatenated. references = references + "<p style='font-size:13px;'>" + "<a target=\"_blank\" href='..MyOnclickMethod?objId='"+obj.Jid+">" this is the url I got: "..TheLaws.iOS.app/http:/the-laws.com/..MyOnclickMethod?objId= + obj.Title + "</a>" + "</p>"; Could you please guide what am I doing wrong?

André Tamietti Quintão Over a year ago

Make sure that you calling evt.Cancel = true; To prevent the webview continuing process requisition If the id not coming yet: The string that you mounted maybe is not correct If you sure about this and it not working yet, try the pass in "<a href>" a valid URL with your id like "<a href='www.google.com/?objId='"+obj.Jid+">"

Collectives™ on Stack Overflow

Calling a C# function through Javascript onClick event in WebView in Xamarin.Forms

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related