documentation(EJ2-65405): Moved Message documentation changes to hotfix branch

ej2-asp-core-mvc/code-snippet/message/close-icon/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/message/close-icon/razor

@@ -0,0 +1,108 @@
+<div class="msg-icon-section">
+  <div class="msg-content-section">
+    @Html.EJS().Button("btn1").Content("Show Default Message").CssClass("e-outline e-primary msg-hidden").Render()
+    @Html.EJS().Message("msg_default_icon").Severity(Severity.Normal).Content("Editing is
+    restricted").ShowCloseIcon(true).Closed("defaultClosed").Render()
+    @Html.EJS().Button("btn2").Content("Show Info Message").CssClass("e-outline e-primary e-info msg-hidden").Render()
+    @Html.EJS().Message("msg_info_icon").Severity(Severity.Info).Content("Please read the comments
+    carefully").ShowCloseIcon(true).Closed("infoClosed").Render()
+    @Html.EJS().Button("btn3").Content("Show Success Message").CssClass("e-outline e-primary e-success
+    msg-hidden").Render()
+    @Html.EJS().Message("msg_success_icon").Severity(Severity.Success).Content("Your message has been sent
+    successfully").ShowCloseIcon(true).Closed("successClosed").Render()
+    @Html.EJS().Button("btn4").Content("Show Warning Message").CssClass("e-outline e-primary e-warning
+    msg-hidden").Render()
+    @Html.EJS().Message("msg_warning_icon").Severity(Severity.Warning).Content("There was a problem with your network
+    connection").ShowCloseIcon(true).Closed("warningClosed").Render()
+    @Html.EJS().Button("btn5").Content("Show Error Message").CssClass("e-outline e-primary e-danger
+    msg-hidden").Render()
+    @Html.EJS().Message("msg_error_icon").Severity(Severity.Error).Content("A problem has been occurred while submitting
+    your data").ShowCloseIcon(true).Closed("errorClosed").Render()
+  </div>
+</div>
+
+<script>
+  document.getElementById("btn1").onclick = function (e) {
+    var msgDefault = ej.base.getComponent(document.getElementById("msg_default_icon"), "message");
+    var defaultBtn = ej.base.getComponent(document.getElementById("btn1"), "btn");
+    show(msgDefault, defaultBtn);
+  }
+
+  document.getElementById("btn2").onclick = function (e) {
+    var msgInfo = ej.base.getComponent(document.getElementById("msg_info_icon"), "message");
+    var infoBtn = ej.base.getComponent(document.getElementById("btn2"), "btn");
+    show(msgInfo, infoBtn);
+  }
+
+  document.getElementById("btn3").onclick = function (e) {
+    var msgSuccess = ej.base.getComponent(document.getElementById("msg_success_icon"), "message");
+    var successBtn = ej.base.getComponent(document.getElementById("btn3"), "btn");
+    show(msgSuccess, successBtn);
+  }
+
+  document.getElementById("btn4").onclick = function (e) {
+    var msgWarning = ej.base.getComponent(document.getElementById("msg_warning_icon"), "message");
+    var warningBtn = ej.base.getComponent(document.getElementById("btn4"), "btn");
+    show(msgWarning, warningBtn);
+  }
+
+  document.getElementById("btn5").onclick = function (e) {
+    var msgError = ej.base.getComponent(document.getElementById("msg_error_icon"), "message");
+    var errorBtn = ej.base.getComponent(document.getElementById("btn5"), "btn");
+    show(msgError, errorBtn);
+  }
+</script>
+
+<script>
+  function defaultClosed() {
+    var defaultBtn = ej.base.getComponent(document.getElementById("btn1"), "btn");
+    defaultBtn.element.classList.remove("msg-hidden");
+  }
+
+  function infoClosed() {
+    var infoBtn = ej.base.getComponent(document.getElementById("btn2"), "btn");
+    infoBtn.element.classList.remove("msg-hidden");
+  }
+
+  function warningClosed() {
+    var warningBtn = ej.base.getComponent(document.getElementById("btn4"), "btn");
+    warningBtn.element.classList.remove("msg-hidden");
+  }
+
+  function successClosed() {
+    var successBtn = ej.base.getComponent(document.getElementById("btn3"), "btn");
+    successBtn.element.classList.remove("msg-hidden");
+  }
+
+  function errorClosed() {
+    var errorBtn = ej.base.getComponent(document.getElementById("btn5"), "btn");
+    errorBtn.element.classList.remove("msg-hidden");
+  }
+
+  function show(message, btn) {
+    message.visible = true;
+    btn.element.classList.add("msg-hidden");
+  }
+
+</script>
+
+<style>
+  .msg-icon-section .content-section {
+    margin: 0 auto;
+    max-width: 450px;
+    padding-top: 10px;
+  }
+
+  .msg-icon-section .e-message {
+    margin: 10px 0;
+  }
+
+  .msg-icon-section .e-btn {
+    display: block;
+    margin: 10px 0;
+  }
+
+  .msg-icon-section .e-btn.msg-hidden {
+    display: none;
+  }
+</style>

ej2-asp-core-mvc/code-snippet/message/close-icon/tagHelper

@@ -0,0 +1,105 @@
+<div class="msg-icon-section">
+  <div class="content-section">
+    <ejs-button id="btn1" content="Show Default Message" cssClass="e-outline e-primary msg-hidden"></ejs-button>
+    <ejs-message id="msg_default_icon" showCloseIcon="true" closed="defaultClosed" content="Editing is restricted">
+    </ejs-message>
+    <ejs-button id="btn2" content="Show Info Message" cssClass="e-outline e-primary e-info msg-hidden"></ejs-button>
+    <ejs-message id="msg_info_icon" severity="Info" showCloseIcon="true" closed="infoClosed"
+      content="Please read the comments carefully"></ejs-message>
+    <ejs-button id="btn3" content="Show Success Message" cssClass="e-outline e-primary e-success msg-hidden">
+    </ejs-button>
+    <ejs-message id="msg_success_icon" severity="Success" showCloseIcon="true" closed="successClosed"
+      content="Your message has been sent successfully"></ejs-message>
+    <ejs-button id="btn4" content="Show Warning Message" cssClass="e-outline e-primary e-warning msg-hidden">
+    </ejs-button>
+    <ejs-message id="msg_warning_icon" severity="Warning" showCloseIcon="true" closed="warningClosed"
+      content="There was a problem with your network connection"></ejs-message>
+    <ejs-button id="btn5" content="Show Error Message" cssClass="e-outline e-primary e-error msg-hidden"></ejs-button>
+    <ejs-message id="msg_error_icon" severity="Error" showCloseIcon="true" closed="errorClosed"
+      content="A problem has been occurred while submitting your data"></ejs-message>
+  </div>
+</div>
+
+<script type="text/javascript">
+  document.getElementById("btn1").onclick = function (e) {
+    var msgDefault = ej.base.getComponent(document.getElementById("msg_default_icon"), "message");
+    var defaultBtn = ej.base.getComponent(document.getElementById("btn1"), "btn");
+    show(msgDefault, defaultBtn);
+  }
+
+  document.getElementById("btn2").onclick = function (e) {
+    var msgInfo = ej.base.getComponent(document.getElementById("msg_info_icon"), "message");
+    var infoBtn = ej.base.getComponent(document.getElementById("btn2"), "btn");
+    show(msgInfo, infoBtn);
+  }
+
+  document.getElementById("btn3").onclick = function (e) {
+    var msgSuccess = ej.base.getComponent(document.getElementById("msg_success_icon"), "message");
+    var successBtn = ej.base.getComponent(document.getElementById("btn3"), "btn");
+    show(msgSuccess, successBtn);
+  }
+
+  document.getElementById("btn4").onclick = function (e) {
+    var msgWarning = ej.base.getComponent(document.getElementById("msg_warning_icon"), "message");
+    var warningBtn = ej.base.getComponent(document.getElementById("btn4"), "btn");
+    show(msgWarning, warningBtn);
+  }
+
+  document.getElementById("btn5").onclick = function (e) {
+    var msgError = ej.base.getComponent(document.getElementById("msg_error_icon"), "message");
+    var errorBtn = ej.base.getComponent(document.getElementById("btn5"), "btn");
+    show(msgError, errorBtn);
+  }
+
+  function defaultClosed() {
+    var defaultBtn = ej.base.getComponent(document.getElementById("btn1"), "btn");
+    defaultBtn.element.classList.remove("msg-hidden");
+  }
+
+  function infoClosed() {
+    var infoBtn = ej.base.getComponent(document.getElementById("btn2"), "btn");
+    infoBtn.element.classList.remove("msg-hidden");
+  }
+
+  function warningClosed() {
+    var warningBtn = ej.base.getComponent(document.getElementById("btn4"), "btn");
+    warningBtn.element.classList.remove("msg-hidden");
+  }
+
+  function successClosed() {
+    var successBtn = ej.base.getComponent(document.getElementById("btn3"), "btn");
+    successBtn.element.classList.remove("msg-hidden");
+  }
+
+  function errorClosed() {
+    var errorBtn = ej.base.getComponent(document.getElementById("btn5"), "btn");
+    errorBtn.element.classList.remove("msg-hidden");
+  }
+
+  function show(message, btn) {
+    message.visible = true;
+    btn.element.classList.add("msg-hidden");
+  }
+
+</script>
+
+<style>
+  .msg-icon-section .content-section {
+    margin: 0 auto;
+    max-width: 450px;
+    padding-top: 10px;
+  }
+
+  .msg-icon-section .e-message {
+    margin: 10px 0;
+  }
+
+  .msg-icon-section .e-btn {
+    display: block;
+    margin: 10px 0;
+  }
+
+  .msg-icon-section .e-btn.msg-hidden {
+    display: none;
+  }
+</style>

ej2-asp-core-mvc/code-snippet/message/content-alignment/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/message/content-alignment/razor

@@ -0,0 +1,20 @@
+<div class="msg-custom-section">
+    <div class="msg-content-section">
+        <h4>Content Alignment</h4>
+        @Html.EJS().Message("msg-content-left").Severity(Severity.Success).Content("Your license has been activated successfully").Render()
+        @Html.EJS().Message("msg-content-center").Severity(Severity.Warning).Content("The license will expire today").CssClass("e-content-center").Render()
+        @Html.EJS().Message("msg-content-right").Severity(Severity.Error).Content("The license key is invalid").CssClass("e-content-right").Render()
+    </div>
+</div>
+
+<style>
+  .msg-custom-section .content-section {
+    margin: 0 auto;
+    max-width: 400px;
+    padding-top: 10px;
+  }
+
+  .msg-custom-section .e-message {
+    margin: 10px 0;
+  }
+</style>

ej2-asp-core-mvc/code-snippet/message/content-alignment/tagHelper

@@ -0,0 +1,20 @@
+<div class="col-lg-12 control-section msg-custom-section">
+    <div class="content-section">
+        <h4>Content Alignment</h4>
+        <ejs-message id="msg_content_left" content="Your license has been activated successfully" severity="Success"></ejs-message>
+        <ejs-message id="msg_content_center" content="The license will expire today" cssClass="e-content-center" severity="Warning"></ejs-message>
+        <ejs-message id="msg_content_right" content="The license key is invalid" cssClass="e-content-right" severity="Error"></ejs-message>
+    </div>
+</div>
+
+<style>
+  .msg-custom-section .content-section {
+    margin: 0 auto;
+    max-width: 400px;
+    padding-top: 10px;
+  }
+
+  .msg-custom-section .e-message {
+    margin: 10px 0;
+  }
+</style>

ej2-asp-core-mvc/code-snippet/message/css-message/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/message/css-message/razor

@@ -0,0 +1,25 @@
+<div class="msg-default">
+  <div id="msg" class="e-message" role="alert">
+    <span class="e-msg-icon"></span>
+    <div class="e-msg-content">Please read the comments carefully</div>
+  </div>
+</div>
+<style>
+.msg-custom-section .content-section {
+  margin: 0 auto;
+  max-width: 400px;
+  padding-top: 10px;
+}
+
+.msg-custom-section .e-message {
+  margin: 10px 0;
+}
+
+.msg-custom-section .e-message.rounded {
+  border-radius: 5px;
+}
+
+.msg-custom-section .e-message.square {
+  border-radius: 1px;
+}
+</style>

ej2-asp-core-mvc/code-snippet/message/css-message/tagHelper

@@ -0,0 +1,25 @@
+<div class="msg-default">
+  <div id="msg" class="e-message" role="alert">
+    <span class="e-msg-icon"></span>
+    <div class="e-msg-content">Please read the comments carefully</div>
+  </div>
+</div>
+<style>
+.msg-custom-section .content-section {
+  margin: 0 auto;
+  max-width: 400px;
+  padding-top: 10px;
+}
+
+.msg-custom-section .e-message {
+  margin: 10px 0;
+}
+
+.msg-custom-section .e-message.rounded {
+  border-radius: 5px;
+}
+
+.msg-custom-section .e-message.square {
+  border-radius: 1px;
+}
+</style>

ej2-asp-core-mvc/code-snippet/message/custom-appearance/controller.cs

@@ -0,0 +1,8 @@
+public class HomeController : Controller
+{
+
+    public ActionResult Index()
+    {
+        return View();
+    }
+}

ej2-asp-core-mvc/code-snippet/message/custom-appearance/razor

@@ -0,0 +1,28 @@
+<div class="msg-custom-section">
+    <div class="msg-content-section">
+      <h4>Rounded</h4>
+      @Html.EJS().Message("rounded").Severity(Severity.Warning).Content("The license will expire today").CssClass("rounded").Render()
+      <h4>Rounded</h4>
+      @Html.EJS().Message("square").Severity(Severity.Error).Content("The license key is invalid").CssClass("square").Render()
+    </div>
+</div>
+
+<style>
+  .msg-custom-section .content-section {
+    margin: 0 auto;
+    max-width: 400px;
+    padding-top: 10px;
+  }
+
+  .msg-custom-section .e-message {
+    margin: 10px 0;
+  }
+
+  .msg-custom-section .e-message.rounded {
+    border-radius: 5px;
+  }
+
+  .msg-custom-section .e-message.square {
+    border-radius: 1px;
+  }
+</style>