Header Ads

How to Save & Display HTML Content in ASP.NET MVC5

In web development, sometimes, it becomes necessary to write and save content in HTML format. In order to write HTML content many jquery base rich text editor plugins are available out there which are easily integrated with ASP.NET MVC5. Saving and displaying the HTML content is entirely different topic and it is completely platform dependent that what sort of options or libraries do the platform provides in order to save and display the HTML content.

Today, I shall be demonstrating saving and displaying of HTML content in ASP.NET MVC5 platform


Prerequisites:

Following are some prerequisites before you proceed any further in this tutorial:
  1. Knowledge of ASP.NET MVC5.
  2. Knowledge of Rich Text Editor.
  3. Knowledge of HTML.
  4. Knowledge of JavaScript.
  5. Knowledge of Bootstrap.
  6. Knowledge of Jquery.
  7. Knowledge of C# Programming.
You can download the complete source code for this tutorial or you can follow the step by step discussion below. The sample code is being developed in Microsoft Visual Studio 2015 Enterprise.

Download Now!

Let's begin now.

1) First create your SQL server database and name it "db_html". Then execute following script into your SQL server database i.e.

USE [db_html]
GO
/****** Object:  StoredProcedure [dbo].[Insert_HTML_Content]    Script Date: 2/20/2019 4:47:28 PM ******/
DROP PROCEDURE [dbo].[Insert_HTML_Content]
GO
/****** Object:  StoredProcedure [dbo].[display_all_HTML_Content]    Script Date: 2/20/2019 4:47:28 PM ******/
DROP PROCEDURE [dbo].[display_all_HTML_Content]
GO
/****** Object:  Table [dbo].[tbl_html_info]    Script Date: 2/20/2019 4:47:28 PM ******/
DROP TABLE [dbo].[tbl_html_info]
GO
/****** Object:  Table [dbo].[tbl_html_info]    Script Date: 2/20/2019 4:47:28 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tbl_html_info](
 [id] [int] IDENTITY(1,1) NOT NULL,
 [html_content] [nvarchar](max) NOT NULL,
 CONSTRAINT [PK_tbl_html_info] PRIMARY KEY CLUSTERED 
(
 [id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

GO
/****** Object:  StoredProcedure [dbo].[display_all_HTML_Content]    Script Date: 2/20/2019 4:47:28 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:  <Author,,Name>
-- Create date: <Create Date,,>
-- Description: <Description,,>
-- =============================================
CREATE PROCEDURE [dbo].[display_all_HTML_Content]
AS
BEGIN
 SELECT [id]
    ,[html_content]
 FROM [dbo].[tbl_html_info]
END

GO
/****** Object:  StoredProcedure [dbo].[Insert_HTML_Content]    Script Date: 2/20/2019 4:47:28 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author:  <Author,,Name>
-- Create date: <Create Date,,>
-- Description: <Description,,>
-- =============================================
CREATE PROCEDURE [dbo].[Insert_HTML_Content] 
 @html_content NVARCHAR(MAX)
AS
BEGIN
 INSERT INTO [dbo].[tbl_html_info]
      ([html_content])
 VALUES
      (@html_content)
END

GO

Don't forget to update your database connection in "Web.Config" file.

2) Create a new MVC web project and name it "MVCDisplayHTMLContent".  

3) Open the "Views->Shared->_Layout.cshtml" file and replace following code in it i.e.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <center>
                <p><strong>Copyright &copy; @DateTime.Now.Year - <a href="http://www.asmak9.com/">Asma's Blog</a>.</strong> All rights reserved.</p>
            </center>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    @RenderSection("scripts", required: false)
</body>
</html>

In the above code, I have simply created a basic default layout page and linked the require libraries into it.

4) Now, create a new "Models\HTMLDisplayViewModel.cs" file and replace the following code in it i.e.

//-----------------------------------------------------------------------
// <copyright file="HTMLDisplayViewModel.cs" company="None">
//     Copyright (c) Allow to distribute this code and utilize this code for personal or commercial purpose.
// </copyright>
// <author>Asma Khalid</author>
//-----------------------------------------------------------------------

namespace MVCDisplayHTMLContent.Models
{
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.Web.Mvc;

    /// <summary>
    /// HTML display view model class.
    /// </summary>
    public class HTMLDisplayViewModel
    {
        /// <summary>
        /// Gets or sets the HTML content property.
        /// </summary>
        [AllowHtml]
        [Required]
        [Display(Name = "HTML Content")]
        public string HtmlContent { get; set; }

        /// <summary>
        /// Gets or sets message property.
        /// </summary>
        [Display(Name = "Message")]
        public string Message { get; set; }

        /// <summary>
        /// Gets or sets a value indicating whether it is valid or not property.
        /// </summary>
        [Display(Name = "Is Valid")]
        public bool IsValid { get; set; }

        /// <summary>
        /// Gets or sets list property.
        /// </summary>
        public List<display_all_HTML_Content_Result> HTMLContentList { get; set; }
    }
}

In the above code, I have created my view model which I will attach with my view. Here, I have created string type HTML content property and attach [AllowHtml] data annotation to allow HTML content to be captured from the end-user. I have also added message property which will display either success or failure messages from server side. Then I have added is valid property which will validate success or failure from server side to display proper message and finally, I have added HTML content list property which will display the list of all saved HTML content from the database.

5) Create a new "Controllers\HTMLDisplayController.cs" file and replace the following code in it i.e.

//-----------------------------------------------------------------------
// <copyright file="HTMLDisplayController.cs" company="None">
//     Copyright (c) Allow to distribute this code and utilize this code for personal or commercial purpose.
// </copyright>
// <author>Asma Khalid</author>
//-----------------------------------------------------------------------

namespace MVCDisplayHTMLContent.Controllers
{
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using Models;

    /// <summary>
    /// HTML display controller class.
    /// </summary>
    public class HTMLDisplayController : Controller
    {
        #region Private Property

        /// <summary>
        /// Gets or sets database manager property.
        /// </summary>
        private db_htmlEntities databaseManager = new db_htmlEntities();

        #endregion

        #region Index view method.

        #region Get: /HTMLDisplay/Index method.

        /// <summary>
        /// Get: /HTMLDisplay/Index method.
        /// </summary>        
        /// <returns>Return index view</returns>
        public ActionResult Index()
        {
            // Initialization/
            HTMLDisplayViewModel model = new HTMLDisplayViewModel() { HtmlContent = null, IsValid = false, Message = string.Empty, HTMLContentList = new List<display_all_HTML_Content_Result>() };

            try
            {
                // Get info list.
                model.HTMLContentList = this.databaseManager.display_all_HTML_Content().ToList();
            }
            catch (Exception ex)
            {
                // Info
                Console.Write(ex);
            }

            // Info.
            return this.View(model);
        }

        #endregion

        #region POST: /HTMLDisplay/Index

        /// <summary>
        /// POST: /HTMLDisplay/Index
        /// </summary>
        /// <param name="model">Model parameter</param>
        /// <returns>Return - Response information</returns>
        [HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public ActionResult Index(HTMLDisplayViewModel model)
        {
            try
            {
                // Verification
                if (ModelState.IsValid)
                {
                    // save info.
                    this.databaseManager.Insert_HTML_Content(model.HtmlContent);

                    // Commit database.
                    this.databaseManager.SaveChanges();

                    // Settings.
                    model.HTMLContentList = this.databaseManager.display_all_HTML_Content().ToList();
                    model.Message = "Information successfully!! saved.";
                    model.IsValid = true;
                }
                else
                {
                    if (string.IsNullOrEmpty(model.HtmlContent))
                    {
                        // Settings.
                        model.HTMLContentList = new List<display_all_HTML_Content_Result>();
                        model.Message = "Require field can not be emptied";
                        model.IsValid = false;
                    }
                }
            }
            catch (Exception ex)
            {
                // Info
                Console.Write(ex);
            }

            // Info
            return this.View(model);
        }

        #endregion

        #endregion
    }
}

In the above code, I have created  databaseManager private property which will allow me to access my SQL database via entity framework. Then, I have created GET "Index(...)" method which will retrieve list of HTML content data from SQL database and send it to the view page. Finally, I have created POST "Index(...)" method which will receive input HTML content from the end-user, save the HTML content into the SQL database and finally I have retrieved the saved HTML content list and pass that list to the view page.

6) Now, create a view "Views\HTMLDisplay\Index.cshtml" file and replace the following code in it i.e.

@using MVCDisplayHTMLContent.Models
@model HTMLDisplayViewModel
@{
    ViewBag.Title = "ASP.NET MVC5: Save and Display HTML content.";
}

<div class="row">
    <div class="panel-heading">
        <div class="col-md-8">
            <h3>
                <i class="fa fa-file-text-o"></i>
                <span>ASP.NET MVC5: Save and Display HTML content</span>
            </h3>
        </div>
    </div>
</div>

<br />

<div class="row">
    <div class="col-md-12">
        <section>
            @using (Html.BeginForm("Index", "HTMLDisplay", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                @Html.AntiForgeryToken()

                <h5>
                    <i class="fa fa-link" aria-hidden="true"></i>
                    <a href="http://summernote.org/">Summernote Rich Text WYSIWYG Editor</a>
                </h5>

                <hr />

                <div class="form-group">
                    <label class="col-md-4 control-label">HTML Contnet </label>
                    <div class="col-md-8">
                        <div class="input-group">
                            @Html.TextAreaFor(m => m.HtmlContent, new { rows = "20", style = "resize:none;width:400px;", placeholder = Html.DisplayNameFor(m => m.HtmlContent), @class = "form-control input-lg textarea-editor" })
                        </div>
                            @if (Model.IsValid && !string.IsNullOrEmpty(Model.Message))
                            {
                                <span class="text-success">@Model.Message</span>
                            }
                            else
                            {
                                <span class="text-danger">@Model.Message</span>
                                @Html.ValidationMessageFor(m => m.HtmlContent, "", new { @class = "text-danger" })
                            }
                    </div>
                </div>

                <div class="form-group">
                        <div class="col-md-10 col-md-push-4">
                            <input type="submit" value="Save" class="btn btn-info" />
                        </div>
                    </div>
            }
        </section>
    </div>
</div>

<hr />

@if (Model.HTMLContentList != null &&
                 Model.HTMLContentList.Count > 0)
{
    <div class="row">
        <div class="col-md-offset-4 col-md-8">
            <h3>List of HTML Content </h3>
        </div>
    </div>

    <hr />

    <div class="row">
        <div class="col-md-offset-1 col-md-8">
            <section>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th style="text-align: center;">Sr.</th>
                            <th style="text-align: center;">HTML Content</th>
                        </tr>
                    </thead>

                    <tbody>
                        @for (int i = 0; i < Model.HTMLContentList.Count; i++)
                        {
                            <tr>
                                <td style="text-align: center;">@(i + 1)</td>

                                <td style="text-align: center;">
                                    <div class="input-group">
                                        @Html.Raw(Model.HTMLContentList[i].html_content)
                                    </div>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </section>
        </div>
    </div>
}

@section Scripts
{
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
    @Scripts.Render("~/bundles/Script-custom-editor")

    <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">

}

In the above code, I have created a simple view for taking HTML content input from the end-user via Rich Text Editor, then, I have displayed the list of HTML content that is being saved by the user on my server into SQL database.

In the list part of the above code, following line of code will display the HTML content on the view page i.e.

@Html.Raw(Model.HTMLContentList[i].html_content)

The above line of code take string or object type value as input and then display the content in HTML format.

7) Now, execute the project and you will be able to see the following in action i.e.


Conclusion

In this article, you will learn about saving HTML content in to into SQL server database and displaying the saved HTML content on the web page using ASP.NET MVC5 platform. You will also using Rich Text Editor JQuery plugin to take HTML content input from the end-user.

3 comments:

  1. Blast from the past 😅 Visual Studio 2015 and MVC5 - can you talk us through why you aren't 2017 or today's 2019 edition and ASP.NET Core?

    ReplyDelete
  2. Buy the best garden sheds nz online in Newzealand. We provide you quality products at low prices. Treasurebox also provide you home delievery services in Auckland Newzealand.

    ReplyDelete
  3. i read a considerable measure of stuff and i found that the method for composing to clearifing that precisely need to say was great so i am inspired and ilike to come back again in future.. Content creation

    ReplyDelete