Add click event through Html.PropertyFor method when using contentarea

ZZ
ZZ
Vote:
 

Hi,

I have a nested block named "Button block"., which contains following Html ->

<div style="margin-bottom: 10px;">
    <a class="btn btn-cta-small-darkpurple @(Model.FullWidth ? "full-width" : "")" href="@Model.Url" target="@(Model.TargetBlank ? "_blank" : "_self")">@Model.Tekst</a>
</div>

This button block is used on may places around our website, but on one parcticular page (containing this block) I want to add click event on the anchor tag.

This button block is called via parent block by using propertyfor method ->

        @Html.PropertyFor(m => m.CurrentBlock.ButtonBlock)

Onclick event should be added inline ->

onclick="xxx('you_are_links','you_are_link_click',this)"

Any input would be appreciated

#304226
Jun 28, 2023 10:15
Vote:
 

Hi ZZ,

I believe what you are trying to do is pass some view data information to the child block / button block.

In the parent you could try:

@Html.PropertyFor(x => x.ButtonBlock
      new
      {
          CustomParameter = "onclick"
      })
}

Then in the viewcomponet you would need to access the context to retrieve the view data:

var myProperty = ControllerContext.ParentActionViewContext.ViewData\["CustomParameter"\]?.ToString() ?? string.Empty;

    return PartialView("Index");

Please note the above would be more CMS 11, however the same approach should work for CMS12.

Paul

#304227
Jun 28, 2023 10:59
ZZ
Vote:
 

Hi Paul,

Thanks for the input, but button block doesn't have a controller. Its block which only contains html in razor view

#304229
Jun 28, 2023 11:22
Vote:
 

For a more inbuilt solution, you could potentially set a rendering tag on your ContentArea then create a custom view for that rendering tag for your button block. If you're making use of nested blocks, you'd need to ensure the rendering tag is passed through.

If it were me implementing this though, I'd look to attach the events separately via JavaScript rather than inline, based on some identifier which tells me I'm on the special page. That way you don't need to worry about nested blocks or display options messing up rendering tags or anything like that. For an HTML structure like this:

<main id="MySpecialPage">
    ...
    <div style="margin-bottom: 10px;">
        <a class="btn btn-cta-small-darkpurple @(Model.FullWidth ? "full-width" : "")" href="@Model.Url" target="@(Model.TargetBlank ? "_blank" : "_self")">@Model.Tekst</a>
    </div>
    ...
</main>

You could attach your click events like this:

var buttons = document.querySelectorAll("#MySpecialPage a.btn");
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("click", myClickHandlerFunction);
}
#304232
Jun 28, 2023 11:31
ZZ
Vote:
 

Thanks for the input Paul.

You mean something like this 

https://docs.developers.optimizely.com/content-management-system/docs/templatedescriptor-and-tags#tags

But I like you approach of having id on that page or maybe on the parent block, and then using that id to attach events via JS

#304233
Jun 28, 2023 11:49
ZZ
Vote:
 

Maybe I can use id on the parent block like this -> 

theoretically the parent block can be used multiple times on the same page, would that be a problem and what if onclick is not needed on every anchor tag of the page / block

<div id="parent-block"> 
<div class="col-md-3 col-xs-6">
        @Html.PropertyFor(m => m.CurrentBlock.BtnBlock1)
    </div>
    <div class="col-md-3 col-xs-6">
        @Html.PropertyFor(m => m.CurrentBlock.BtnBlock2)
    </div>
    <div class="col-md-3 col-xs-6">
        @Html.PropertyFor(m => m.CurrentBlock.BtnBlock3)
    </div>
</div>
#304234
Jun 28, 2023 11:55
Vote:
 

On the blocks that render the anchor, you would need a control mechanism that potentially renders out a class, data-attribute, up to you really.

For example have a bool that says use onclick in the cms and then when you render in the view it checks this value and adds a class to the anchor.

Then your script targets that class.

#304237
Jun 28, 2023 13:53
ZZ
Vote:
 

Thanks a lot for all the inputs.

I solved it by using html tag on the parent block., and then using that tag to attach event via JQ

 <nav>
        <div class="col-md-3 col-xs-6">
            @Html.PropertyFor(m => m.CurrentBlock.ChangeContactInformation)
        </div>
        <div class="col-md-3 col-xs-6">
            @Html.PropertyFor(m => m.CurrentBlock.ChangePin)
        </div>
        <div class="col-md-3 col-xs-6">
            @Html.PropertyFor(m => m.CurrentBlock.GoToBenefitCard)
        </div>
    </nav>
<script>
    window.onload = function () {
        $("nav a").on("click", function () {
            function(xxxx);
        });
    };
</script>   
#304299
Edited, Jun 29, 2023 11:26
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.