HTML Tutorials

#5 Using Emojis / Emoticons 👍

Resources

Emojipedia

Working with 😃 Emojis / Emoticons

Emojis or Emoticons are built into all mobile devices and modern desktops. The way they work is that they are actually a very long character code - which automatically works in UTF-8 documents. That is the default in asp.net, so you're good to go.

Just showing Emojis in Source-Code

Check out 🙈 🙉 🙊 ☔ 🎄 - I just pasted these into the source code from emojipedia

Showing Emojis instead of true/false

Below you'll see a helper I created called Boolmoji - it will show a ✔️ or ❌ instead of boolean values.

Output

Boolmoji(true) ⇒ ✔️
Boolmoji(false) ⇒ ❌

@functions {
  string Boolmoji(bool value) { return value ? "✔️" : "❌"; }
}
<ul>
  <li>Boolmoji(true) ⇒ @Boolmoji(true)</li>
  <li>Boolmoji(false) ⇒ @Boolmoji(false)</li>
</ul>

Work with HTML

#5 Using Emojis / Emoticons 👍

Introduction Reuse templates and code

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/_DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2>Working with 😃 Emojis / Emoticons</h2>
      <p>
        Emojis or Emoticons are built into all mobile devices and modern desktops. The way they work is that they are actually a very long character code - which automatically works in UTF-8 documents. That is the default in asp.net, so you're good to go. 
      </p>
    </div>
  </div>

  <h2>Just showing Emojis in Source-Code</h2>
  <p>
    Check out 🙈 🙉 🙊 ☔ 🎄 - I just pasted these into the source code from <a href="https://emojipedia.org/" target="_blank">emojipedia</a>
  </p>

  <h2>Showing Emojis instead of true/false</h2>
  <p>
    Below you'll see a helper I created called Boolmoji - it will show a @Boolmoji(true) or @Boolmoji(false) instead of boolean values.
  </p>
</trim>

@functions {
  string Boolmoji(bool value) { return value ? "✔️" : "❌"; }
}
<ul>
  <li>Boolmoji(true) ⇒ @Boolmoji(true)</li>
  <li>Boolmoji(false) ⇒ @Boolmoji(false)</li>
</ul>