Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

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.