Scripts inside local html is not working with webview Eval in UWP Xamarin forms

Question

Scripts inside local html is not working with webview Eval in UWP Xamarin forms

Anonymous

Tried to update the html elements using script with webview Eval, its working fine in android and iOS but it is not working with UWP Xamarin forms.

1.webview.Eval to update the script : User's image

Script inside local html :

User's image

Anonymous

2024-06-13T07:05:18.71+00:00
Please don't post text, including code snippets, as images - it is inaccessible and difficult to read and work with. Please edit your post to include these html code.

In addition, Xamarin support ended on May 1, 2024 for all Xamarin SDKs including Xamarin.Forms. For more information, please check: Xamarin official support policy | .NET (microsoft.com). We will recommend you upgrade Xamarin projects to . NET MAUI, please see the Upgrade from Xamarin to .NET & .NET MAUI documentation.

Firstly, please add a <p> in your body, then set the visibility to hidden by following JS.

<!DOCTYPE html> <html> <body> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript"> function fillColor(id) { document.getElementById("123").style.visibility = "hidden"; } </script> <p id="123">this is test</p> </body> </html>

Then you can invoke this JS in the button click event for testing by webview.Eval(string.Format( $"fillColor({0})",1));. Will this <p> content will disappear? I test above code, it is working. My Xamarin.Forms version is 5.0.0.2662;

By the way, please copy your local html page to the project.UWP folder.

Anonymous

Thanks for your input.

Tried the same in the code, even then the element is not getting updated in UWP but its working fine with Android and iOS

and we added below sample html as an embedded resource(PCL project)

Note : updating svg element using webView.Eval

C# code to update script :

webView.Eval(string.Format("fillColor({0}, {1})", arg[i].RoomAvailabilityStatusIcon, arg[i].RoomId.ToString()));

Script : example input (slotstatus -1 , slotid - 1302)

<!DOCTYPE html>

<html>

<head>

<title> </title>

</head>

<body>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- Update meeting room status and Buzz tech status -->

<script type="text/javascript">

    function fillColor(slotstatus, slotid) {

        var temp = parseInt(slotstatus);

        document.getElementById("1" + slotid).style.visibility = "hidden";            

        if (temp == 1)

            document.getElementById("1" + slotid).style.visibility = "visible";

        else if (temp == 2)

            document.getElementById("2" + slotid).style.visibility = "visible";

        else if (temp == 3 || temp == 4)

            document.getElementById("3" + slotid).style.visibility = "visible";

    }</script>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 2382 2806.79">

      <g **id="11302"** data-name="Group 803" transform="translate(1070 10216)">

     <circle id="Ellipse_883-30" data-name="Ellipse 883" cx="22" cy="22" r="22" transform="translate(-0.46 -0.46)" fill="#069e15" />

     <path id="Path_70860-10" data-name="Path 70860" d="M-1.708,18.254a2.611,2.611,0,0,1-1.884-.8l-6.831-7.119a2.611,2.611,0,0,1,.076-3.691,2.611,2.611,0,0,1,3.691.076l4.871,5.076,11-12.414a2.611,2.611,0,1,1,3.908,3.463L.246,17.375a2.611,2.611,0,0,1-1.9.879Z" transform="translate(20.381 13.039)" fill="#fff" />

 </g>

</g>

</svg>

</body>

</html>

Ziya 0 Reputation points

2024-06-24T12:03:48.1733333+00:00

Leon Lu (Shanghai Wicresoft Co,.Ltd.) Can you please provide working sample project.
Anonymous

2024-06-25T07:12:10.2933333+00:00

Ziya Xamarin support ended on May 1, 2024 for all Xamarin SDKs including Xamarin.Forms. For more information, please check: Xamarin official support policy | .NET (microsoft.com). We will recommend you upgrade Xamarin projects to . NET MAUI, please see the Upgrade from Xamarin to .NET & .NET MAUI documentation. If you meet any questions when using MAUI, welcome to ask your questions in this Microsoft Q&A platform.

1 answer

Your answer

Anonymous

2024-06-13T07:05:18.71+00:00

Please don't post text, including code snippets, as images - it is inaccessible and difficult to read and work with. Please edit your post to include these html code.

In addition, Xamarin support ended on May 1, 2024 for all Xamarin SDKs including Xamarin.Forms. For more information, please check: Xamarin official support policy | .NET (microsoft.com). We will recommend you upgrade Xamarin projects to . NET MAUI, please see the Upgrade from Xamarin to .NET & .NET MAUI documentation.

Firstly, please add a <p> in your body, then set the visibility to hidden by following JS.

<!DOCTYPE html> <html> <body> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script type="text/javascript"> function fillColor(id) { document.getElementById("123").style.visibility = "hidden"; } </script> <p id="123">this is test</p> </body> </html>

Then you can invoke this JS in the button click event for testing by webview.Eval(string.Format( $"fillColor({0})",1));. Will this <p> content will disappear? I test above code, it is working. My Xamarin.Forms version is 5.0.0.2662;

By the way, please copy your local html page to the project.UWP folder.
Anonymous

2024-06-20T05:35:15.3+00:00

Thanks for your input.

Tried the same in the code, even then the element is not getting updated in UWP but its working fine with Android and iOS

and we added below sample html as an embedded resource(PCL project)

Note : updating svg element using webView.Eval

C# code to update script :

webView.Eval(string.Format("fillColor({0}, {1})", arg[i].RoomAvailabilityStatusIcon, arg[i].RoomId.ToString()));

Script : example input (slotstatus -1 , slotid - 1302)

<!DOCTYPE html>

<html>

<head>

<title> </title>

</head>

<body>

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>  <script type="text/javascript"> function fillColor(slotstatus, slotid) { var temp = parseInt(slotstatus); document.getElementById("1" + slotid).style.visibility = "hidden"; if (temp == 1) document.getElementById("1" + slotid).style.visibility = "visible"; else if (temp == 2) document.getElementById("2" + slotid).style.visibility = "visible"; else if (temp == 3 || temp == 4) document.getElementById("3" + slotid).style.visibility = "visible"; }</script> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 2382 2806.79">

<g id="Group_870" data-name="Group 870" transform="translate(84.126 -8710.874)">

<g **id="11302"** data-name="Group 803" transform="translate(1070 10216)"> <circle id="Ellipse_883-30" data-name="Ellipse 883" cx="22" cy="22" r="22" transform="translate(-0.46 -0.46)" fill="#069e15" /> <path id="Path_70860-10" data-name="Path 70860" d="M-1.708,18.254a2.611,2.611,0,0,1-1.884-.8l-6.831-7.119a2.611,2.611,0,0,1,.076-3.691,2.611,2.611,0,0,1,3.691.076l4.871,5.076,11-12.414a2.611,2.611,0,1,1,3.908,3.463L.246,17.375a2.611,2.611,0,0,1-1.9.879Z" transform="translate(20.381 13.039)" fill="#fff" /> </g>

</g>

</svg>

</body>

</html>
Ziya 0 Reputation points

2024-06-24T12:03:48.1733333+00:00

Leon Lu (Shanghai Wicresoft Co,.Ltd.) Can you please provide working sample project.
Anonymous

2024-06-25T07:12:10.2933333+00:00

Ziya Xamarin support ended on May 1, 2024 for all Xamarin SDKs including Xamarin.Forms. For more information, please check: Xamarin official support policy | .NET (microsoft.com). We will recommend you upgrade Xamarin projects to . NET MAUI, please see the Upgrade from Xamarin to .NET & .NET MAUI documentation. If you meet any questions when using MAUI, welcome to ask your questions in this Microsoft Q&A platform.

Answer 1

Bruce (SqlWork.com) 82,146 Volunteer Moderator

Xamarin forms for windows uses the edge based webview rather than the webkit based webview used on other platforms. Be sure your html and js are compatible with edge.

note: if you google you can find webview2 wrappers for Xamarin.

Share via

Scripts inside local html is not working with webview Eval in UWP Xamarin forms

1 answer

Your answer