ASP.NET Core TagCloud Setup

Shield UI TagCloud for ASP.NET Core is a server-side wrapper component implemented as an ASP.NET Core MVC Helper.

For a detailed guide how to setup Shield UI for your ASP.NET Core project, check out this page.

The ASP.NET Core MVC helper API is a 1:1 mapping of the JavaScript TagCloud widget configuration, so you only have to get familiar with a single set of configuration options:

<div id="tags" />

<script type="text/javascript">
    jQuery(function ($) {
        $("#tags").shieldTagCloud({
            title: "Shield UI Demos",
            dataSource: {
                remote: {
                    read: "/api/demo-stats"
                },
                schema: {
                    data: "components"
                }
            },
            textTemplate: "{name}",
            frequencyTemplate: "{demos}",
            hrefTemplate: "{url}"
        });
    });
</script>

For ASP.NET MVC the code will be:

@(Html.ShieldTagCloud()
    .Name("tags")
    .Title("Shield UI Demos")
    .DataSource(ds => ds
        .Remote(remote => remote.Read("/api/demo-stats"))
        .Schema(schema => schema.Data("components")))
    .TextTemplate("{name}")
    .FrequencyTemplate("{demos}")
    .HrefTemplate("{url}"))

To see the configuration options in action, please refer to our online demos.