Post
Ask Question

Linking ASP.NET MVC Website With Facebook, Twitter, C# Corner Using Visual Studio

mvc

Introduction

This is an article which will let you know how to place social media links and icons like Facebook, Google+, C#Corner, Twitter etc. on ASP.NET websites using Model View Controller (MVC) Architecture with the Visual Studio 2015.

Now a days virtually every website has social media integration to gain more traffic on every page they have. I am confident that going through this hub you will learn the process to integrate social media on ASP.NET Websites having model view controller (MVC) architecture.

Before we start

Before we start, the prerequisites are to have knowledge about the basics of ASP.NET Model View Controller (MVC) architecture, coding in Visual Studio, and a little bit about Active Server Pages (ASP).

asp

A bit of things to know about Visual Studio

Visual Studio is a registered product of Microsoft with an integrated development environment to develop computer programs for Windows, Web Applications, Web Services and Mobile Applications for Microsoft Products as well as Android OS. The new version of Visual Studio i.e. VS2015 Community Edition has some great features included by Microsoft and if you like coding with DOT NET framework then upgrade your current development tool with VS2015.

VS2015 is free for developers who would like to code with .net, mobile application development, websites and much more. Individual programming development like engineering projects, desktop applications, web services in .NET etc.,
developed in VS 2015

Visual Studio Community 2015 supports multi-platform apps development for Windows, iOS, Android and more by using single IDE. As per your development need it allows you to build and deploy multi-platform apps or cross-platform apps on any platform for free. To Build and Debug web and cloud modern apps with the use of a free code editor that runs on multiple operating systems like Windows, Linux or OS X.

mvc

Basics of MVC

Model is a handler and it is a part of the application that contains actual logic to manage operations with application data.

View is a handler of the application which contains the look and feel of the application or you can say displays of data.

Controller is a handler and it is a part of the application that handles or catches user interactions and it catches all user interactions and sends data to the related model.

Model View Controller (MVC) architecture is better than the old Asp.net web forms and it helps you to manage large scale applications. The MVC parts or you can say that MVC separation helps you to manage complex applications because of focusing on  only one aspect at a time. The MVC separation simplifies the group of development with your application development team.

basic

Asp.net Introduction

Active Server Pages (ASP) known as Classic ASP first introduced by Microsoft's server side scripting technology to build websites having extensions .asp

Normally asp pages are written in VBScript. ASP.NET is a newer version or you can say that upgraded version of Active Server Pages having extensions .aspx for better support to web technologies to build user friendly websites with the support of Object Oriented Programming.

An ASP.NET web page supports both C#Script and VBScript and have large sets of XML-based components with back-end programming language support to manage database operations on large scale transactions and security support.


intro

Prerequisites
  • Create your own personal profile online with Visual Studio.
  • Install and configure Visual Studio 2013+
  • Create projects with online Visual Studio website or through Installed version.
  • Use Microsoft Azure services to host your website.
  • Set backgrounds and startup things for your project.
  • Going through this hub, you are climbing a step.

Let's start:

  1. Open your web browser & go to Visual Studio official website.

    website
                                                          Authentication

  2. Sign In with your own Outlook account. If you don’t have Microsoft account than you should first create it.

    Account Creation
                                                    Account Creation

  3. Create a free account on Visual Studio by click on Create a free account now.

    Load Dashboard
                                                           Load Dashboard

  4. Now go to dashboard & open your project in editor by clicking Open in Visual Studio.

    Solutions
                                                                   Solutions

  5. Open / Create Solutions by clicking on Open / New links as depicted below.

    ~/images
                                                             ~/images

  6. Now first of all download the required images and put it in your website storage like here I will store all images in folder named Image.

    Download required images

    code
                                                           Update files

  7. Now open “Default.aspx”, “bootstrap.css” & “Site.master” files & then edit the “Site.master” file as shown below.

    Just add this snippet code in Site.master page.
    1. <!--Social Linking-->  
    2. <asp:ContentPlaceHolderID="social"runat="server"></asp:ContentPlaceHolder>  
    3. <asp:ContentPlaceHolderrunat="server"ID="SocialContentListItems"></asp:ContentPlaceHolder>  
    Edit Site.master Page

    ~/Default.aspx
                                                          ~/Default.aspx

  8. Now go to “Default.aspx” file and add below mentioned snippets code.
    1. <asp:ContentID="SocialContent" ContentPlaceHolderID="social" runat="server">  
    2.     <divclass="social-links">  
    3.         <h5>Follow</h5>  
    4.         <arunat="server" href="https://web.facebook.com/codeblankk" target="_blank">  
    5.             <imgsrc="image/facebookLogo.jpg" alt="Follow Us on Facebook" />  
    6.             </a><br/><br/>  
    7.             <arunat="server" href="https://twitter.com/jaidrath_jd" target="_blank">  
    8.                 <imgsrc="image/twitterLogo.jpg" alt="Follow Us on Twitter" />  
    9.                 </a><br/><br/>  
    10.                 <arunat="server" href="http://www.c-sharpcorner.com/members/jaydip-trivedi" target="_blank">  
    11.                     <imgsrc="image/c-sharpcornerLogo.png" alt="Follow Us on C-sharpcorner.com" />  
    12.                     </a><br/><br/>  
    13.                     </div>  
    14.                     </asp:Content>  
    Note:

    Edit pages like Contact.aspx, About.aspx etc. which is not a part of sub module i.e. “Login.aspx” is a part of sub module known as “Account”.

     Default.aspx
    ~/Account/Login.aspx
                                                 ~/Account/Login.aspx

  9. Now go to the page “Login.aspx” which will be in Account folder and edit it with below mentioned snippets code.
    1. <asp:ContentID="ListItems" ContentPlaceHolderID="SocialContentListItems" runat="server">  
    2.     <!--List items mentioned dynamically here !-->  
    3.     <lirunat="server" id="SocialListItemDynamic">  
    4.         </li>  
    5.         </asp:Content>  
    6.         <asp:ContentID="SocialContent" ContentPlaceHolderID="social" runat="server">  
    7.             <divrunat="server" class='social-links' ID='SocialDiv'>  
    8.                 <!--Image dynamically added when Page Load-->  
    9.                 </div>  
    10.                 </asp:Content>  
    Login.aspx

    ~/Account/Login.aspx.cs
                                                 ~/Account/Login.aspx.cs

  10. In next step open “Login.aspx.cs” file and update it with below mentioned code.
    1. string htmlSocialImage = String.Empty;  
    2. /* Code put it in Page_Load method */  
    3. htmlSocialImage += @ "<h5>Follow</h5> < a runat = 'server'  
    4. href = 'https://web.facebook.com/codeblankk'  
    5. target = '_blank' >  
    6.     < img src = '../image/facebookLogo.jpg'  
    7. alt = 'Follow Us on Facebook' / > < /a><br / > < br / >  
    8.     < a runat = 'server'  
    9. href = 'https://twitter.com/jaidrath_jd'  
    10. target = '_blank' >  
    11.     < img src = '../image/twitterLogo.jpg'  
    12. alt = 'Follow Us on Twitter' / > < /a><br / > < br / >  
    13.     < a runat = 'server'  
    14. href = 'http://www.c-sharpcorner.com/members/jaydip-trivedi'  
    15. target = '_blank' >  
    16.     < img src = '../image/c-sharpcornerLogo.png'  
    17. alt = 'Follow Us on C-sharpcorner.com' / > < /a><br / > < br / > ";  
    18.   
    19. SocialDiv.InnerHtml = htmlSocialImage;  
    Login.aspx.cs
    ~/Content/Site
                                                    ~/Content/Site.css

    Note: Edit every page with above code which resides in sub modules i.e. Account or other sub modules of your website.

  11. Now it’s the time you need to update “Site.css” file which resides in Content folder with this snippets code.
    1. /*Social link management*/  
    2. .social - links   
    3. {  
    4.     position: fixed;  
    5.     width: 30 px;  
    6.     height: 100 px;  
    7.     background - color: #ffffff;  
    8.     margin - top: 2.5e m;  
    9. }  
    10.   
    11. .social - linksh5  
    12. {  
    13.         color: #808080;  
    14.         margin-left: 1em;  
    15. }  
    16.   
    17. .social-linksimg  
    18. {  
    19. margin-left: 1em;  
    20. height: 25px;  
    21. width: 25px;  
    22. position: fixed;  
    23. z-index: -1;  
    24. }  
    Site.css
    Run & Publish
                                                          Run & Publish

  12. Now run the application and it’s ready for publishing on the web.

    Ctrl + F5 | Execute
    mvc arch

  13. Thanks for reading this article.
If you like the task described in this hub please leave some comments and I might create more articles related to ASP.NET.

Have fun and enjoy doing it yourself.
 
Read more articles on  ASP.NET:


Similar Articles