Sunday 25 January 2015

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


Crud Operation in AngularJS With Bootstrap


In My Previous Article I explored about How to setup angularjs in Visual Studio and also Explored concepts of What , why and when To use AngularJS . In this article I am going to do CRUD Operation in AngularJS . CRUD operations means Insert , view , Update and Delete Data In Database . CRUD operations are most important thing that you must practice to create Applications either simple or complex in AngularJS or in any other Language or Technology . I am giving a simple code and easy sample that you can use to Perform CRUD operations in AngularJS using .NET technology 

Download the Sample Code from Link Below .

Download Code



How to setup/Run this sample 


1. First Download the code 
2. Then Open Web.config file and update the connection string to your sqlserver connection string by first making database in you sql server .
3. You need to Deal with CODE First Data migration Commands you can see these command in  link below :-

Data Migration


Snapshots

View Data From Database AngularJS

Insert Data In Database AngularJS

Delete Data from Database AngularJS

Update Data From Database AngularJS

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 .


 




Friday 9 January 2015

Add To Cart Disappeared Nopcommerce

If somehow you Add To Cart Button Disappeared From Nopcommerce then you can try following solutions of Fix to get Add To Cart Button Back In Nopcommerce

Solution 1 - Add To Cart Disappeared Nopcommerce


  1. Login To AdminPanel of Nopcommerce 
  2. Click on Catalog 
  3. Then click on Product
  4.  Then click on Bulk Edit Products and Edit a Product 
  5. Then In Product info Tab scroll down and see Disable buy button check box and Uncheck that checkbox its done

Add To Cart Disappeared Nopcommerce
Add To Cart Disappeared Nopcommerce


Solution 2 -Add To Cart Disappeared Nopcommerce


second thing you need to check is whether you have any item in stock or if your all items are sold or in Product Info page while adding product you have entered 0 for stock quanity then it may remove Add To Cart Button 

In this case check low stock activity combo box in Product info page as shown in image below 

Add To Cart Disappeared Nopcommerce
Add To Cart Disappeared Nopcommerce


Nopcommerce Tutorial


Internship Day

 I started my work with Adding Products to Nopcommerce Site to view it to Rohit sir , I explored online products to select some to add it to Nopcommerce Site . I have seen some cool features while going through this procedure I liked Nopcommerce it is flexible and rich of good features that must be available in E-Commerce Solution

 Adding Products To Nopcommerce


Login to admin Panel
Click on Category then click on Products
In submenu then click on Mange Products
Then Manage Products Page opens
Now click on Add New

see image below for reference


Now at that page fill all products details that you require to fill . Some of important terms for product details will be given by me further in this article .

Add New Manufacturer Nopcommerce

 

For this Click on Catalog menu and then click on Manufacturers when that page opens click on Add new and fill necessary details to Add New Manufacturer

and while adding a new product you can go to Manufacturer tab and select the manufacturer you added

Add New Category Nopcommerce


For this Click on Catalog menu and then click on Categories when that page opens click on Add new and fill necessary details to Add New Manufacturer

and while adding a new product you can go to Category specification tab and select the manufacturer you added

 Add Product Picture Nopcommerce


while adding product you can go to Picture Tab on Add New Product Page and then click on Browse or select picture button to upload picture of product you can also set sort order of all pictures by numbering them like 0,1,2,3 .....

Add Shipping Details Nopcommerce


While adding product you can go to Product info tab and scroll down and you can see shipping details there . you can select Free shipping for no charges to client or you can add shipping Cost to customer for this product and you will also add height, weight or product there

Adding Old And New Price  Nopcommerce


While adding product to nopcommerce you can add Old price of product and new price old price will be strikethrough that denotes previous price of that product

Adding Special Price To Product Nopcommerce


Here you can add special price to product like we can say this is discounted or festival offer price of product and you can also specify time and date along with it

Show Stock Availability and Stock Quantity Nopcommerce


while adding product at Product Info page you can see two check boxes for Show Stock availability and Show Stock Quantity if you checked them it will show their quantity to Customer when Customer view the product at Online Store

Call Price Feature Nopcommerce


This is very awesome feature . This feature does not tell the cost of product to customer but allows the customer to bid or call what price customer wants to pay for the product


ERROR : Add To Cart Not Showing

Then i faced an error with each product there is add to cart button that adds product to cart to buy it but when add new products to my ecommerce solution due my some mistakes it disappeared Check out here for solution





Wednesday 7 January 2015

Uncaught TypeError-undefined is not a function



Uncaught TypeError: undefined is not a functionUncaught TypeError: undefined is not a function in datepicker






This error takes my 2 hours today I was developing an asp.net application and I never gone through this error before First time i got this error and it shuffles me for two big hours

You will get number of solutions over forums
But sorry to say all these are workaround to get rid-off that error
very less tried to explain why this error came and what is meaning of this error .

Today after spending my 2 hours on this simple error i decided to write something about solution to this error

CAUSE OF ERROR :Uncaught TypeError: undefined is not a function


This error clearly means this is some function that is undefined in the class from which we are accessing it

Like in my case this error was coming at this line :-

$( "#datepicker" ).datepicker();
or
jquery( "#datepicker" ).datepicker();

The main reason behind this error is Jquery Multiple versions calling . If you are using jquery and you have refrenced multiple versions of jquery like Jquery1.10.2 and Jquery 2.0.1 in same file then mostly this error will come at runtime at that page .

The reason behind why it says Undefined TypeError because when multiple versions of jquery are called on same page then we are having two jquery script running and they are like -

1.  Jquery1_10_2
2.  Jquery2_0_1

and we are using only jquery or a '$' dollar symbol there and when browser is unable to find Jquery there then how can it find datepicker function or any other function that you are using at that time . This is main cause of error

Solution of Error : 

Uncaught TypeError: undefined is not a function

So let's talk about solutions to this error . I tried my best at 1:00 AM at Night to find solution to this error and then share it with my blog readers

Now we need to tell browser that we need to use specific version of juery only if we are using multiple versions of jquery on same page

Otherwise simple solution would be to remove the second refrenced version of jquery if possible

so in order to tell broser that we are using specific version of jquery we need to make some changes to our code

Like in my case i am using following code to put jquery datepicker on my website and i am using
jquery1_11_0 version of jquery
So here is my code i have replaced '$' or jquery with jquery1_11_0 and that's it the problem is solved

CODE -
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
    var jQuery_1_11_0 = $.noConflict(true);
    jQuery_1_11_0(document).ready(function () {
        jQuery_1_11_0('#datepicker').datepicker();

    })
</script>

Friday 2 January 2015

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