How to create RadioRichTextBlock

Tapas

Vote:

"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

Ravindra S. Rathore

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 :)

Try our conversational search powered by Generative AI!