CODEWITHSUNDEEP
asp.net-corerazorview
cickness
cickness

Reputation: 907

How to correctly output data from the database to the razor

I have 2 drop-down menus

<div class="dropdown">
                    <button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" data-value="@Model.WeekNumberDayStart" id="periodTypeNumber">
                        <span class="toggle-text">First</span>
                        <span class="dropdown-caret"></span>
                    </button>

                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation">
                            <a class="active" role="menuitem" tabindex="-1" href="#" data-value="1">First</a>
                        </li>
                        <li role="presentation">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="2">Second</a>
                        </li>
                        <li role="presentation" data-value="3">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="3">Third</a>
                        </li>
                        <li role="presentation" data-value="4">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="4">Fourth</a>
                        </li>
                        <li role="presentation" data-value="5">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="5">Fifth</a>
                        </li>
                    </ul>
                </div>
                <div class="dropdown">
                    <button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" id="periodTypeDay" data-value="@Model.DayNubmerOfWeek">
                        <span class="toggle-text">monday</span>
                        <span class="dropdown-caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                        <li role="presentation" data-value="1">
                            <a class="active" role="menuitem" tabindex="-1" href="#" data-value="1">monday</a>
                        </li>
                        <li role="presentation" data-value="2">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="2">tuesday</a>
                        </li>
                        <li role="presentation" data-value="3">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="3">wednesday</a>
                        </li>
                        <li role="presentation" data-value="4">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="4">thursday</a>
                        </li>
                        <li role="presentation" data-value="5">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="5">friday </a>
                        </li>
                        <li role="presentation" data-value="6">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="6">saturday</a>
                        </li>
                        <li role="presentation" data-value="7">
                            <a class="" role="menuitem" tabindex="-1" href="#" data-value="7">sunday</a>
                        </li>
                    </ul>
                </div>

and if the date from @Model.WeekNumberDayStart(int - like 1,2,3,4...) = data-value = "1" then need to write class = "active" otherwise just class = ""

maybe somehow it can be done differently through the menu itself through DropDownList?

Upvotes: 0

Views: 28

Answers (1)

LouraQ
LouraQ

Reputation: 6881

and if the date from @Model.WeekNumberDayStart(int - like 1,2,3,4...) = data-value = "1" then need to write class = "active" otherwise just class = ""

It cannot be achieved by menu itself. You need to use jquery code to achieve.

Since you have two dropdown menus, you need to distinguish the a tag of these two menus.

Therefore, you can add custom attributes and corresponding values to each group of a tags to ensure that the corresponding elements can be obtained in jquery.

Below is the class active binding for the first group of dropdown menu example.

<div class="dropdown">
    <button class=" js-dropdownDate dropdown-toggle" type="button" data-toggle="dropdown" data-value="@Model.WeekNumberDayStart" id="periodTypeNumber">
        <span class="toggle-text">First</span>
        <span class="dropdown-caret"></span>
    </button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a class="active" role="menuitem" tabindex="-1" href="#" data-value="1"  droptype="WeekNumberDayStart">First</a>
        </li>
        <li role="presentation">
            <a class="" role="menuitem" tabindex="-1" href="#" data-value="2" droptype="WeekNumberDayStart">Second</a>
        </li>
        <li role="presentation" data-value="3">
            <a class="" role="menuitem" tabindex="-1" href="#" data-value="3" droptype="WeekNumberDayStart">Third</a>
        </li>
        <li role="presentation" data-value="4">
            <a class="" role="menuitem" tabindex="-1" href="#" data-value="4" droptype="WeekNumberDayStart">Fourth</a>
        </li>
        <li role="presentation" data-value="5">
            <a class="" role="menuitem" tabindex="-1" href="#" data-value="5" droptype="WeekNumberDayStart">Fifth</a>
        </li>
    </ul>
</div>

jquery to change binding class active according to @Model.WeekNumberDayStart value:

 <script>
        $(function () {
            $("a[droptype=WeekNumberDayStart]").each(function () {
                $(this).removeClass("active");
                if ($(this).attr("data-value") == $("#periodTypeNumber").attr("data-value")) {
                    $(this).addClass("active");
                }
            })
             
        })
    </script>

Upvotes: 1

Related Questions