Creating a Birthday Facebook App using ASP.NET MVC

Introduction

In my previous article I told you How to Create an App on Facebook and Connect it to ASP.NET MVC Project. In this article we will move one step further and make that app a Birthday App.

You can say that the previous article was the first part of the creation of the Birthday App. This article is the second part of the complete project. You need to go through all the articles to create the complete app.

In today's article I will show how to create a Birthday App for Facebook.

Note: Before going through this article you need to install the code that I provided with my previous article.

Step 1

Since you have already created an app, we are proceeding from where we had stopped the last time.

First we need to add the "Bootstrap NuGet" to our project. For that go to the Tools Menu and select "Manage NuGet Package Solution".

Now the "Manage NuGet Package Wizard" will be opened, here search for the Bootstrap and after finding it click on the "Install" button to install it.

Step 2

Clicking the "Install" button will open a new window that will ask you to "Add the Package" in the given project.

Now under the "App_Start" Folder you will find a .cs file that will be named "BundleConfig.cs". You need to open this file and then add the "BootStrap.css" and "bootstrap.jss" files to it, you will find these files under the Content and Script Folder.

Also you need to comment out the jQuery and Css files, so final the BundleConfig.cs file will look like this:

public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include("~/Scripts/jquery-ui-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.unobtrusive*","~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css,~/Content/bootstrap.css","~/Content/bootstrap-responsive.css"));
//bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
//"~/Content/themes/base/jquery.ui.core.css",
//"~/Content/themes/base/jquery.ui.resizable.css",
//"~/Content/themes/base/jquery.ui.selectable.css",
//"~/Content/themes/base/jquery.ui.accordion.css",
//"~/Content/themes/base/jquery.ui.autocomplete.css",
//"~/Content/themes/base/jquery.ui.button.css",
//"~/Content/themes/base/jquery.ui.dialog.css",
//"~/Content/themes/base/jquery.ui.slider.css",
//"~/Content/themes/base/jquery.ui.tabs.css",
//"~/Content/themes/base/jquery.ui.datepicker.css",
//"~/Content/themes/base/jquery.ui.progressbar.css",
//"~/Content/themes/base/jquery.ui.theme.css"));
bundles.Add(new ScriptBundle("~/bundles/app").Include(
"~/Scripts/bootstrap.js"));
}
}

Step 3

Now you must delete the "_Layout.cshtml" file that you will get under the "Views" -> "Home" -> "Shared". After deleting the file add the same file to the same location as the Downloaded Project (download the project that I had provided above).

After updating your "_Layout.cshtml" file it will look like this:

This page will help the user to find his specific friend on Facebook.

Step 4

Now go to the "Content Folder". There you will find a file that named "Site.css", open this page and and delete the margin line from the h1, this will stop the overlapping of the h1 and h2 headings.

Now you can run your project and you will see that a Search Box is added to your project with which you can find your friend, also you will see what friends have upcoming birthdays.