UoN.AspNetCore.FeedbackMessage 2.0.0

Reusable bits for ASP.NET Core MVC to make displaying feedback messages easy, via Action redirects or AJAX.

There is a newer version of this package available.
See the version list below for details.
Install-Package UoN.AspNetCore.FeedbackMessage -Version 2.0.0
dotnet add package UoN.AspNetCore.FeedbackMessage --version 2.0.0
<PackageReference Include="UoN.AspNetCore.FeedbackMessage" Version="2.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add UoN.AspNetCore.FeedbackMessage --version 2.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: UoN.AspNetCore.FeedbackMessage, 2.0.0"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install UoN.AspNetCore.FeedbackMessage as a Cake Addin
#addin nuget:?package=UoN.AspNetCore.FeedbackMessage&version=2.0.0

// Install UoN.AspNetCore.FeedbackMessage as a Cake Tool
#tool nuget:?package=UoN.AspNetCore.FeedbackMessage&version=2.0.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

A Razor Class Library for ASP.NET Core to make displaying feedback messages after action redirects easy.

Features

Feedback Message alert features:

  • Alerts can be rendered in any Bootstrap 4 style (including those set as custom theme colors), or with any custom css class in the form alert-[type].
  • Messages can feature HTML content.
  • Alerts can include a "close" button, to dismiss them. This works out the box with Bootstrap 4, or can otherwise be implemented separately.
  • Can be used for static alerts as well as Session based TempData driven alerts.
  • Can be used via AJAX to build alert markup without reloading the page.

It provides the following code items:

  • A model class representing a configurable Feedback Message.
  • Extension methods for setting and getting FeedbackMessageModels at TempData["FeedbackMessage"].
  • A View for rendering a FeedbackMessageModel as a Bootstrap 4 style alert.
  • A ViewComponent for rendering the above View, or a local override.
  • A TagHelper for rendering the above ViewComponent with a model either from TempData["FeedbackMessage"] or as configured by attributes.
  • A Controller for returning the above ViewComponent as configured by the HTTP request; useful for requesting via AJAX to add the result to a page.

Usage

Static usage in a Razor View

While not the most useful thing this library can do, it can be used as a TagHelper for bootstrap alert markup in a Razor view:

  1. Acquire the library via one of the methods above.
  2. Import TagHelpers from this assembly
    • add the following to a Razor View, or to _ViewImports.cshtml:
    • @addTagHelper *, UoN.AspNetCore.FeedbackMessage
  3. Use the <uon-feedbackmessage /> TagHelper in a Razor View.
  4. ????
  5. PROFIT!

TagHelper parameters

By default, an empty <uon-feedbackmessage /> TagHelper will only render an alert if a FeedbackMessage is set in TempData. This behaviour is configurable.

  • message - sets a static message on this FeedbackMessage tag.
    • this will always be rendered, unless use-tempdata is true, and a message is set in TempData.
  • type - sets an alert type (informing the CSS class) to use when rendering the above message.
    • defaults to secondary.
  • dismissable - sets whether the alert is dismissable when rendering the above message.
    • defaults to true.
  • use-tempdata - Specifies whether this FeedbackMessage should render messages in TempData, when they exist.
    • defaults to true.
    • if false, only the message as configured by the above attributes will be shown, TempData content will have no effect on this tag.
    • if true, when there is TempData content, it will be shown, otherwise the message as configured above will be shown.

Standard Server-side usage

  1. Acquire the library via one of the methods above.
  2. Ensure the ASP.NET Core Session Middleware is configured in your project.
  3. Use this.SetFeedbackMessage() inside an MVC Controller method.
  4. Import TagHelpers from this assembly
    • add the following to a Razor View, or to _ViewImports.cshtml:
    • @addTagHelper *, UoN.AspNetCore.FeedbackMessage
  5. Use the <uon-feedbackmessage /> TagHelper in a Razor View.
  6. ????
  7. PROFIT!

Refer to the TagHelper parameters above to see how the TagHelper can be further configured.

SetFeedbackMessage() parameters

  • message - sets a message in TempData.
  • type - sets an alert type (informing the CSS class) to use when rendering the above message.
    • defaults to secondary.
  • dismissable - sets whether the alert is dismissable when rendering the above message.
    • defaults to true.

An example:

MyController.cs

public class MyController : Controller
{
    ...

    public IActionResult MyAction()
    {
        this.SetFeedbackMessage("It's working!", "success");
        return View();
    }
}

MyAction.cshtml

<div>
    <uon-feedbackmessage />

    The rest of my HTML content is here and very interesting.
</div>
  • If a Feedback Message is not set, <uon-feedbackmessage /> will simply collapse into nothing.
  • If a Feedback Message is set, <uon-feedbackmessage /> will turn into something like the following:
<div class="alert alert-success">
    Hello!
</div>

AJAX usage

  1. Acquire the library via one of the methods above.
  2. Optionally specify an MVC Route template for the FeedbackMessageAjaxController, else it will default to /FeedbackMessageAjax as per MVC default conventions
  3. Write some javascript that makes an AJAX request, and puts the result onto the page.
  4. ????
  5. PROFIT!

/FeedbackMessageAjax Request parameters

  • message - sets a message for the markup to be returned in the AJAX response.
  • type - sets an alert type (informing the CSS class) to use when rendering the above message.
    • defaults to secondary.
  • dismissable - sets whether the alert is dismissable when rendering the above message.
    • defaults to true.

An example:

feedback-message.js

//global function that assumes we have jquery...
window.feedbackMessage = (message, type, dismissable) => {
    let feedback = $("#feedback-message"); //this is a div on the page

    $.get({
        url: "/FeedbackMessageAjax",
        data: { "message": message, "type": type, "dismissable": dismissable },
        success: function(content) {
            //use animation to make it clear the message has changed if there was already one there!
            feedback.fadeOut(200, "swing", function() {
                feedback.html(content);

                feedback.fadeIn(100);
            });
        }
    });
};

...

//some situation in which we want a feedback message
window.feedbackMessage("Hello!", "info");

A Razor Class Library for ASP.NET Core to make displaying feedback messages after action redirects easy.

Features

Feedback Message alert features:

  • Alerts can be rendered in any Bootstrap 4 style (including those set as custom theme colors), or with any custom css class in the form alert-[type].
  • Messages can feature HTML content.
  • Alerts can include a "close" button, to dismiss them. This works out the box with Bootstrap 4, or can otherwise be implemented separately.
  • Can be used for static alerts as well as Session based TempData driven alerts.
  • Can be used via AJAX to build alert markup without reloading the page.

It provides the following code items:

  • A model class representing a configurable Feedback Message.
  • Extension methods for setting and getting FeedbackMessageModels at TempData["FeedbackMessage"].
  • A View for rendering a FeedbackMessageModel as a Bootstrap 4 style alert.
  • A ViewComponent for rendering the above View, or a local override.
  • A TagHelper for rendering the above ViewComponent with a model either from TempData["FeedbackMessage"] or as configured by attributes.
  • A Controller for returning the above ViewComponent as configured by the HTTP request; useful for requesting via AJAX to add the result to a page.

Usage

Static usage in a Razor View

While not the most useful thing this library can do, it can be used as a TagHelper for bootstrap alert markup in a Razor view:

  1. Acquire the library via one of the methods above.
  2. Import TagHelpers from this assembly
    • add the following to a Razor View, or to _ViewImports.cshtml:
    • @addTagHelper *, UoN.AspNetCore.FeedbackMessage
  3. Use the <uon-feedbackmessage /> TagHelper in a Razor View.
  4. ????
  5. PROFIT!

TagHelper parameters

By default, an empty <uon-feedbackmessage /> TagHelper will only render an alert if a FeedbackMessage is set in TempData. This behaviour is configurable.

  • message - sets a static message on this FeedbackMessage tag.
    • this will always be rendered, unless use-tempdata is true, and a message is set in TempData.
  • type - sets an alert type (informing the CSS class) to use when rendering the above message.
    • defaults to secondary.
  • dismissable - sets whether the alert is dismissable when rendering the above message.
    • defaults to true.
  • use-tempdata - Specifies whether this FeedbackMessage should render messages in TempData, when they exist.
    • defaults to true.
    • if false, only the message as configured by the above attributes will be shown, TempData content will have no effect on this tag.
    • if true, when there is TempData content, it will be shown, otherwise the message as configured above will be shown.

Standard Server-side usage

  1. Acquire the library via one of the methods above.
  2. Ensure the ASP.NET Core Session Middleware is configured in your project.
  3. Use this.SetFeedbackMessage() inside an MVC Controller method.
  4. Import TagHelpers from this assembly
    • add the following to a Razor View, or to _ViewImports.cshtml:
    • @addTagHelper *, UoN.AspNetCore.FeedbackMessage
  5. Use the <uon-feedbackmessage /> TagHelper in a Razor View.
  6. ????
  7. PROFIT!

Refer to the TagHelper parameters above to see how the TagHelper can be further configured.

SetFeedbackMessage() parameters

  • message - sets a message in TempData.
  • type - sets an alert type (informing the CSS class) to use when rendering the above message.
    • defaults to secondary.
  • dismissable - sets whether the alert is dismissable when rendering the above message.
    • defaults to true.

An example:

MyController.cs

public class MyController : Controller
{
    ...

    public IActionResult MyAction()
    {
        this.SetFeedbackMessage("It's working!", "success");
        return View();
    }
}

MyAction.cshtml

<div>
    <uon-feedbackmessage />

    The rest of my HTML content is here and very interesting.
</div>
  • If a Feedback Message is not set, <uon-feedbackmessage /> will simply collapse into nothing.
  • If a Feedback Message is set, <uon-feedbackmessage /> will turn into something like the following:
<div class="alert alert-success">
    Hello!
</div>

AJAX usage

  1. Acquire the library via one of the methods above.
  2. Optionally specify an MVC Route template for the FeedbackMessageAjaxController, else it will default to /FeedbackMessageAjax as per MVC default conventions
  3. Write some javascript that makes an AJAX request, and puts the result onto the page.
  4. ????
  5. PROFIT!

/FeedbackMessageAjax Request parameters

  • message - sets a message for the markup to be returned in the AJAX response.
  • type - sets an alert type (informing the CSS class) to use when rendering the above message.
    • defaults to secondary.
  • dismissable - sets whether the alert is dismissable when rendering the above message.
    • defaults to true.

An example:

feedback-message.js

//global function that assumes we have jquery...
window.feedbackMessage = (message, type, dismissable) => {
    let feedback = $("#feedback-message"); //this is a div on the page

    $.get({
        url: "/FeedbackMessageAjax",
        data: { "message": message, "type": type, "dismissable": dismissable },
        success: function(content) {
            //use animation to make it clear the message has changed if there was already one there!
            feedback.fadeOut(200, "swing", function() {
                feedback.html(content);

                feedback.fadeIn(100);
            });
        }
    });
};

...

//some situation in which we want a feedback message
window.feedbackMessage("Hello!", "info");

Release Notes

This release is breaking in that it now requires ASP.NET Core 2.1 or newer. Please continue to use 1.x if you wish to use this library with ASP.NET Core 2.0.

New features in this release:

- Zero config usage. You no longer need to add anything to Startup to use the AJAX features.
- Static alerts - due to changes under the hood, the `<uon-feedbackmessage />` TagHelper can be used for static alerts on a page,
instead of the regular `TempData` driven behaviour. Attributes are use to configure the TagHelper.
- HTML is supported in messages. This just uses `HTML.Raw()` for now, so be aware of the risks and be careful.
- Dismissable alerts - alerts use Bootstrap 4's dismissable behaviour by default. They can be made optionally non-dismissable.
- Types enum is gone - to be more flexible we now just accept strings for types.
This plays better when not using Bootstrap, or with custom Bootstrap theme-colors defined.

Under the hood changes:

- The library is now built with the Razor SDK, and is therefore considered a "Razor Class Library".
This means that it requires ASP.NET Core 2.1, but its views, controllers etc. are available without further configuration.
- The actual alerts are now implemented as a ViewComponent, so their content is defined in an actual Razor View, which makes ading new features much simpler.
- The TagHelper now just renders the ViewComponent with details from TempData.
- The AJAX version no longer unnecessarily uses TempData. A side-effect of this is that the TagHelper version doesn't have to either.
- Theoretically, a custom override view inside a using project should be possible, to replace the one in the library. This hasn't been tested.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
2.1.0 456 1/11/2019
2.0.0 397 11/29/2018
1.1.0 625 11/3/2017
1.0.0 499 10/24/2017