C#•15mo ago

❔ Is there a way to make this more cleaner?

<div class="buttons">
    <div class="dropdown">
    <a button type="button" class="btn btn-success">
        <svg>
            <path></path>
        </svg>
        Add a new habit
    </a>
    <a button type="button" class="btn btn-success">
        <svg>
            <path></path>
        </svg>
        Log a habit
    </a>
    @*<div class="dropdown">*@
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="Today">Today</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="Yesterday">Yesterday</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="DateAdded">Date added</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="AddedOrder">Added order</a>
        <a class="dropdown-item search-link" asp-page="./Index">Search for date</a>
    </div>
    <br />
    <form id="search" style="display: none;">
        <p> Title: <input type="text" id="searchInput" asp-for="SearchString" /> <input type="submit" value="Filter" /> </p>
    </form>
    @*</div>*@
        @{
            if (Model.SumMessage != null)
            {
                <br />
                    <span style="white-space: pre-line">@Model.SumMessage</span>
            }
        }
    </div>
</div>

@{
    if (Model.SumMessage != null)
    {
        <br />
    }
}
<br />
<table id="records" class="table">
    <thead>
        <tr>
        ...

<div class="buttons">
    <div class="dropdown">
    <a button type="button" class="btn btn-success">
        <svg>
            <path></path>
        </svg>
        Add a new habit
    </a>
    <a button type="button" class="btn btn-success">
        <svg>
            <path></path>
        </svg>
        Log a habit
    </a>
    @*<div class="dropdown">*@
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="Today">Today</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="Yesterday">Yesterday</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="DateAdded">Date added</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="AddedOrder">Added order</a>
        <a class="dropdown-item search-link" asp-page="./Index">Search for date</a>
    </div>
    <br />
    <form id="search" style="display: none;">
        <p> Title: <input type="text" id="searchInput" asp-for="SearchString" /> <input type="submit" value="Filter" /> </p>
    </form>
    @*</div>*@
        @{
            if (Model.SumMessage != null)
            {
                <br />
                    <span style="white-space: pre-line">@Model.SumMessage</span>
            }
        }
    </div>
</div>

@{
    if (Model.SumMessage != null)
    {
        <br />
    }
}
<br />
<table id="records" class="table">
    <thead>
        <tr>
        ...

As you can see, if

Model.SumMessage

Model.SumMessage

is not null, I will add a span that will contain that message. I need two <br> tags in case I show the message. One above my span, and the other one above my <table> tag. Problem is, I feel those if statements I added don't look very clean. What do you think?

33 Replies

Gaming

Programming

❔ Is there a way to make this more cleaner?