Advantage of Asp.Net MVC

Asp.net  is a part of .net platform for creating,building, deploying and running web applications using C#,VB etc .we can develop a web application by using Asp.Net Web Form and Asp.Net MVC. Asp.Net MVC is advanced technology that is most widely used nowadays . MVC is a great thing available for developers that makes work of developers easy and more flexible .

MVC stands for Model-View-Controller . MVC separates the code in 3 different things that make the code cleaner , flexible and easy to understand and modify . So Today I am going to tell some of big advantages or some good things that Asp.Net MVC provides as compared to Web-forms . This is not a comparison of Web-forms and MVC this is just overview or advantages or features that Asp.Net mvc provides us

1. Rapid Application Development ( RAD ) :- So first I will start with biggest advantage of Asp.net Mvc and this is the thing that is most in demand in Enterprises and everywhere in development area . This is Rapid application development . Asp.Net MVC provides Database First Approach for developing WebApplications . This approach is used with Scanfolding Technique this technique is like a magic provided in Asp.Net MVC . Scanfolding technique tells if you have designed your database in good manner that means if you have Created Normalized Database with all like Primary keys, foreign keys ,One-many , many-many relationships then you need not to do more effort for developing rest on your application in Asp.Net MVC Rest of things will be created with less efforts using scanfolding . With Asp.Net MVC you can have your simple basic website ready within 1 minute after you created your Database . So that was explanation to RAD in Asp.Net MVC

In Pic below we are choosing MVC5 scanfolding template


Then it automatically generate code for us

2. Partial Layouts :- In Asp.Net we ofter use User controls that were used for code reusability we create a user control then where we require that type of code that we coded in user control we call that user control there . In similar way Partial Layouts is provided in Asp.Net MVC .Partial Layouts are very useful things provided in Asp.Net MVC . Partial Layouts are like Master Pages that we use in Asp.Net web-forms . These are used as master pages or master layouts that can be called in any view in Asp.Net MVC . Like in php we use include ( "partialheader.php" ); to include some header in all pages or some specific pages so instead of writting that code in all pages we call then there . Similar in Asp.Net Web-Forms We use content placeholders and contentplaceholders are placed in Master Pages and when we call these master pages and use then in child forms then code of child forms is placed in content placeholder area In the similar way Partial layout works . The partial layout contains @Renderbody in Razor view then replace the child page or code of  page that is calling it

3. MVC Is  Stateless : Asp.Net was Statefull by using viewstates or sessions but Asp.net MVC is stateless . It will be wrong to say mvc is stateless it would say http is stateless . By stateless i mean there is nothing in http that holds the user session or that record the activity of user when user logged in etc so this was maintained or state was maintained using viewstate and sessions . This was used in asp.net Webforms because they contain server controls that contains viewstate and that postback the values and update viewstates But there is not server controls in Asp.Net MVC So it does not maintain states . It has divided the code in three patterns model-view-controller that handles everything That's why it says MVC is stateless But in actual http is stateless that why MVC is stateless

4. No Events : As we came to know there are no server controls in Asp.Net MVC so there are no events for any control as there are not server controls All this is handled by connection of controllers with views where views hold your html code or designing code and controller hold your logics code .

Implementing Search Functionality in ASP.NET MVC 4

What we are Going To cover

* In this Tutrial we are going to cover how to implement search functionality in Asp.Net MVC 4 . In our web applications in MVC we often need to add the functionality to search the database objects for specific data based on some creteria like to find employees with name starting with 'N' or to find data of employees that have Gender Male

Download Demo App With Database Link Below

Creating Database For This Application

1. First create Database

* Open Microsoft Sql server . Click on New Query . Now execute the query below to create database

Create Database searchingInmvc

Create Database Searching in Asp.net MVC 4

2. Then Press F5 . This will create Database successfully

Create Table And Inserting Demo Data

create table tblEmployee         //creating table
(
ID int identity primary key,
Name nvarchar(50),
Gender nvarchar(50),
Email nvarchar(50)
)

Creating Table In database 

//Inserting Demo Data

Here , we are inserting 4  Rows in Database table

insert into tblEmployee values('John','Female','john@geeksprogrammings.blogspot.in')
insert into tblEmployee values('funky','Male','funky@geeksprogrammings.blogspot.in')
insert into tblEmployee values('wiley','Male','wiley@geeksprogrammings.blogspot.in')
insert into tblEmployee values('ceren','Female','ceren@geeksprogrammings.blogspot.in')

Inserting Data in Table 

Showing All Inserted Data

Download Database script file

In link below you can download the script file and then double click on file it will open in sql server . It will create the database automatically for you when you execute it

Create New MVC 4 Application in Visual Studio

1. Start Visual Studio with language selected as C#
2.Click on File --> Then click on New Project
3. Scroll down and select ASP.NET MVC 4 Web Application

Implementing Search Functionality in Asp.Net MVC 4

4. Give appropriate Name,Path and solution Name and Hit Enter
5. choose Empty Template
6. Choose Razor View Engine and Hit Enter
7. Now New MVC 4 web application is started

Adding Models to MVC 4 Application

1. In solution Explorer -- > Right click on Models --> Then click on New item



2. Then select ADO.NET Entity Data Model --.> Give it a valid name like 'sampledatamodel'
3. Click Add

Implementing Search Functionality in Asp.Net MVC 4

4. Now A dialog box appears choose database connection to sql server and give your connection string a name that will be give to connection string in web.config file

Implementing Search Functionality in Asp.Net MVC 4

5. click next
6. Now in next dialog box you will be presented with tables available in database table select you table

Implementing Search Functionality in Asp.Net MVC 4

7. Now click Finish
8. Now Entity model of table is generated you can rename your database here to 'Employee'

Implementing Search Functionality in Asp.Net MVC 4

9. Now Model is successfully Added

Adding Controller and Views To MVC 4 Application

To add controller to database --

1. Right click on Controllers folder in solution folder
2. click on Add --> Then click on Controller

Implementing Search Functionality in Asp.Net MVC 4

3. Now Add controller Dialog Box appears
4. Give your controller a name like 'HomeController'
5. In template choose  'MVC controller with read/write and views using Entity  Framework'
6. The Reason behind choosing this is it will automatically generate some pages to insert,delete , update data of model to which we are associating this controller
7. Now give the Model name that we have added in previous step 'Employee'
8. Now Choose dbcontext class from dropdown menu and finally  click ADD
9. This autimatically add Views for insert , update, delete and index view in views folder under controller named folder

Implementing Search Functionality in Asp.Net MVC 4

 10. Now Run your application . This will give output below:-

Implementing Search Functionality in Asp.Net MVC 4

Adding Style And Look To Application

So we are going to search the database and retrieve data from database and then show the retrieved result to user. For this we have to get some controls and code . The GUI design that are going to give to this application is as below :-

1. In solution Explorer under Index view Double click on Index.cshtml

2. Now just before the line '<h2>Index</h2>' add a line 

<div style='font-family:Arial'>

and close this div right below the code after table tag 

Other UpdationAre in Demo Project Downlao And Use it

3. Update your Index.cshtml file under view folder in solution Explorer with the code below

@model IEnumerable<SearchInMVC.Models.Employee>

@{

    ViewBag.Title = "Index";

}

<div style="font-family:Arial ">

<h2>Index</h2>

<p>

    @Html.ActionLink("Create New", "Create")

</p>

<p>

@using (Html.BeginForm ("Index","Home",FormMethod.Get ))

{

<b>Search by:</b>@Html.RadioButton("searchBy","Name")<text> Name</text>

@Html.RadioButton("searchBy","Gender")<text>Gender</text><br />

@Html.TextBox("Search");<input type="submit" value="Search" />

    }

</p>

<table border="1">

    <tr>

        <th>

            @Html.DisplayNameFor(model => model.Name)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Gender)

        </th>

        <th>

            @Html.DisplayNameFor(model => model.Email)

        </th>

        <th>Action</th>

    </tr>

    @if (Model.Count() == 0)

    {

        <tr>

        <td colspan ="4">No Rows Match Search Criteria</td>

        

        </tr>

    }

    else

    {

foreach (var item in Model)

{

    <tr>

        <td>

            @Html.DisplayFor(modelItem => item.Name)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Gender)

        </td>

        <td>

            @Html.DisplayFor(modelItem => item.Email)

        </td>

        <td>

            @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |

            @Html.ActionLink("Details", "Details", new { id = item.ID }) |

            @Html.ActionLink("Delete", "Delete", new { id = item.ID })

        </td>

    </tr>

}

    }

</table>

</div>

Now Run your Application and you can see the change with output below :-

Implementing Search Functionality in Asp.Net MVC 4

Code Description

In code above we have used Razor code and instead of using <form> tag that we usually use in html we have used Html Helper below

@using (Html.BeginForm ("Index","Home",FormMethod.Get ))

{

<b>Search by:</b>@Html.RadioButton("searchBy","Name")<text> Name</text>

@Html.RadioButton("searchBy","Gender")<text>Gender</text><br />

@Html.TextBox("Search");<input type="submit" value="Search" />

    }

In Html.BeginForm ("Index","Home",FormMethod.Get )

Here, Html.BeginForm  is used in place of using form tag . Html.BeginForm  Received 3 arguments .

Here, "Index" is Name of action that will be executed on posting form  to server

Here, "Home" is name of controller to which this link will be redirected when clicked

Here, " FormMethod.Get" type of encoding method that applied on data we are posting 

Now Open Controller And Add code below to Index Action of home controller

 if (searchby == "Gender")

            {

                return View(db.Employees.Where(x => x.Gender == search || search ==null).ToList());

            }

            else

            {

                return View(db.Employees.Where(x => x.Name.StartsWith(search)).ToList());

}

Download Demo App For searching in ASP.NET MVC 4

Download Database script file

Tempdata vs Session in Asp.net MVC

Why Sessions are Not Recommended to use in MVC

One of the Fundamental Principal of Asp.Net MVC Framework is  Web is Stateless And AspDotNet MVC is Stateless AspDotnet WebForms is a try to make Stateful Modal But Its difficult to main it as this modal does not exist . Sessions Create lot of load on Cache that was biggest problem .

Using Session in AspDotNet MVC is like Putting APPLE Logo on Asus Laptop and Calling it Apple Laptop . Reality does not change .

What Is Alternative To Session in MVC

You can use TempData in place of Session . Tempdata is limited form of Session . Don’t Use Session in MVC as you are already having Tempdata and one benefit of Using Tempdata is They will automatically deleted no need to clear or remove them as we do with session

How To Use TempData In MVC

When Data is TempData is read it is immediately market for deletion at the end of request . That means you can use Value Tempdata In Tempdata Only at the Next Request . See Example Below - 

TempData is Filled With Data

TempData["SomeTemp"]= "Hey! This is MVC" ;

Tempdata Accessed in Second Request 

Object value = TempData["SomeTemp"] ;

Value in Tempdata will be Cleared After Above Line of Code . If you access in after that line of code after above line you will not found it there it will be deleted

Keep And Peek Methods 

Peek And keep methods are used to read value without marking it for deletion after reading its value . So it is acutally helping us to retain its after its first read instead of deleting tempdata

With Peek Method We get the value of Tempdata Without Marking it For Deletion . In this method we access the Tempdata value using Peek Method That tells it to Hold Value and does not mark it for deletion

With Keep Method we hold the Value of Tempdata that was marked for Deletion after its  first read . so it is using two different calls . First one is getting Tempdata Value then Second call is To Save Tempdata From Deletion

Difference Between MVC and webforms

The main advantages of The Official Microsoft ASP.NET Site MVC are:

• Enables the full control over the rendered HTML.
• Provides clean separation of concerns(SoC).
• Enables Test Driven Development (TDD).
• Easy integration with JavaScript frameworks.
• Following the design of stateless nature of the web.
• RESTful urls that enables SEO.
• No ViewState and PostBack events
• SEO friendly URL by design
• No ViewState (this may seem a bit of moving backward to some), but overall a good design
  decision
• Clean View Markup (no additional HTML emitted)
• 100% extensible. You can add your own controller with IOC, switch view engines at will, control model binding at wish etc
• Rich UI support (possible through client side JS libraries like jQuery UI and others)
• Pluggable architecture
• Out of the box minimal IOC support
• Out of the box support for mitigating antiforgery attacks and XSS vulnerability
• MVC is Faster by default because of lack of viewstate and clean markup. But performance is subject and MVC by design is more performant that traditional The Official Microsoft AspDotNet webforms

Limitation of MVC 

• There is little Bit Long Learning Curve as compared to Asp.Net webforms 

The main advantage of Aspdotnet Web Form are:

• It provides RAD development
• Easy development model for developers those coming from winform development.

Difference Between MVC and webforms

Benefits of Html Helpers in Asp.Net MVC

So today i am going to give an overview on Html helpers in Asp.Net MVC . So first questions that stuck our mind are -

 What are Html helpers ?

 Why to use them instead of using simple Html coded controls

 What are their benefits in Asp.Net MVC

Html helpers are very much similar to Asp.Net web controls . But Html helpers are much more lightweight as compared to Asp.net Web forms Server controls . The similarity between server controls in Asp.net webforms and Html helpers in Asp.Net MVC are Viewstate . Means they both contain the ability to hold or update the data on postbacks using ViewStates for each controls .

Main  Benefits Of using Html Helpers in Asp.net MVC

• MVC Html Helpers contains Overloaded Methods like IPostBackDataHandler that Pre-populate the values of html helpers means it works similar to as viewstates
• Html Helpers is also having one more advantage It provide inbuilt Validation for html helpers textboxes 

Available HTML Helpers 

There following HTML helpers can be used to render (modify and output) HTML form elements:

1. BeginForm()
2. EndForm()
3. TextArea()
4. TextBox()
5. CheckBox()
6. RadioButton()
7. ListBox()
8. DropDownList()
9. Hidden()
10. Password()

Sample Code To Demonstrate Use of Html Helpers

ASPX CODE

<%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>

<% using (Html.BeginForm()){%>

<p>

<label for="FullName">FullName</label>

<%= Html.TextBox("FullName") %>

<%= Html.ValidationMessage("FullName", "*") %>

</p>

<p>

<label for="Username">Username</label>

<%= Html.TextBox("Username") %>

<%= Html.ValidationMessage("Username", "*") %>

</p>

<p>

<label for="Password">Password:</label>

<%= Html.Password("Password") %>

<%= Html.ValidationMessage("Password", "*") %>

</p>

<p>

<label for="Password">Confirm Password:</label>

<%= Html.Password("ConfirmPassword") %>

<%= Html.ValidationMessage("ConfirmPassword", "*") %>

</p>

<p>

<%= Html.CheckBox("ReceiveNewsletter") %>

<label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>

</p>

<p>

<input type="submit" value="Register" />

</p>

<%}%>

RAZOR CODE

@Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.")

@using (Html.BeginForm()){ 

<p>

<label for="FullName">FullName</label>

@Html.TextBox("FullName")  

@Html.ValidationMessage("FullName", "*")  

</p>

<p>

<label for="Username">Username</label>

@Html.TextBox("Username")  

@Html.ValidationMessage("Username", "*")  

</p>

<p>

<label for="Password">Password:</label>

@Html.Password("Password")  

@Html.ValidationMessage("Password", "*")  

</p>

<p>

<label for="Password">Confirm Password:</label>

@Html.Password("ConfirmPassword")  

@Html.ValidationMessage("ConfirmPassword", "*")  

</p>

<p>

@Html.CheckBox("ReceiveNewsletter")  

<label for="ReceiveNewsletter" style="display:inline">Receive Newsletter?</label>

</p>

<p>

<input type="submit" value="Register" />

</p>

} 

Nopcommerce Developer Guide

Internship - Day 1

Today was first day of my internship Period of 6 months . I am very happy to start my internship with Abax Technologies . Abax technologies is a recognized IT company Situated in Noida . It deals with Desktop , web and Mobile application development and providing solutions to market .

Mr. Rohit Jain is CEO of Company and I am doing Internship under their guidance .

Now came to work -- On 2nd January - 8:23 am Rohit Sir posted my first task on skype . My first task was first to learn more about Nopcommerce , Its Architecture , Plugin development , Module Development , Theme development and widget development .

First i need to download the source code for Nopcommerce form Nopcommerce office webiste then using that source code to compile it , set up its database then run a demo site in nopcommerce .

After setup the demo site for nopcommerce it started exploring its source code architecture and learn more about it from its developer's documentation

I have previously done a ecommerce website in Nopcommerce but at that time i used Nopcommerce 1.9 version that was asp.net version of nopcommerce Now i am going to use Nopcommerce 3.2 and this version is really cool . It is MVC version of nopcommerce using Linq queries instead of using sql and using Razor view engines and more flexibility . Actually I liked this version .

Important Links that i have studied and explored today -

Link for Nopcommerce Developer's Documentation
Nopcommerce Developer Documentation

Nopcommerce uses code first approach for each and every development component in nopcommerce so i decided to first give a look at code first approach to revise my concepts about codefirst approach

Code First Approach Documentation MVC

After Reading about code first approach of Nopcommerce I reached a Nerd Dinner app that is MVC app that uses code first approch for MVC application development
Nerd Dinner MVC App with Code First Approach

So that was it for the day i learned number of things today

Today I have explored following Modules -

1. Nopcommerce Installation v3.20 (mvc)
2. Explored Nopcommerce Developers Documentation
3. Exploring Nopcommerce Architecture
4. Explored Nopcommerce Theme CUstomization and Creating Own Theme
5. Exploring Plugin Development Documentation
     -- Created simple hello world Plugin

Next I will explore create plugins with database access and various nopcommerce inbuilt modules

Why we should use AngularJS

What is AngularJS

Why Its Called AngularJS

Why To Use AngularJS

When To Use AngularJS

So , Today i started to explore the top-most question that always stuck our mind when we start with new technology . Like i already know my stuff then when i started with angular these above are basic questions that stuck my mind that what is angularjs and why i should use it and when  .

Today briefly I am going to give answers to these questions -

What is AngularJS ?

AngularJS is a javascript framework developed by Google's Employees . What so special about angularjs is it is client side . what all you need is Javascript and any programming language of your own choice to start with AngularJS that makes angular best . Like in my case I am Asp.net C# developer so I use my all logic like database connectivity in c# and all bindings are done by Angularjs and Let me tell you it is so fast in case of Searching and other type of operations required in Applications developement this is because everything in here is through javascript which is client side It has all inbuilt functions for different type of work that make it suitable for web development .

Why Its Called AngularJS ?

Now foremost question is why its called AngularJS this is because its main Namespace is ng and that sounds like Angular and JS is used with it that's why its called AngularJS .

Why To Use AngularJS

5 Main Points Why we should use AngularJS -

1. Angular Provides Data-Binding:- binding is the coolest concept in AngularJS. It's a fascinating real-time concept. Just like desktop application, mobile apps user also wishes to witness swift changes in the UI. So AngularJS’ two-way data binding handles the synchronization between the DOM and the model, and vice versa. As a result, the UI changes based on other input components are very much smooth without any extra effort on the part of the developer
2. Angular Enables Single Page Apps :- Single Page Applications are becoming more popular for a good reason. They fill a very specific need. More functionality is being moved to the web, and the browser is finally realizing its potential as a distributed computing node. By design, SPA applications are far more responsive (even though some of that is perception). They can provide an experience that feels almost like a native app in the web. By rendering on the client they cut down load on the server as well as reduce network traffic – instead of sending a full page of markup, you can send a payload of data and turn it into markup at the client. Of course, Angular doesn't force you into building a SPA app, it only provides plenty of built-in support
3.  Angular Provides Dependency Injection :- AngularJS has a built-in dependency injection subsystem useful for developers as it makes application development easier including testing. Dependency Injection (DI) allows users to ask for dependencies, rather than having to go and look for them or make them on their own .
   
   for example, “Hey I need X’, and the DI is responsible for creating and providing it for you. If user wants to gain access to core AngularJS services, all they need to do is add service as a parameter. AngularJS will detect that users need that service and will provide it instantly.
4.  AngularJS Directives :- Directives can create custom HTML tags that serve as new and custom widgets.Directives achieve this by allowing users to invent their own HTML elements. Putting DOM manipulation code into the directives makes it easy for the users to separate them out of MVC app and leaves MVC to update the view with new data, but how the view will behave is certainly up to directives
5. AngularJS requires less coding :- The data-binding feature allows developers to stop providing data manually into the view. Filters allow you to manipulate the data on the view level without changing your controllers. As a result, developers need to write very little code to achieve the task, which is a great deal for the developers
   
   

    When To Use AngularJS ?

   AngularJS is a very good SPA framework. If we want to create a SPA application, then AngularJS is a good option for it.“SPA” refers to Single Page Application. A Single Page Application is one in which we have a shell page and we can load multiple views into that. So a traditional app, as you know you typically blink and load everything again.
   It’s not very efficient on the bandwidth, especially in the mobile world. In a SPA, we can load the initial content upfront and then the different views or the small kind of mini web pages can be loaded on the fly and embedded into the shell.
   
   

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

Setting up Angularjs in Visual Studio Express

AngularJS is a unique framework that without doubt will shape the web development space in the years to come . AngularJS is a recent addition to the client-side MVC frameworks list, yet it has
managed to attract a lot of attention, mostly due to its innovative templating system, ease of  development, and very solid engineering practices

In Simple Words I would say AngularJs is Awesome that anything else .

AngularJS is a relatively new actor on the client-side MVC frameworks scene; its 1.0 version was released only in June 2012. In reality, the work on this framework started in 2009 as a personal project of Miško Hevery, a Google employee. The initial idea turned out to be so good that, at the time of writing, the project was offiially backed by Google Inc., and there is a whole team at Google working full-time on the framework.

AngularJS is an open source project hosted on GitHub (https://github.com/angular/angular.js) and licensed by Google, Inc. under the terms of the MIT licens

Setting Up Angularjs in Visual Studio

1. First Open Visual Studio then Click on Tools Menu

2. Then Under Tools Menu click on Extension and Updates

3. It shows Extension and Updates Window . Now in Search Box at Top right side Typein AngularJS and Hit Enter .

4. Now you will be shown the result as below screenshot -

Add caption

 5. Now click on Install button to Install Angular js in visual studio .
 6. If any of Nuget packages are missing then these will be dependencies for angular that will automatically installed . as shown in screenshot below -

7. Now to check AngualarJS is installed click on File menu then click on New then click on Project
Now  under Templates -> Web category you can see AngularJS installed as shown in screenshot below -

Now AngularJS is ready in Visual Studio .

 

Evolution of Javascript To Jquery To AngularJS

Today’s starting programmers mostly directly dive into Jquery / angularjs , Programmers of last decade started with javascript . and Now Angularjs is on hike .

See whenever a WebPage is opened , JS / Jquery / AngularJS Code is on Client Side So Amount of Code is adds to Page will Increase Request Time .

We Use Javascript Before Jquery , Different types of Sliders , Dom Manipulations were done with lot of Javascript code like using But After Jquery We took a Relief for many things as below
Lines of Code Decides Lifeline of App as below -

Javascript -

Function changeBachground(color) {

  Document.body.style.background = color;

}

Onload=”changeBackground (‘red’);”

Jquery

$ (‘body’) .css (‘background’, ‘#ccc’);

So Simple if we can achieve something easily with less code why we will not adopt it
Then AngularJS Came that is a complete MVC Framework . It is also Javascript Framework . So whatever you do with AngularJS you can also achieve with Javascript . But Why you need to it start it from scratch you can join angularjs repository to propose some solid changes to it and extend it if you strongly need as doing everything you need to do in a website using javascript doesn’t look good idea .

JAVASCRIPT CODE

Characters: 700

Lines of JavaScript: 13

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World with pure JavaScript</h1>
    Write some text in textbox:
    <input id="hello-input" type="text" />
    <h2 id="hello-output">Hello </h2>

    <script>
      var inputField = document.getElementById('hello-input');
      var label = document.getElementById('hello-output');

      var handleKeyup = function() {
        var value = inputField.value;
        label.innerHTML = 'Hello ' + value;
      }

      if (document.addEventListener) {
        document.addEventListener('keyup', handleKeyup);
      } else if (document.attachEvent) {
        document.attachEvent('keyup', handleKeyup);
      }
    </script>
  </body>
</html>

JQUERY

Characters: 529

Lines of JavaScript: 7

<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World with jQuery</h1>
    Write some text in textbox:
    <input id="hello-input" type="text" />
    <h2 id="hello-output">Hello </h2>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>
      var inputField = $('#hello-input');
      var label = $('#hello-output');

      inputField.on('keyup', function() {
        var value = inputField.val();
        label.html('Hello ' + value);
      });
    </script>
  </body>
</html>

ANGULARJS

Characters: 325

Lines of JavaScript: 0

<!DOCTYPE html>
<html ng-app>
  <body>
    <h1>Hello World with AngularJS</h1>
    Write some text in textbox:
    <input type="text" ng-model="sometext" />
    <h2>Hello {{sometext}}</h2>

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  </body>
</html>

ASP.NET MVC Action Return View Not Changing URL

The return View(.......) in Action of Controller is the statement that we use to return the view View for a Particular Controller Request . But Return view will return the view exactly you want and render the view but it will not change or target the user to target url  . The simple solution is below -

Code For an Action -

[HttpPost]
public ActionResult Start(SomeViewModel someViewModel)
{
  ...
  return RedirectToAction("SomeOtherAction");

              
                             or


  return RedirectToAction("Action Name", "Controller Name");
}

So , In code above We are using RedirectToAction instead of using  return view this can be used in total of 6 variants .

I have give 2 of simple one . In Parameter to these actions you need to pass the controller and action name according to variant you choose

Using Entity Framework Code First Migration Asp MVC

 Code First Database Initializers

 Before understanding code first migrations, let's have a look at Code First Database Initializers   provided by Entity Framework. When you follow EF code first approach, then you have three op tions for initializing database as given below–

1. CreateDatabaseIfNotExists

   This is the default database initializer class used by Code First. This class creates a database only if it doesn't exist. This initializer helps you to avoid any accidental deletion of the database.
   

2. DropCreateDatabaseWhenModelChanges

   This database initializer class drop the existing database and re-creates it if there is a mismatch between the model classes and table schema. This initializer is useful during starting phase of development and testing when models are changing often and there is no concern about the existing database records.
   

3. DropCreateDatabaseAlways

   This database initializer class always drop and creates a new database, whether it is already present or not with every run of the application. This initializer is useful during testing when you want to run the application with a fresh set of data.
   
   

   Why Code First Migrations?

   The above three database initializing approach become fail when you add new model classes and you want to update existing database without any deletion or change. To achieve this, you need to use EF code first migrations which allow you to update existing database with new model classes changes and your existing database remains same with your database records.
   
   

   Visual Studio Package Manager Console

   To create the database for these two entities within your application, go to the Package Manager Console option as shown below:
   
   

   Creating New Database

   Running Commands

   Run the following command to configure migrations within your project and for creating new database.
   

4. Enable migrations

   Enable-Migrations

5. Create migration

   Add-Migration MigrationsName

6. Create upgrade/downgrade script

   Update-Database
   
   

7. Updating Existing Database

   Suppose you have added one more class named as Customer into your data model classes as given below:
   
   

   Running Commands

   Now for updating the database with new changes run the following commands as given below:
   

8. Create migration

   Add-Migration MigrationsName

9. Create upgrade/downgrade script

   Update-Database