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.

17 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
  4. How can in integrate coding snippets in my blog.

    ReplyDelete
  5. I dont think Ive scan anything like this before. So good to find somebody with some original thoughts on this subject. nice one for starting this up. This site is something that is needed on the web, someone with a little originality. Good job for bringing something new to the internet! web design new york

    ReplyDelete
  6. Does your website have a contact page? I’m having trouble locating it but, I’d like to send you an email. I’ve got some suggestions for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it develop over time. website designers nyc

    ReplyDelete
    Replies
    1. Here is contact page https://www.asmak9.com/p/contact-us.html

      Delete
  7. Magnificent beat ! I would like to apprentice whilst you amend your website, how could i subscribe for a weblog site? The account helped me a appropriate deal. I had been a little bit acquainted of this your broadcast provided brilliant transparent idea web design new york

    ReplyDelete
  8. Hi! Great post! Please do tell us when I will see a follow up! web design agency new york

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post! branding san francisco

    ReplyDelete
  11. Hello! I simply would wish to offer a huge thumbs up for that great info you’ve here during this post. I will be returning to your website to get more soon. best branding agencies san francisco

    ReplyDelete
  12. I do not know the things I could possibly have implemented without these methods shown by you over such a area of interest. T los angeles web design

    ReplyDelete
  13. Do you mind generally if I cite a few of your content articles so long as I deliver you acknowledgement as well as sources returning to yuor web blog? My web pages is in the similar specialized niche as your site and my site guests will make use of some of the information and facts your site present at this website. Please let me know if it is okay with you. Take care! web design la

    ReplyDelete
  14. I got what you mean , regards for posting .Woh I am pleased to find this website through google. website design company

    ReplyDelete
  15. Great goods from you, man. I’ve understand your stuff previous to and you’re just extremely great. I really like what you have acquired here, really like what you’re stating and the way in which you say it. You make it entertaining and you still take care of to keep it sensible. I cant wait to read much more from you. This is really a wonderful website. web design

    ReplyDelete