November Happy Hour will be moved to Thursday December 5th.

How to send properties from html razor to react from contentarea?

Vote:
 


I have an episerver Quicksilver-master project implemented with REACT

Not sending htmlrazor properties to REACT component

in content areas you can add different types of blocks,

example:
in a type of page we have
ContentArea Company

in Company we add the car block
and the Computer block

the car block has the property of textBox number of wheels = 4

and the block computer has the text box property of the number of screens


Now comes the question, how can I send from a door number blades html to the car block controller?

public class CompanyBlockViewModel
{
    public ContentArea MainContentArea { get; set; }
}


public class CarBlock : BlockData
    {
        [CultureSpecific]
        [Display(
            Name = @"....",
            GroupName = SystemTabNames.Content,
            Order = 1)]
        public virtual string NumberWheels { get; set; }
    }
    
public class CarBlockViewModel
{
    public string NumberWheels { get; set; }
    public string NumberDoors { get; set; }
}
        
public class ComputerBlock : BlockData
    {
        [CultureSpecific]
        [Display(
            Name = @"....",
            GroupName = SystemTabNames.Content,
            Order = 1)]
        public virtual string NumberScreens { get; set; }
    }
    
public class ComputerBlockViewModel
{
    public string NumberScreens { get; set; }
    public string SOname { get; set; }
}


in views 

Company -> index.cshtml

<div id="CompanyPage" data-props="@SerializeToJsonHelper.SerializeToJson(Model)" />

@Html.PropertyFor(x => x.MainContentArea)

<div id="ContentPageHide" style="display: none;">
    <span id="NumberDoors">4</span>
    <span id="SOname"></span>
</div>

How do I send Number Screens?
to the react component

#253349
Apr 16, 2021 9:48
Vote:
 

If you're looking to update your own FE components when the EPI UX updates something, or re-renders a section, I think you're going to need to subscribe to the contentSaved event to listen to the changes. When the Dojo Widget used for editing on the front-end updates it's not firing off a bunch of back-end code, it updates the FE models and saves the block data to the back-end separately.

Some info on this can be found here:
https://world.episerver.com/documentation/developer-guides/CMS/editing/#dataevents
And
https://tedgustaf.com/blog/2017/episerver-on-page-edit-with-angular-react-and-other-js-frameworks/#some-background-on-property-rendering-in-episerver

There's also a slightly outdated Alloy example that updates React components on changes to the DOM, which are fired off from saving a component.
https://github.com/episerver/AlloyReact
and
https://github.com/episerver/AlloyReact/blob/master/AlloyReact/Static/react/ThreeKeyFacts.jsx

#254635
May 10, 2021 20:26
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.