Tag Helpers


See the docs for this example on http://www.avassy.com/framework/components/Avassy.AspNetCore.Mvc.TagHelpers/docs.


asp-placeholder-for

Razor:
<input type="text" class="form-control" asp-placeholder-for="Name" />

C#:
[Display(Name = "Enter your name")]
public string Name { get; set; }

Result:


asp-placeholder-label-toggle

Razor:
<style>
.form-group {
    position: relative;
    padding-top: 15px;
}

.toggle-label {
    position: absolute;
    padding: 0;
    margin: -15px 0 0 0;
    font-size: 11px;
}
</style>
<div class="form-group">
    <input type="text" class="form-control col-md-3" asp-placeholder-label-toggle placeholder="Enter your name" data-label-css-class="toggle-label" />
<div>

Result:

asp-popup

This example has no display text, top, left, height or width specified. Defaults for top and left is the center and middle of the screen, the defaults for height and width are 500px. No display text will be shown.

Razor:
<asp-popup display-icon-css-class="fas fa-info-circle" template-id="info1" />
Place the template somewhere on the page:
<template id="info1">
<style>
.h1-styled {
    font-size: 20px;
    color: red;
}
</style>
<h1 class="h1-styled">This is a styled title</h1>
    <p>
        This is the content
    </p>
</template>

Result:
Click the icon to open the popup:



This second example has all the attributes specified. The default for the display-icon-position attribute is "before", but we specify "after", so it will render after the display-text.

Razor:
<style>
.styled-link {
    color: orange;
}
<style>
<asp-popup display-text="Info" display-icon-css-class="fas fa-info-circle" display-icon-position="after" top="200" left="400" height="200" width="100" template-id="info2" css-class="styled-link" />
Place the template somewhere on the page:
<template id="info2">
    <style>
    .h1-styled {
        font-size: 20px;
        color: green;
    }
    </style>
    <h1 class="h1-styled">This is a styled title</h1>
    <p>
        This is the content
    </p>
</template>

Result:
Click the link to open the popup: Info 



For older browsers that do not support the <template> tag, you can specify the html-content attribute with the HTML you want to display in the popup, recommended is to build the HTML in a helper method and put it in a variable to not clutter the asp-popup tag.

Razor:
@{
    var html = "<h1 id=\"title\">This is the title</h1><p>This is the content</p>";
}
<asp-popup display-icon-css-class="fas fa-info-circle" html-content="@html" />

Result:
Click the icon to open the popup: