Forums - CSHTML5

Dear Sir,

We have a UI element with numeric input needs (e.g. 'Amount' = 1234).
Actually we use a simple textBox with manual validation (based on bool double.TryParse(string s, out double result)).

The only problem: the user have to change the virtual keyboard of mobile platform from text to numeric everytime -which is so uncomfortable/time consuming.

So, our questions: is there any way to:
-change virtual keyboard from text to numeric programmatically ?

or more better:

-use textbox or any other user input element, similar in HTML5:
<input type="number" name="quantity" min="1" max="5">
or at least:
<input type="number">

or even more better:
-to use/handle any external HTML5 UI element (similar to: as we can use external javascripts with CSHTML5.Interop.ExecuteJavaScript (), is it possible to embed native HTML5 coomponents in XAML code ? -yes I'm sure it will not work in Simulator, but who cares ?)

Really thanks for your kind reply,
Best Regards,
Péter

Hi,

Yes, this possible.

One way is to define a class that inherits from Control, and then, in the constructor, call the following code:



Here is an example:
http://forums.cshtml5.com/viewtopic.php?f=4&t=1487

Regards,
JS-Support

Hi,
Big thanks ! -I've tried: it's easy to do that & a numeric input is there.

The last question: how to get back the value from it ?

e.g.:
we have a class :
public class InputNumberUserControl : UserControl
{
public InputNumberUserControl()
{
CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this, @"<input type=""number"">");
}
}

we use it in XAML:
<local:InputNumberUserControl x:Name="inputNumber_Test1"/>

How to reference inputNumber_Test1 from C# ?

(Frankly speaking I do not understand how & where to use GetDiv())

Thanks,
Péter

This is how you can add a property to your InputNumberUserControl that returns the value currently contained in your HTML <input> element:



Regards,
JS-Support

thanks !
and how to set?

To set, use:


(for reference: How to call JavaScript from C#)

Quick enough !!
Thanks.

One more thing: and is there a chance to add event handler ? -e.g. like:

<element onchange="myScript">

Yes, this is possible.

You can see an example in the Esri mapping control, where clicking on the map calls a C# callback:
http://forums.cshtml5.com/viewtopic.php?f=7&t=272

Here is the relevant piece of code:


Another example is the FileOpenExtension, where the "addEventListener" method of JavaScript is used:
http://forums.cshtml5.com/viewtopic.php?f=7&t=522

please, help ! -I tried a several ways, but the event callback not working:

// constructor:
public InputNumberUserControl()
{
CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this, @"<input type=""number"" min=""0"" >");
this.Loaded += InputNumberUserControl_Loaded;
}

// to be absolutely sure visual tree ok:
private void InputNumberUserControl_Loaded(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
var succ = CSharpXamlForHtml5.DomManagement.IsControlInVisualTree(this);
if (succ)
{
object htmlInputElement = CSHTML5.Interop.GetDiv(this);
CSHTML5.Interop.ExecuteJavaScript(@"var onChange = $1; $0.onchange = function(){onChange};",
htmlInputElement, (Action<object>)this.OnChanged
);
}
}

// Event handler -never hit !
void OnChanged(object args) // This is the C# callback
{
MessageBox.Show("changed");
}

Thanks !
Péter

what should be logical, but doesn't work too the following syntax:

CSHTML5.Interop.ExecuteJavaScript(@"$0.onchange = function(){$1};",
htmlInputElement, (Action<object>)this.OnChanged
);

But, unfortunately: exception in Simulator:

---------------------------

---------------------------
---- JAVASCRIPT ERROR ----



DESCRIPTION: Uncaught SyntaxError: Unexpected token (



LAST EXECUTED CODE:

var element = document.getElementById("id224");if (element) { element.style.boxSizing = "border-box"; }
---------------------------
OK
---------------------------

Dear JS-Support,
In the meantime I've found a solution (but not the explanation) as follows:

background info: there are two version of 'onchange' event (from HTML5/JS point of view): 'onchange' and 'EventListener':

object.onchange=function(){myScript};
or/alternative:
object.addEventListener("change", myScript);


-if we use the older 'onchange': it doesn't work : no C# callback/event handler hitted,
-if we use the newer 'addEventListener': works perfectly: C# callback/event handler hitted as expected.

details /only focused on : Interop.ExecuteJavaScript part:

LET ME EMPHASIZE in advance: both A & B is perfectly correct according HTML5/JS specification :

A.) first the NOT WORKING WAY !!:
object htmlInputElement0 = CSHTML5.Interop.GetDiv(this); // this means: class InputNumberUserControl : UserControl
CSHTML5.Interop.ExecuteJavaScript(@"var onChangedScript=$1; $0.onchange=function(){onChangedScript};",
htmlInputElement0, (Action<object>)this.OnChanged
);

B.) The WORKING WAY:
CSHTML5.Interop.ExecuteJavaScript(@"var onChangedScript=$1; $0.addEventListener(""change"", onChangedScript);",
htmlInputElement0, (Action<object>)this.OnChanged
);

So, I hope it help others

Anyway: I have no idea why the first one accoring point A is not working ??

Best Regards,
Péter

Thank you very much Péter.

I don't know why the first solution didn't work. It appears to be a JS problem.

Your solution will indeed help other people.

Thanks.
Regards,
JS-Support