C
C#•2mo ago
khamas

How to create a "component" in MVC?

Hey, I'm doing something using MVC and I'm trying to build a component js script, see below; This is a partial view that lives in a list of components, I want the script to be "scoped" to the component, is there a better way to do this? 
@using ServerLib.Helpers
@{
    var controlId = RandomString.GenerateRazorId();

    var actionTagId = $"{controlId}-action";
    var optionsTagId = $"{controlId}-options";
    var toggleFnName = $"{controlId}_toggle";
}

<script>
    let actionTagId_@controlId = "@actionTagId";
    let optionsTagId_@controlId = "@optionsTagId";

    async function fn_@(toggleFnName)() {
        document.getElementById(actionTagId_@controlId).classList.toggle('purchaseButtonHide');
        document.getElementById(actionTagId_@controlId).classList.remove('invertMargin');
        await delay(500);
        document.getElementById(optionsTagId_@controlId).classList.toggle('optionsShow');
    }

</script>

<button id="@actionTagId" onclick="fn_@(toggleFnName)()" class="purchaseButton invertMargin">
    Contacter notre agent
</button>
<div id="@optionsTagId" class="options">
    <a href="tel:0682620719"><img src="/media/icons/phone.png" alt="phone"/></a>
    <a href="mailto:[email protected]"><img src="/media/icons/email.png" alt="email"/></a>
</div>
@using ServerLib.Helpers
@{
    var controlId = RandomString.GenerateRazorId();

    var actionTagId = $"{controlId}-action";
    var optionsTagId = $"{controlId}-options";
    var toggleFnName = $"{controlId}_toggle";
}

<script>
    let actionTagId_@controlId = "@actionTagId";
    let optionsTagId_@controlId = "@optionsTagId";

    async function fn_@(toggleFnName)() {
        document.getElementById(actionTagId_@controlId).classList.toggle('purchaseButtonHide');
        document.getElementById(actionTagId_@controlId).classList.remove('invertMargin');
        await delay(500);
        document.getElementById(optionsTagId_@controlId).classList.toggle('optionsShow');
    }

</script>

<button id="@actionTagId" onclick="fn_@(toggleFnName)()" class="purchaseButton invertMargin">
    Contacter notre agent
</button>
<div id="@optionsTagId" class="options">
    <a href="tel:0682620719"><img src="/media/icons/phone.png" alt="phone"/></a>
    <a href="mailto:[email protected]"><img src="/media/icons/email.png" alt="email"/></a>
</div>
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?