none
In Liste mittels Mouseover Item auswählen RRS feed

  • Frage

  • Hallo, ich habe einer cshtml Seite folgendes drin stehen.
    Ich möchte jetzt wenn ich mit der Mouse über die einzelnen Zeilen gehe einen Farbumschlag haben, und bei Mouseclick das entsprechende Item auswählen?
    Ich bin noch nicht so ganz konform mit der Razor Syntax. Könnt ihr mir weiterhelfen ?

      <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name1)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Name)
                    </td>
                </tr>
            }
        </tbody>

    Freitag, 26. Oktober 2018 05:57

Antworten

  • Hallo Thomas,

    beides hat mit Razor oder ASP.NET weniger zu tun. Farb- und sonstige Darstellungsänderungen bei Mouseover erreichst Du ganz einfach mit CSS und der :hover Pseudo Klasse.

    <style type="text/css">
    span.MyClass {
        font-weight: normal;
    }
    
    span.MyClass:hover {
        font-weight: bold;
        color: red;
    }
    </style>
    
    ...
    
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <span class="MyClass WithHover">@item.Name1</span>
                </td>
            </tr>
        }
    </tbody>

    Bzgl. des zweiten Wunschs, das Element bei Klick "auszuuwählen", musst Du uns etwas mehr sagen. Was genau soll passieren, wenn das Element angeklickt wird? Nur eine optische Kennzeichung? Falls ja, wie lange soll die halten? Falls was anderes: Was genau? Soll ein Link ausgelöst werden? Oder eine Javascript Funktion? Oder ...?

    ---

    Abgesehen davon solltest Du die Werte ggfs. einfach direkt ausgeben. Html.DisplayFor gehört nicht gerade zu den performantesten Sachen. Siehe dazu bspw.:

      Avoid MVC Core Performance Penalty with Html.DisplayFor()


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET (2001-2018)
    https://www.asp-solutions.de/ - IT Beratung, Softwareentwicklung, Remotesupport

    Freitag, 26. Oktober 2018 06:14
    Moderator

Alle Antworten

  • Hallo Thomas,

    beides hat mit Razor oder ASP.NET weniger zu tun. Farb- und sonstige Darstellungsänderungen bei Mouseover erreichst Du ganz einfach mit CSS und der :hover Pseudo Klasse.

    <style type="text/css">
    span.MyClass {
        font-weight: normal;
    }
    
    span.MyClass:hover {
        font-weight: bold;
        color: red;
    }
    </style>
    
    ...
    
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    <span class="MyClass WithHover">@item.Name1</span>
                </td>
            </tr>
        }
    </tbody>

    Bzgl. des zweiten Wunschs, das Element bei Klick "auszuuwählen", musst Du uns etwas mehr sagen. Was genau soll passieren, wenn das Element angeklickt wird? Nur eine optische Kennzeichung? Falls ja, wie lange soll die halten? Falls was anderes: Was genau? Soll ein Link ausgelöst werden? Oder eine Javascript Funktion? Oder ...?

    ---

    Abgesehen davon solltest Du die Werte ggfs. einfach direkt ausgeben. Html.DisplayFor gehört nicht gerade zu den performantesten Sachen. Siehe dazu bspw.:

      Avoid MVC Core Performance Penalty with Html.DisplayFor()


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET (2001-2018)
    https://www.asp-solutions.de/ - IT Beratung, Softwareentwicklung, Remotesupport

    Freitag, 26. Oktober 2018 06:14
    Moderator
  • Hallo Stefan,

    > Soll ein Link ausgelöst werden?

    Es soll ein Artikel ausgewählt werden . Die mit der ausgewählten ID soll auf einer neuen Seite zur weiteren Dateneingabe verwendet werden.

    >Abgesehen davon solltest Du die Werte ggfs. einfach direkt ausgeben. Html.DisplayFor gehört nicht gerade zu den >performantesten Sachen. Siehe dazu bspw.:

    Danke für den Tipp, habe ich mal gleich geändert. Wie gesagt , bin noch am einarbeiten mit Razor.

    Freitag, 26. Oktober 2018 07:36