MVC from Beginner to advance session by Indiandotnet

 

Dear All,

Thanks for attending session on 30th Nov 2014. I would like to say a big thanks to Abhishek Sapkale also who delivered the session and share knowledge with us.

We tried to  do go live in this seminar and some people joined also and enjoyed the live streaming.

Those who were not able to attend the session due to some reason, they can see the videos of session from below links

https://www.youtube.com/watch?v=gDYLJrOUJ7w

https://www.youtube.com/watch?v=UIPauB1Ixzc

https://www.youtube.com/watch?v=UIPauB1Ixzc

You can also watch presentation at slide share

http://www.slideshare.net/Indiandotnet/slideshelf

 

I hope it might help you.

Thanks

Rj !!!

How to resolve Failed to create designer “Microsoft.Reporting.WebForms.ReportViewer” ?

 

Dear All,

One of frustrating point is when you are in hurry and you got error like “Microsoft.Reporting.WebForms.ReportViewer” .

As shown in below figure.

Report_Viewer_Error

Actually , I was trying to migrate one web project from vs2010 to vs2013 and I faced this issue.

To resolve this I did following changes

Updated  keys which are highlighted in web.config

<compilation debug="false" targetFramework="4.5">
  <assemblies>
    <add assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />
    <add assembly="Microsoft.ReportViewer.Common, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />
    <add assembly="Microsoft.Build.Framework, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
    <add assembly="System.Management, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A" />
  </assemblies>
  <buildProviders>
    <add extension=".rdlc" type="Microsoft.Reporting.RdlBuildProvider, Microsoft.ReportViewer.Common, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />
  </buildProviders>
</compilation>

 

<httpHandlers>
     <add path="Reserved.ReportViewerWebControl.axd" verb="*" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" validate="false" />
   </httpHandlers>

<handlers>
     <add name="ReportViewerWebControlHandler" preCondition="integratedMode" verb="*" path="Reserved.ReportViewerWebControl.axd" type="Microsoft.Reporting.WebForms.HttpHandler, Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" />
   </handlers>

And on page

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %><%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

After changing this my problem is not resolve exactly. So I have updated NUGET Package for ReportViewer and we are good to go.

Thanks

RJ!!

How to resolve “No Entity Framework provider found for the ADO.NET provider with invariant name” ?

 

Hello friends,

sometimes you face lot of issue when you trying to deploy the the WCF/Website code which reference another project code in which we have used Entity framework.

We were very happy at the time of development and when we go to deploy it we faced a problem which state that

“No Entity Framework provider found for the ADO.NET provider with invariant name “

When I first time saw this error I thought it will resolve easily few simple configuration changes. I searched on Google and found numerous solutions which state to update entity framework version which I already updated.

Few post state configuration changes in web.config which I did but still same issue.

After sometime I just thought to copy entity framework related all the dll .

And ” Eureka ! “ all is working fine now.

EntityFramework1

Actually EntityFramework.SQLSERVER.dll was not in the folder and after copying this everything is working.

I hope when you this your problem also resolve.

Thanks

RJ !!

Understanding of new VNext web project

 

Dear Friends,

As discussed in last post VNext launched. Now I downloaded VNext to test how to use it.

Let’s understand it step by step

Now when you will try to open new project window. You will find 4 new project template with name VNext as shown below in fig

Vnext_WebApplication

 

I tried ASP.NET vNext Web Application.

Now I found a new structure of  Web application and surprised that in next project there is no web.Config file instead on it I found 3 different files

which are

1) Config.json

2) project.json

3) Startup.cs

New_Project_File

Now lets understand these files one by one

1) Config.json :- Config.json  by the name it is clear that it will keep all the configuration detail Like your database connection string and etc will reside in this file. see below config.json’s snap

Config-json

2) Project.json : Project.json file contents all the reference of the project the best part of it as you add the entries in this file it will automatically reflect your project reference. I personally like this  miracle Smile

project_Json

3) Startup.cs:-

It is something like your console application where you will provide startup file.This file is same like those feature which will startup all the things

Startup

Now let see actual physical project structure. You will find a new file which is Kproj.

The Kproj is new type file. “K” is new feature introduce. New compiler is used.

Kproj

I will explain more features in next post.

Till than enjoy.

Thanks & Best Regards,

Rajat Jaiswal

VNext – A new version of Visual Studio (VS-2014)

 

Recently, Microsoft launched a new version of Visual Studio which is VS 2014 (VNext). Although I am not always happy with such a quick versions by Microsoft but this time it will a great NEWS and give a strong competition to all the open source competitors.

VNext is a open source. With VNext you will get MVC 6 , .NET framework 4.5.3.

You can download  the VNext from following link

http://www.visualstudio.com/en-us/downloads/visual-studio-14-ctp-vs

In VNext you will found a lot change. Major highlights

1) Project solution change

2) New configuration file

3) New dependency (reference) utility

4)Roslyn Compiler

5) web.Config removed

6)”K” factor

7) Next Generation “JIT”

8)Deployment changes

There are many more things which we will discuss later on.

Till Enjoy VNext.

Thanks & Best Regards,

Rajat Jaiswal

FIFA world cup 2014 with Angular.js & ASP.NET – Part- II

Dear Friends,
In last post part 1 ,we learnt how to use Angular.js.
Now in this post we are moving further as I shared we will do some more interesting thing here.
In this demo I have created same type of JSON as we have created in last post but it has some more values like
MatchDate: ‘Localtime’,
MatchNumber: ‘Match64’,
GroupName: ‘Final’,
Stadium: ‘Maracanã-EstádioJornalistaMárioFilho’,
Venue: ‘RioDeJaneiro’,
TeamName1: ‘W61’,
TeamCode1: ‘W61’,
TeamName2: ‘W62’,
TeamCode2: ‘W62’

JSONformat
Thanks to Fifa.com  for providing the information.

I created the JSON from FIFA.com’s data (I hope they will not mind it.)
Now as mention earlier, it is exactly same as we did in last post it has module, controller and groups properties.
In this we added two more features which is Order By & filter.
Firstly order by expression. So we have used order by expression in ng-repeat.

We have sorted this with matchDate with Order by expression as shown in below image

ng_Order_By
When you run it then your result will be in order by MatchDate

Match
Now what if you want to sort it by reverse date order then it is also very simple you just need to add “-“minus sign in front of MatchDate once you will do this you will get following output.

matchdate_with_ReveseOrder

Now we are interested in some specific information like particular group, particular match, and particular team so in such case we require Filter extension property.
In current example we have taken a textbox which has property ng-model. Now this ng-model value is passed in ng-repeat with filter option as shown in below image

filter_create
Now when you type value in textbox you will get filtered result on the screen as

Filter_Fifa_Result

I hope you enjoy it.

Soon I will share code with a other example.

 

Thanks & Enjoy !!!

Rajat

FIFA world cup 2014 with Angular.js & ASP.NET – Part- I

Dear Friends,
Today FIFA world cup 2014 is going to start, So I just thought to make something which have colors of FIFA world cup 2014 with my learning.
In this post I am sharing how to create a simple Angular.Js page in ASP.NET which give you FIFA 2014 Group Information.
Step 1:- Add a new project of ASP.NET and add Angular.Js in the project you can download Angular.js from here.
https://angularjs.org/
Or you can add angular js from NUGET package also.

Json
Step 2:– Now add as JavaScript file. I have added myApp.js file in project
Now we need to create a JSON for groups as shown below
Step 3:- Add reference of Angular.js and myApp.js in your project,

body_ng_App
Step 4:- Now next step is to add an Angular module to add this we need to write following line

var app = angular.module(‘App’, []);

Step 5: Once Module is added now we need to add a controller in this controller we need to declare a variable and assign JSON object which we have declare earlier.

Fotballngcontroller

Step 6: OK cool now your myAPP.js work is done.

Now move to design view of page. In this firstly assign the module to page
Currently I have assign this module in body tag.
Note: all the Angular related property started here with ng-
So in body tag I have written following property as shown in fig

Step 7:– Once we have added the module now we assign controller to a div in which we need JSON data of FIFA world cup 2014, So it can be added using ng-controller as shown in below fig

Step 7:- Now if you see JSON data it has multiple group like GROUP A , GROUP B etc so we require ng-repeat attribute of Angular.js. Tthis ng-repeat will reference controller’s variable which we have assigned in myapp.js.
Now for each group data we will create a div which have team name, team code, and team flag in that group. For this we need to write following code.

angular_FootBall_Repeat_Group

The best thing here is to access the property or value you just need to write curly barces {} and within this the property which you want to access.

Now when you run it. It will look like something like below screen.

Group_Vision

In next post we will show Match schedule with Angular.Js in asp.net.

Enjoy FIFA 🙂
Regards
Rajat Jaiswal

Sammy.Js–simplest steps to create Restful web application (Single Page Applications) SPAs

Dear All,

Today I  am sharing with you one of the best and easy to understand JS which is “Sammy.Js”.

“Sammy.js” is 16 k java script over JQUERY which provide facility to developer to create RESTFUL SPAs (single Page Application).

It is very  clean, simple and easy to adapt java script.rl

You get Restful URL easily with this.

It added “#”  hash in URL. For example see below example

http://Indiandotnet.com/index#/

http://indiandotnet.com/index#/Products/

http://indiandotnet.com/Index#/products/1

Let us understand this with example.

In last post you have seen how to consume web API with JQUERY https://indiandotnet.wordpress.com/2014/03/21/how-to-consume-web-api-using-jquery/

Here I am using the sample source code to move forward with sammy.js.

What we are planning here to create a page with menus and in this page we will call sammy.js on menu to call responsive URL to show states list ,particular state according to id and default page . as shown in below figure

Html_Sammy_Js

Step 1:-  Add “Sammy.js” in the project using Nuget package manager as shown in below figure

sammyJs_Nuget_Package

Step 2:- Once the Sammy.Js added in your project you will find the Js in your project’s script folder

sammyJs_in_project

Step 3:-

Add sammy js reference in the project

   1: <script src="~/Scripts/jquery-2.1.0.min.js"></script>

   2:    <script src="~/Scripts/sammy-0.7.4.min.js"></script>

Step 4:-

Now below screen shot show the html which is designed to achieve our task

Default_Html

Step 5:- Now when Home menu link click by end user we will show  default page which in Index page in our case and its URL will be

http://localhost:43597/Home/index#/ 

And when user click on States link in navigation then it will show URL

http://localhost:43597/Home/index#/States 

And page will show list of states

last but not the least when user click on MP menu in navigation  then it will show URL

http://localhost:43597/Home/index#/States/1 

and page will show state name according to Id which is currently 1 in above url

Step 6:-

Now to achieve this we need to invoke Sammy.js  as shown below in below code

   1: <script type="text/javascript">

   2:  

   3:       $(document).ready(function () {

   4:           var sammySPA = $.sammy("#main", function () { // initializing main div which is base for SPAs application content 

   5:  

   6:               //Default url  

   7:               this.get('#/', function (context) {

   8:                   

   9:                   context.app.swap(''); // clear what ever previously written in main div

  10:                   $("#main").append("<B> Showing default url content by code</b>"); // this code append the content in msin div 

  11:  

  12:               });

  13:               //below code will fire when user click on state link 

  14:               this.get('#/States', function (context) {

  15:                 

  16:                   //calling the Web API to provide State name array 

  17:                   $.get("http://localhost:43597/api/mystate/", function (data, textStatus) {

  18:                       var str = "";

  19:                       // create list with sate name which again referencing to new url

  20:                       for (var i = 0; i < data.length; i++) {

  21:                           str = str + "<li><a href='#/States/" + (i+1).toString() + "'>" + data[i] + "</a></li>";

  22:                       }

  23:  

  24:                       //Clean the main div 

  25:                       context.app.swap('');

  26:                       //Apeend the data in main div

  27:                       $("#main").append("<ul>" + str + "</ul>");

  28:  

  29:                           

  30:                   });

  31:  

  32:               });

  33:  

  34:               //States/stateId url 

  35:               this.get('#/States/:id', function (context) {

  36:                   //calling web api to get particular state by id

  37:                   $.get("http://localhost:43597/api/mystate/"+ context.params.id, function (data, textStatus) {

  38:                     

  39:                       context.app.swap('');

  40:                       $("#main").append("<h1>" + data + "</h1>");

  41:  

  42:  

  43:                   });

  44:               });

  45:  

  46:         

  47:  

  48:           });

  49:           

  50:           sammySPA.run('#/'); //run sammy.js

  51:  

  52:  

  53:  

  54:       });

  55:   </script>

Step 7:-

Let me explain the above code here

We have define $.sammy function which is bounded with the div whose.

$.sammy(‘#main’,function() {}).run(); this is the basic function to invoke sammy.js

Step 8:- Now to which url we need to entertain by which method like  get, put, Post, delete. We need to define our functionality according to our need in current example we have used get function.

this.get(‘#/’,function (context){});

The meaning of above line is when ever a request (default) invoke by end user just execute function as defined. in the function there is context parameter . Which help in accessing method type (get/post) , parameters

Step 9:-  Now when you run and click on States link you will get following screen

stateResult_sammy

Step 10:- you can test it further I have added list of states also with dynamic url  so when you click on MP, RJ, MH etc in above list you will get a new URL according to our need

statewithparticularId

I hope this example will help you to create your own SPA application.

I defiantly say here “Sammy.js” rock. I like this script hope you will also.

Enjoy learning

your Host

Rajat

How to consume Web API using JQUERY ?

 

Friends,

In last two articles we understood

 what is Web API ? (https://indiandotnet.wordpress.com/2014/02/23/what-is-web-api/)

and How to create it ? (https://indiandotnet.wordpress.com/2014/02/27/how-to-create-web-api/)

Now next is how to consume it ?

So here we will understand this by an example. I am pretty much sure you all  are comfortable with server side code so here in current example we using  client side code to consume web API.

In current example I have created a Web API with name “MyState” . The basic functionality of this Web API is to provide list of all the State with default get method and provide specific state according to provided id.

Let me show you snap shots of created code & running API here

Mystate_Code

Above figure shows default get method which response array of string (name of state)

defaultStateResult

Now to consume this Web API in our project we have added a view with following Java script

in below screen we have used a “get” JQUERY function and as we  know the API URL we wrote that and once the response from API returned we concatenated the response array with <li> tag and show as a innerHTML of stateName div as shown in below fig

consuming_web_Api_JQUERY

Now when we run this program on index.cshtml we got following response

stateResult

In current example we have used  “GET” method we can also consume post operation for INSERT/UPDATE/Delete

I hope you will like this post.

Thanks

Your host

Rajat