AllInWorld99 provides a reference manual covering many aspects of web programming, including technologies such as HTML, XHTML, CSS, XML, JavaScript, PHP, ASP, SQL,FLASH, jQuery, java, for loop, switch case, if, if else, for...of, for...in, for...each,while loop, blogger tips, blogger meta tag generator, blogger tricks, blogger pagination, client side script, html code editor, javascript editor with instant output, css editor, online html editor, materialize css tutorial, materialize css dropdown list,break, continue statement, label,array, json, get day and month dropdown list using c# code, CSS button,protect cd or pendrive from virus, cordova, android example, html and css to make android app, html code play,telerik show hide column, Transparent image convertor, copy to clipboard using javascript without using any swf file, simple animation using css, SQL etc. AllInWorld99 presents thousands of code examples (accompanied with source code) which can be copied/downloaded independantly. By using the online editor provided,readers can edit the examples and execute the code experimentally.


     The following animation is the very simplest and basic animation using pure css. It should be understandable and easy to understand the concept of animation.

     @keyframe is used to create a animation, the syntax is shown below

syntax





Example Program:- (Editor)


Editor is Loading...

Advertisement

      We can create the good view using divider and section class, divider class is used to separate the content through horizontal line and section class is used to identify the contents are same section.

     The divider class is used to divide the space between two div or two content, it will create a horizontal line in the two content for separate.

     flow-text class is like font it will apply text style for the specified text.

     If we are separate the column using s1 to s12 then it will start from left side(first), but in some situation if we want to align the div in right side end we can use offset class.

     In the following example contain header and followed by the header the next row is separated into three parts, most of the websites are  using this type of layout.

     The following example is explain about the layout, it contain two rows and first row contain 12 columns(single column) and next row contain two columns (6 + 6 columns).

     Microsoft ASP.NET  Mvc  is a web application development framework built on mature .net framework.
     Asp is a scripting language in which code and markup are authored together in a single file.

Asp.net Web Forms
     It is a page based approach where each page on the website’s is represented in the form of a physical file called a webform.

WEB FORMS page provides separation of code and markup by splitting  the web content into two different files
      One for the markup
      One for the code

WEB FORM APPROACH is an abstraction from the underlying HTML,JAVASCRIPT and CSS

ASP.Net MVC Architecture
     MVC   means Model  ViewController. MVC pattern spilits into three layers that is model,view,controller.
MVC Architucture

Model
     It means  the properties  and behavior of a domain  entity. Database is a collection of data that data retrieved from back end to front end through the models

View
     View  means  transforming  a  model  or  models  into a visual representation. ASP.NET   webforms  are  here ( in MVC)called Views. Say in simple ,the VIEWS  means  DESIGN.
CREATING  AN  ASP.NET MVC APPLICATION:

Step 1
     Microsoft visual studio is an IDE(Integrated Development Environment)

(a) Open a  Microsoft visual studio2013
(b) Select New Project from the Start page.Otherwise you can use menu(Select file ->new project).

MVC Startup Page

Step 2
     You can create applications using either Visual Basic or Visual C# as the programming language. Select Visual C# on the left and then select ASP.NET MVC 4 Web Application. Name your project "MvcApplication1" and then click OK.

Selection for MVC Program

     In the New ASP.NET MVC 4 Project dialog box, select Internet Application. Leave Razor as the default view engine.
     The New ASP.NET MVC4 Project dialog box have project templates. The project templates are Empty, Basic, Internet Application, Intranet Application,Mobileapplication,Web API.

New MVC 4 Project

EMPTY
     For good understanding I preferred to start with Empty project template.

Empty project template is basic ASP.NET MVC website generating no code and providing you with nothing to start with. Adding a Model, View.
That means user only add models and create views and generating code.
BASIC:
This template has the basic folders, CSS and basic MVC application structure. The difference between Empty and basic template is you only find content and scripts folders in basic template. This template is for experienced developers who can setup everything them self

INTERNET APPLICATION
     The Internet Application project template extends the Basic template by adding a few basic controllers and views. Also it generates code and configuration that gives you full membership and authentication functionality.
The Internet Application extends Basic Template with two controllers( Account controller and Home controller)  with all the logic and functionality implemented in actions and views. In this template membership management functionality gives the option to user to register and login, change password etc in the website.
It's a template used usually to start a normal web project in action.

INTRANET APPLICATION
     Intranet application is practically empty web application with home controller and support for Windows authentication. As Windows authentication is optional choice when configuring web application you should do some manual configuring to get intranet application run.
As intranet application uses Windows authentication it doesn’t need sign-in, registering and password reminder forms. Also it does not need model classes for authentication. By all other parts the intranet application is the same as internet application.
WEB API
     This template is for creating the HTTP services. It is similar to the Internet Application template but without account management functions. This Web API functionality is also available for other MVC project templates and non-MVC project types.


Select Internet application from above dialog box .Then below page will be displayed.

MVC Sample Application


THE SOLUTION EXPLORER OF INTERNET APPLICATION

1). Click controllers folder in SOLUTION EXPLORER.
2).They  have AccountController.cs  and HomeController.cs.so we click on Accountcontroller or HomeController ,we will see below page 
MVC Application

From below fig we will see how we run this page.
MVC Controller

Output
Running output of MVC Application

     The homecontroller have three default VIEWS they are home,about,contact. Lets see the output while we select the internet application .The above fig is  Home page of internet application template.It have register,login ,home,about,contact.The register and login page code manage by Accountcontroller.Home,About,Contact page codes are manage by HomeController.Now we see the code of the Home Page in InternetApplication.


     The following page is displayed when We will click  on About .simirarly we click contact the contact page will be displayed.

MVC Output
View Engine:
     ASP.NET MVC   support web form (aspx) and razor view engine. View engine is responsible for rendering the view into html form to the browser.
The name space for razor  engine is System.Web.Razor
The name space for webform engine is System.Web.Mvc.WebForm and it is depend on System.Web.UI.PageClass .

Package manager NuGet:
     NuGet is a package manager tool that    allows open-source libraries to quickly
and easily be added to any .NET project.AlthoughNuGet is not tied to ASP.NET
MVC projects, it does ship as part of the ASP.NET MVC installer so you can start
using it right away without having to perform a separate install. This functionality is found in a package called EntityFramework. SqlServerCompact, which can be
installed by right-clicking on the References node within the project.

MVC NuGet Packages

EntityFramework

Search bootstrap and jquery packages and install it.

How it works
Adding a model:
1).Install sqlserver2008.
2)open sqlserver2008 ,then view the following page and click connect.

Connect SQL server 2014

Create database:
1. Right click on database and click new database

Expand Database

Create New Database

Created Database

After creating database(guestbookdatabase),we need create table.
1.First expand guestbookdatase.That shown following

Table in sql
Create columns in table and set primary key to id column because we need unique identification for all data.
Create Columns in table

Create Identity with primary Key


Then click(ctrl+s) for save a table.
Save table

Right click on Tables and Choose edit with top20 rows.
Through the following fig,we will see data’s in a table. And also 

Add column in table

Now we  go to front end(visual studio2013).
How to add model
Create class file in MVC

Give class name

Created Class file

The  entities are retrieve from database through model then click rebuild.

Creating controller
Create controller

The Add Controller dialog box provides the ability to customize the controller—
the Template dropdown allows you to select whether you want the controller to be generated as an empty class (the default option), or whether you want some common
scenarios to be automatically generated for you. Two of the several options are
     Controller with Read/Write Actions and Views—This option will generate controller
action methods and views that provide simple CRUD (create, read, update, delete)
screens using Entity Framework (which we’ll discuss in more detail in a moment).
     Controller with Empty Read/Write Actions—This option will generate controller
actions for CRUD scenarios, but without generating any views or using any particular
data access technology.
We’ll use the default Empty Controller template for now.
After you click the Add button, the new controller will be opened in the Visual Studio   Editor.

Now we want to adding (eg).create action to this controller.
merbins
namespaceGuestbook.Controllers
{
 public class GuestbookController : Controller
 {
   publicActionResult Create()
  {
    return View();
  }
 }
}
merbine

Then move cursor to create word in above  controller code and rightclick on that word.then open  dialog box and click addview.

Add View

Enter View Name in MVC

Selecting a view to render
A view is rendered by calling the View method from within a controller action. The Create action in our GuestbookControllershows this
merbins
publicActionResult Create()
{
 return View();
}
merbine

In this case, the Views/Guestbook/Create.cshtml view file is rendered. But how does the MVC Framework know to render this particular view rather than one of the other views in the application (such as Index.cshtml)?Calling the View method returns a ViewResultobject that knows how to render a particular view. When
this method is called with no arguments, the framework infers that the name of the view to render should be the same as the name of the action (Create). Later in the MVC pipeline, the framework’s ControllerActionInvokerclass executes the ViewResultand tells it to render the view. At this point, the framework asks the ViewEngineCollectionto locate the appropriate view for rendering. (As you’ve already seen back in chapter 2, by default the view engine will look for views
within the Views/<Controller Name> directory and the Views/Shared directory).

Complete above process then automatically  addcreate View(create.cshtml) to VIEWS IN SOLUTION EXPOLORER
All views are controlled by controller.And also we can  create  more controllers.

Example for view
@{
  ViewBag.Title = "Add new entry";
}
<h2>Add new entry</h2>
<form method="post" action="">
<fieldset>
Please enter your name: <br />
<input type="text" name="Name" maxlength="200" />
<br /><br />
Please enter your message: <br />
<textarea name="Message" rows="10" cols="40">
</textarea>
<br /><br />
<input type="submit" value="Submit Entry" />
</fieldset>
</form>
merbine

THE APP_DATA DIRECTORY
     The App_Data directory can be used to store databases, XML files, or any other datathat your application needs. The ASP.NET runtime understands this special directory
and will prevent users from accessing files in it directly. Only your application can
read and write to this directory.

THE CONTENT DIRECTORY
     The purpose of the Content directory is to contain any noncode assets that need to be
deployed with your application. These typically include images and CSS files(stylesheets). By default, the Content directory contains the defaultstylesheetused by the project(Site.css) as well as a themes subdirectory that contains images and CSS for use with jQuery UI.

Solution explorer

Remembering back to chapter 1, the controller is the coordinator that is responsible for processing input and then deciding which actions
should be performed (such as rendering a view).In ASP.NET MVC, controllers are represented as classes within the Controllers directory. By
default, this directory contains two controllers the HomeController(which handles requests for your home page) and the AccountController
(which handles authentication). We’ll look again at controllers in section 2.2.3.
THE MODELS DIRECTORY
The Models directory is typically used to contain any classes that represent the core concepts of your application, or classes that hold data in a
format that is specific to a particular view (a view model). As your applications get larger, you maydecide that you wish to move these classes into a
separate project, but keeping them in the Models directory is a good starting point for small projects. The default project contains a single
file in this directory—AccountModels.cs. It contains several classes related to authentication that are used by the default project template.

THE SCRIPTS DIRECTORY
     The Scripts directory is where you can place any JavaScript files used by your application.
The default project template contains quite a lot of files in this directory, including
the popular open-source jQuery library (which we’ll explore in chapter 7) and
scripts used for performing client-side validation.
THE VIEWS DIRECTORY
     The Views directory contains the templates used to render your user interface. Each of these templates is represented as a Razor view (a .cshtml or .vbhtml file) within a subdirectory named after the controller responsible for rendering that view. 
GLOBAL.ASAX
     The Global.asax file lives in the root of the project structure and contains initialization
code that runs when the application is first started up, such as code that registers
routes .
WEB.CONFIG
     The Web.configfile also lives in the root of the application and contains configuration details necessary for ASP.NET MVC to run correctly.
Now that you’ve seen a high-level overview of the different files in the default projecttemplate, we’ll explore in more detail how the core concepts of controllers, actions, and views interact with one another.

     The materializecss maximum allow 12 column, we can separate the screen size into 12 parts. The below example will explain about the how can we use the columns

     If you write the paragraph or any thing it will not set the margin manually by writing any styles, but if you want to write the content by set the correct margin, you can simply use the container class it will automatically set the margin and width size depending on your screen size.

     text-darken is the class and we can set the value 1 to 5 like text-darken-1 to text-darken-5, also we can set the color of the text by calling text-colorname. So no need to write any extra class for this.

Syntax for text color
text-colorname

Syntax for text-darken class
class="text-darken-1"
class="text-darken-2"
class="text-darken-3"
class="text-darken-4"
class="text-darken-5"

Example
<div class="text-red text-darken-4">Red Color</div>



Example Program:- (Editor)


Editor is Loading...

Advertisement

     In Materializecss we can easy to manage the color, if we apply the red color only then it may we don't like, so we can reduce the color rating by using this lighten-x class

     In materializecss we can easy to change the background color by just calling the color name as class name. The following example we are just calling the background color to change the background color.



Example Program:- (Editor)


Editor is Loading...

Advertisement

     The card-panel class is used to separate the div to block view.

     Meterialize CSS is a CSS Frameworkd and developed by google and it is released under MIT license. First release is v0.95.3 on Feb-25-2015. Mainly used for responsive design and more effect is included.

We need to include the following two css and js files

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">

  <script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>



Example Program:- (Editor)


Editor is Loading...

Advertisement

     In many places we need to write the notes for highlighting peoples or some definition needs some attention, in this situation we can use the following example.

Usages
1. Marking important notes.
2. If you run blogger you can write some introduction in the last part of the blogger post, so have many chance to read the details some one.
3. This will not have attractive multi color, so your content will not getting nonstandard look.

Total Pageviews