Header Ads

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

February 21, 2019 , , , ,
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.

Post a Comment

35 comments:

  1. Carl5 April 2019 at 15:31

    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. olivermir28 August 2019 at 10:56

    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
  3. Ummar Ibrahim6 April 2020 at 11:03

    How can in integrate coding snippets in my blog.

    ReplyDelete
  4. George6 June 2020 at 13:44

    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
  5. Anonymous7 June 2020 at 13:02

    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. Asma's Blog7 June 2020 at 19:24

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

      Delete
  6. Anonymous8 June 2020 at 19:14

    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
  7. julie lars8 June 2020 at 21:10

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

    ReplyDelete
  8. Anonymous11 June 2020 at 13:48

    This comment has been removed by the author.

    ReplyDelete
  9. khanabaaz11 June 2020 at 21: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
  10. sdexter14 June 2020 at 21:50

    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
  11. George8 July 2020 at 14:07

    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
  12. mtom8 July 2020 at 16:47

    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
  13. keivi jhons13 July 2020 at 12:23

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

    ReplyDelete
  14. william locas14 July 2020 at 16:18

    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
  15. markthomson7 August 2020 at 07:47

    I truly awed after read this in view of some quality work and instructive considerations . I just wanna express profound gratitude for the essayist and want you to enjoy all that life has to offer for coming!. How to remove negative content online

    ReplyDelete
    Replies
    1. Asma's Blog7 August 2020 at 08:57

      Thank you for your kind words and support.

      Delete
  16. james21 August 2020 at 23:30

    I wanted to thank you for this excellent read!! I definitely loved every little bit of it. I have you bookmarked your site to check out the new stuff you post. content writing articles

    ReplyDelete
  17. M. Taha22 August 2020 at 02:49

    Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me. SEO Agency Vancouver

    ReplyDelete
  18. Gelbero Lam10 October 2020 at 12:15

    I really loved reading your blog. It was very well authored and easy to undertand. Unlike additional blogs I have read which are really not tht good. I also found your posts very interesting. In fact after reading. I had to go show it to my friend and he ejoyed it as well! agen asuransi allianz

    ReplyDelete
  19. miracle spring3 December 2020 at 05:26

    I know your expertise on this. I must say we should have an online discussion on this. Writing only comments will close the discussion straight away! And will restrict the benefits from this information. email marketing costs

    ReplyDelete
  20. AB23 February 2021 at 03:32

    This post is very simple to read and appreciate without leaving any details out. Great work! vpn 推荐

    ReplyDelete
  21. seo1 March 2021 at 14:21

    Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. content marketing for family businesses

    ReplyDelete
  22. Unknown6 May 2021 at 09:07

    Nice blogpost, I really like your article and I read your article a couple of times. I have seen some websites which are very similar to yours, for example:
    中国 vpn
    One can also see this:
    VPN 台灣

    ReplyDelete
  23. Vanura Organics6 July 2021 at 13:52

    I like this comment so much that I bookmarked this for the future use. Visit my website Vanur Organics

    ReplyDelete
  24. Jamesy6 July 2021 at 15:51

    I haven’t any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. html email link

    ReplyDelete
  25. wqeiuyd 12eee1e13 August 2021 at 23:23

    this blog is very useful Click here for LO RESULT Pakistan
    I appreciate shairng this knowledge

    ReplyDelete
  26. GORILLA9 September 2021 at 20:26

    I was reading some of your content on this website and I conceive this internet site is really informative ! Keep on putting up. nursing test bank

    ReplyDelete
  27. yadongbizz28 January 2022 at 17:25

    Glad to read your article, looking forward to sharing your adventures and experiences and expect a quality work! 일본야동

    Please visit once. I leave my blog address below
    한국야동
    일본야동

    ReplyDelete
  28. WallVPN16 February 2022 at 15:08

    Great article, thanks for sharing. Looks great and very professional.翻墙

    ReplyDelete
  29. Alex Cornore17 March 2022 at 13:52

    I love the look of your website. I recently built mine and I was looking for some ideas for my site and you gave me a few. May I ask you whether you developed the website by youself? top article writers

    ReplyDelete
  30. Premier Lift Equipment25 February 2023 at 22:37

    This is a excellent blog, would you be involved in doing an interview about just how you designed it? If so e-mail me! riatoto

    ReplyDelete
  31. Premier Lift Equipment25 February 2023 at 22:38

    This is a excellent blog, would you be involved in doing an interview about just how you designed it? If so e-mail me! riatoto

    ReplyDelete

Subscribe to: Post Comments ( Atom )