volume_up

A critical vulnerability was discovered in React Server Components (Next.js). Our systems remain protected but we advise to update packages to newest version. Learn More

AI OnAI Off

How to create RadioRichTextBlock

"RadioRichTextBlock" which contains a Radio A Text field, Radio B Text field, and an XhtmlString field for the TinyMCE. Showing/Hiding the text is part of the frontend. An editor can then use and place the block wherever needed.

#269359
Jan 03, 2022 14:17
Vote:

Create a block type

using System;
using System.ComponentModel.DataAnnotations;
using EPiServer;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
 
namespace EPiServerBlogTutorial.Models.Blocks
{
    [ContentType(
        DisplayName = "Advertisement Block", 
        GUID = "8a05cc73-6a38-46a5-b173-bb9974a0692e", 
        Description = "Use this block to add advertisement")]
    public class AdvertisementBlock : BlockData
    {
        [CultureSpecific]
        [Display(
            Name = "Radio A Text ",
            Description = "Radio A Text  field's description",
            GroupName = SystemTabNames.Content,
            Order = 10)]
        public virtual string RadioAText { get; set; }

        [CultureSpecific]
        [Display(
            Name = "Radio B Text ",
            Description = "Radio B Text  field's description",
            GroupName = SystemTabNames.Content,
            Order = 20)]
        public virtual string RadioBText { get; set; }
 
        [CultureSpecific]
        [Display(
            Name = "Text",
            Description = "Short text",
            GroupName = SystemTabNames.Content,
            Order = 30)]
        public virtual XhtmlString Text { get; set; }
    }
}

Block controller

using System.Web.Mvc;
using EPiServer;
using EPiServer.Core;
using EPiServer.Web;
using EPiServer.Web.Mvc;
using EPiServerBlogTutorial.Models.Blocks;
 
namespace EPiServerBlogTutorial.Controllers
{
    public class AdvertisementBlockController : BlockController<AdvertisementBlock>
    {
        public override ActionResult Index(AdvertisementBlock currentBlock)
        {
            return PartialView(currentBlock);
        }
    }
}

Block view

@model EPiServerBlogTutorial.Models.Blocks.AdvertisementBlock
 
<strong>Advertisement:</strong>
<input type="radio" id="html" name="fav_language" value="@Model.RadioAText">
<label for="html">Model.RadioAText</label><br>
<input type="radio" id="html" name="fav_language" value="@Model.RadioBText">
<label for="html">Model.RadioBText</label><br>
   @Html.PropertyFor(x => x.Text)
#269519
Jan 06, 2022 9:42
Tapas - Jan 06, 2022 9:49
could you please reply to this post?
https://world.optimizely.com/forum/developer-forum/CMS/Thread-Container/2021/11/create-cms-block---radio-button-functionality/?_gl=1*ge7nb9*_ga*MTkxNzQ3ODMyOS4xNjI2NjA4OTk2*_ga_C7SLJ6HMJ5*MTY0MTQ2MjMzMy42My4xLjE2NDE0NjI0NjMuNQ..
Ravindra S. Rathore - Jan 06, 2022 9:52
You can refer above steps and create as many block instance you want but you need to write the jquery to show/hide the radio button on front end
Tapas - Jan 06, 2022 9:55
Okay, Thanks :)
error This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* 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.