CSHTML5 Control as direct div content

Please post public support tickets here. Note: for private support tickets, please send an email to support@cshtml5.com instead.
TaterJuice
Posts: 145
Joined: Thu Mar 16, 2017 5:40 am
Contact:

CSHTML5 Control as direct div content

Postby TaterJuice » Mon Nov 25, 2019 10:25 am

Is there a way to insert a CHTML5 control into a div or native html element?

Something like this:

Code: Select all

    public partial class PageControl : UserControl
    {
        public PageControl()
        {
            CSharpXamlForHtml5.DomManagement.SetHtmlRepresentation(this,
                "<div class='main'><!-- content container --></div>");
            this.Content = new Label() { Content = "Hello, world!" }; // throws an exception
        }
    }


or this:

Code: Select all

    public partial class PageControl : UserControl
    {
        public PageControl()
        {
            this.Loaded += PageControl_Loaded;
        }

        private void PageControl_Loaded(object sender, RoutedEventArgs e)
        {
            Interop.GetDiv(this).Content = new Label() { Content = "Hello, world!" }; // does not compile
        }
    }

ie: I have a very simple html & css layout that I want to fill with CSHTML5 controls. How do I insert a CSHTML5 control into a native html element.

JS-Support @Userware
Site Admin
Posts: 1093
Joined: Tue Apr 08, 2014 3:42 pm

Re: CSHTML5 Control as direct div content

Postby JS-Support @Userware » Tue Nov 26, 2019 1:15 am

Hi,

Yes, this is possible.

1. First you need to have the native HTML element ready. To do so, you can put a <div> in the file index.html, or you can use the HtmlPresenter control, as documented at:
http://www.cshtml5.com/links/how-to-use ... enter.aspx

If you use the HtmlPresenter, you need to wait for the <div> to be actually rendered before continuing. To do so, you can register the "Loaded" event of the HtmlPresenter.

2. Then, in your XAML, you need to create a new instance of the "Window" class, and associate it to the native HTML element via the "Window.AttachToDomElement" method in C#.

The "Window" class allows to create a new visual tree, where the root is any <div> that you specify.

For example:

Code: Select all

var window = new Window();
window.Content = new Label() { Content = "Hello, world!" };

var referenceToTheNativeElement = CSHTML5.Interop.ExecuteJavaScript("document.getElementById('THE_ID_OF_THE_ELEMENT')");

window.AttachToDomElement(referenceToTheNativeElement);


Regards
JS-Support


Return to “Technical Support”

Who is online

Users browsing this forum: No registered users and 2 guests

 

 

cron