Extension methods Using C#

Hi Friends,

In today’s section we’ll start discussion on extension methods. This is one of the powerful feature of c#, which helps you to extend the codebase by adding methods in the existing c# built in method. so, what these extension methods will do, basically it is treated as a shorthand or reusable component in my view which you find useful to be used in various places. hence, in that case, what i would be doing i’ll be creating one static method basically extending any .net type and adding my desired method in it. we can also extension methods to Classes,structs and interfaces. However, we can also extend generics like List<T> or IEnumerable<T>. so, basically it’s a enabling technology which is adding a third party codebase. so, Extension methods are basically easy to use and simple to write.

so, let get started. so, for this am going to add a new class library as shown below. Now, am going to arrange my extensions in one folder called my extensions. so, there are couple of rules associated with extension methods, these are there has to be static class and the method also has to be inside the static class and the last one is that type which we are extending should go into the signature with “this” keyword.

1st

so, before we write the complete extension method, lets create test method for the same, so that we can see that how to consume these extension methods.

2nd

so, in the above case, i have written a extension method just to reverse the name, and if you have seen the same, this is very powerful technique to create the custom logic. so, let’s suppose we have some requirements which is custom to the project and is getting reused at various places, so for implementing the same, we could easily use Extension Methods. so, with this i would like to wrap this session, in the next session, we’ll delve more in extension methods. Till then stay tuned and happy coding.

Thanks,
Rahul
Happy Coding

968 total views, 1 views today

Posted in C# | Tagged

Working with promises and web api

Hi Friends,

In the last Post we have seen that how to post a form basically to an MVC action using Angular. we have also verified data being posted @ the chrome (client) level and at the server level as well. Now, moving ahead, let’s see how to handle the incoming server responses in this case. So, basically we want to handle 2 scenarios where in it successfully post the data and the other one where in it gets failed to post the data. So, let’s 1st see the happy path scenario.

95th 96th

so, here is the same thing which we have seen in the previous case. we have basically added $q library to handle the promises. Here, what am doing is upon successful submission am redirecting user to the movies page as shown below.

91th

97th

However, currently the movie didn’t get added. So, will handle this case later, but good news is that on successful submission we get redirected to Movies page. Now, let’s handle the scenario, where in returned some error while saving the same. So, to quickly test the same instead of returning 200 ok status from the PostMovie Controller let’s return internal server error.

98th

Now, when i build and refresh the same and then try to post the result, nothing will happen because we have not handled the error response scenario in our case yet. But, we can inspect the same in the chrome console as shown below.

99th

 

No, problem now let’s go ahead and handle the same as well.

100th 101th

 

so, what will happen here, when user hits Post Movie, if it is successful then in that case it will redirect it to the movies page, now if there is some error while saving the same then it will just the error flag to true, which we will handle in our html to produce the error on the screen.

102nd

so, what will happen here, this ng-show will become active when error flag returned true from the controller. so, the above said message will be published on the screen.

103rd

now, let’s see that how to achieve the same using web api. so, here what will do MVC will take care of serving the views and web api will take care of serving the endpoints. so, let’s get started changing the same with movies controller as shown below.

104th

so, with web api we don’t care of returning JSON explicitly, it’s the property of web api to return the json of the underlying model by default, so we just need to pass on the method in there and it will take care. so, now i have to modify my movies repository as well, i need to include api in the url. well this is how web api works.

105th

 

Now, when i build and refresh then i can see that api is working properly. Now, let’s go ahead and make the same changes to reviews part.

106th 107th

Download Link:- MVCPlusAngular

So, with this i would like to wrap this module and in the next section we’ll see more on angular validation and using resources more effectively. Till then, stay tuned and happy Coding.

Thanks,
Rahul
Happy Coding

1,377 total views, no views today

Posting Data with an MVC action

Hi Friends,

In today’s discussion we’ll discuss more on posting data to an MVC action. So, for that i need to 1st create an user interface which will allow us to post some data back to the server. so, am going to create a link in the index page which will navigate to Post Movie Page as shown below.

81th

 

and subsequently i do need to setup the route in the modules page as shown below.

82nd

Now, i need to create one PostMovies template as shown below.

83rd

so, notice this form is using that ng-model to bind to a movie object. so, this will create a movie object to angular scope and the movie object will have name, director, Releaseyear and the same i’ll be wiring up with angular controller. But, 1st let’s go to the MVC controller and make changes.

84th

Now, again i need to make some minor changes in the html page for the same as shown below

85th

 

so, as you can see above i have added one button to carry the model, which is basically handled by ng-click event where in it is taking movie model with it. So, now i have to create that PostMovie angular controller and it’s repository for the same.

86th

93rd

so, now i just need to add the newly added scripts on the index page.

88th

 

so, let’s build and refresh the page and see the behavior.

89th

Now, let’s try and post some values in it.

90th

so, now Test the post Movie event in the network tab of chrome debugging tool 1st, whether we are on right page or not.

91th 92nd

so, when you see the network tab you can see that 200 response is getting returned which means that data is getting posted to the server correctly also, when you see the header tab you will see the data being supplied from the UI itself. Now, in order to verify @ the controller side just put one debug point @ PostMovie MVC Controller and try to see the values receiving @ controller’s end.

94th

So, with this i would like wrap this section. With this am attaching solution for your reference as well. What you can do from here is extend the same according to your need . Till then stay tuned and Happy Coding.

Download Link:- MVCPlusAngular

Thanks,
Rahul

1,235 total views, no views today

Ajaxifying the MVC Action

Hi Friends,

In today’s discussion i’ll be discussing more about using ajax in conjunction with MVC Action methods. so, in the previous section, we have seen that how to bootstrap the data which means, when browser makes the request, server will send both HTML and data at one go to the browser, however, this data will be available to angular app via custom angular data service. This approach is also nice, but very less common. So, in this module we’ll see the same implementation via ajax way. so, with this approach when browser makes the request, the server will respond by sending just the html not the data and then the browser will make the 2nd request for the data, then the server will send the data back to the browser asynchronously. so, let’s get started how to achieve the same using MVC controllers.
so, now i’ll start changing with the common controller where in we were sending both the data to the view. Now, we don’t want to do the same. so, it will look like now

71th

72nd

we also don’t need the MovieBuilderVM class, so we can delete this class and the associated method from movieVMBuilder . Now, it will look like below

73rd

I have removed the serialization, reason being because am not going to push the data down to view rather than am going to use the controller to take care of these. so, we need to have two controllers one for movie and the another one is for movieReview as shown below. However, i already have those controllers but, i just need to modify a bit to take the Json request as shown below.

74th

 

same thing i need to do for movieReview case

75

 

so, this will convert the array to Json data and push the same down to view. Now, we need to modify angular movies controller, so now don’t need bootstrapped data, instead of that we will be using angular $Http as shown below. so, i’ll be doing the same using one repository with $q service as well to handle the response as shown below.

77th

76th

 

so, what this above case is doing basically $q library is a promise library, it basically allows you to handle the async communication. so, when the call is successful, it will resolve the promise. Now, we need to do the same thing for moviesReview case.

78th

79th

Now, we need to include these scripts in the index page.

80th

Now, when i build and refresh then i can see my data in action as shown below.66th

67th

 

so, with this i would like to wrap this module up and in the next section we’ll see more on posting the data using MVC. Till then stay tuned and Happy Coding.

Thanks,
Rahul
Happy Coding

1,357 total views, 1 views today

Linq in a nutshell

Hi friends,

I just wanted to share one pic, which explains LINQ architecture in a nutshell. It actually holds the complete meaning of using Linq.

linqsyntax

Thanks,
Rahul

1,025 total views, no views today

Deep linking in MVC App

Hi Friends,

This is the continuation of the last section where in we tried converting our app to Single Page App. But, there is one limitation to this as of now. If you see the below page.
65th

So, when i click on the link of Movies or Reviews, below mentioned urls with the following section will get produced.

66th

67th

so, what is happening here, only div is getting replaced in the <Ng-view> section, but it’s not making any server request. so, eventually when any request directly requested from the user as “http://localhost:63102/Common/MoviesReview” or “http://localhost:63102/Common/Movies“, it will result below error because there is no action called MoviesReview or Movies in the MVC controller Common.

68th

so, the problem is if someone try to bookmark this url, user will get 404 error. so, how to fix this issue. so, in order to fix the same, we need to catch all the routes within the Common section of our site. so, i’ll write a new definition for route to catch all the write.

69th

so, it says that if the incoming request starts with Common followed by anything even if there is multiple parameters inside the request, it will work, so it will load the Common controller and index action. so, let’s build the same and try now, so if i try now to navigate the url directly, it will work as expected. And if type “http://localhost:63102/Common/anything” url, it will still work, it will load the index page as shown below.

70th

However, i can tweak this behavior as well, let’s suppose if want to return 404 error when any garbage loads, then in that case i can go ahead and define specific routes for action based like one route for Movie and the other one Reviews, so what will happen, if any thing else will come in picture, then it will return a 404 error. so, This mechanism is called deep linking in MVC. so, this was the example of mini spa in a nutshell. In, the next section will start looking server side behavior with angular. We’ll see how Web Api is interaction is getting done with Angular. so, till then stay tuned and Happy Coding.

Thanks,
Rahul
Happy Coding

3,782 total views, no views today

Making the app into SPA

Hi Friends,

As we already know that Angular is a fully featured SPA Framework. So, let’s try to convert our app into mini spa. so, i’ll be moving few components and making the same very modular as shown below.

35th

 

so, i have cut the above code from the moviescontroller and put that in a different class under models folder. Now, let’s create another folder for ViewModel for Moviereviews.

36th

Now, let ‘s create a movieVMBuilder. so, here in the VM builder am building two objects basically and serializing the same, one for movies and the another one moviesReview. currently, am hard coding the data in here, just to keep the things simple, but in real time project, we might be using some kind of api mechanism to fetch the data from the database. But, for now it’s ok.

40th

so, here i have one more VM for movieReview as shown below.

41th

 

Now, let’s go back to our moviesController and will create an instance of movieVMBuilder to serialize the movies as shown below.39th

 

and, we need to also create one controller for our MoviesReview. so, let’s create one. This controller is actually very much similar to movies controller. Only it is going to return serialized MoviesReview.

42nd

Now, we need a view for that, so rt-click on the index and create one view as shown below

43th 44th

now, we need to create the movieReviews controller for the same. Below, is the screen shot for the same.

45th

so, now if i build and refresh the page, it will produce me the same output as shown below, but this like SPA.

32nd

 

Now, when i change the url to moviesReview, i would be able to see the another view as shown below

46th

 

so, now we have movie and it’s review page, but each of these pages are getting bootstrapped by it’s own data. But, these pages are getting rendered by separate controllers and separate views. so, now let’s try to convert the same in SPA app. so, if i see the network requests for each of them, i can see that each page is requesting 21 requests actually.

47th

 

now, let’s create one controller which will take care both of these, so let’s create one mvc controller say Common Controller. so, here also, i need to get one instance of VmBuilder, which is going to fairly simple like

48th

 

now, here i got the reference of movieVMBuilder, and that is calling the Method BuildMovieBuilder, which is nothing but taking the combination of movie and movieReview all together as shown below

49th

 

Now, if i see the View Model, it looks like something

50th

 

so, now let’s go ahead and create the view as shown below for the new Common Controller.

52nd

 

Now, when i build the same and refresh the page, I would see the below results.

51th

 

46th

 

32nd

 

Now, when i click any of these it is creating the pages independently, so still this is not SPA.  so, in case of page we just pull one page from the server, and we are clicking on different links, it’s just swapping the HTML inside it. so, now i need to create angular view which means whenever i switch views in SPA, this is where i want you to go. so, for this view switching i need to create templates for the same. so, let’s create a template folder for the same.

53rd 54th

 

so, if you notice the html for the above two htmls are basically the same div what we used in the views. Now, i need to setup the routes. so, am going to write the route in the module itself as shown below.

55th

 

so, now i have set up the routes, since these routes also have knowledge about controllers, hence i could go ahead and remove the controllers from the individual views. Then, in the common page, we need to update the links as shown below.

57th

so, now, i have the common page in place with the references of my both angular controllers. so, now when i build and check the same i can flip through views, but i cannot see data moving in there.

58th 59th

 

so, now, i need to create one more section to bootstrap the movies and movieReview data as shown below.

60th

then, need to fix the controllers to use common service as shown above.

61th 62nd

Then, when i refresh the page, i will be able to see the data properly with SPA in picture now as shown below.

63rd 64th

Now, in the next section we’ll see how to deep linking in Angular. @ the end of this project, i’ll also upload the solution, so that, you guys can tweak with existing app and get the feel of the same. Till then, stay tuned and Happy Coding.

Thanks,
Rahul
Happy coding

1,160 total views, no views today

Bootstrapping Data using Angular

Hi Friends,

This is the continuation of the last segment where i left the discussion after displaying the static data on the page. However, now let’s try to fetch data from the server itself. so for this i would need to do couple of changes here. Now, since here JSON is going to be passed on over http request. so, am going to take the raw values and pass the same as shown below. So, here am putting whole model into the string.
19th

So, i do need data which is serialized and passed on as JSON to the view. so, here in the real world project i won’t having that View Model Class in here, rather than keeping in a separate repository also, it won’t have any hard coded data as it is there in the controller, rather than making some api call to database and then inject the same.
16th

Now, let’s build and try that. so, you can see that even after that values are not populated in there, so when you see the source of the page, you will see the JSON data which is pushed down in the model is upper case, and we are expecting the same in camelCase, this is because of the default behavior of the JSON serializer which we are using JSON.Net

17th 18th

However, we could change the behavior as shown below with a small setting which is basically a contract resolver for using the Camel case property names.

20th

Now, when i build the same refresh the page , i’ll get the same result as shown below

21th

 

This was the demonstration that how to bootstrap the data using ng-init and this is fairly useful in many cases, but there is one limitation to this approach that movies variable is only available within the scope of ng-init means any variable inside that particular div will be ok. so, in case if we want to expose the  data outside this view, i need to expose the data globally. so, in order to achieve the same i could use controllers. so, let’s go ahead and create one controller

22nd

 

now, in the index page i need to specify one new javascript section, where in i can bootstrap the data.

23rd

Now, when i refresh the page, i won’t be able to see the values on the page, reason being is incoming values are not in the ng-scope. However, i could verify that values are coming properly in the chrome debugging console section as shown below.

24th 25th

so, basically the above movies variable which i have declared in the javascript section is a raw javascript not an angular expression, that is why it’s not populated the data on the page. so, let’s create a controller, and before we create a controller, let’s create a module. in case if you are not sure about modules and controllers, please refer my earlier posts on angular basics.

30th

27th 28th

 

Now, in order to use the controller as assigned above, i need to tell the page to use moviesModule, so i need to wireup the same in _Layout page as shown below and apart from this i also need to wire up new javascript file module one in the layout page.

29th

 

also, i need to add one script in index page as well, that is controller reference as shown below.

29th 31th

 

so, now when i come and refresh the page, i would see the desired results as shown below

32nd

 

so, what we have done here, we are setting the values in our movies variable which is a global variable, pulling the same from Model and then our controller is putting the same in the scope, so that same raw javascript array can be used in angular expression. so, this is the one way of bootstrapping the data on the page, however we could use more efficient way of pulling the data by using custom angular service

33th

so, now we have AngulardataService which can be used across the app. Now, let’s use the service in our controller as shown below

34th

 

so, if you refresh the page, you will see that page is still loading and getting the data, only now it’s getting the data from the service instantiated from the page and then injected into the controller and then we set the service data to the scope data from the service. So, i wrap this section here for now. In the next module we’ll see how to communicate with the services asynchronously. so, till then stay tuned and happy coding.

Thanks,
Rahul
Happy Coding

989 total views, no views today

Angular with .Net – 1st Part

Hi Friends,

In today’s discussion we’ll see how to implement Angular using ASP.Net. So, basically i’ll be writing one ASP.net MVC APP where in i’ll be using ANGULAR to implement the client side logic.However, i do suggest readers to go through the basics of Angular in my earlier Angular discussion. So, let’s get started. Let’s Create a new ASP.net MVC 4 Empty project .
1st

Now, let’s do some dummy test 1st.So, let’s go and create 1st demo controller as HelloWorld controller as shown below, then add respective view for the same.

2nd

Now, let’s create a view and replace the existing code with the below one. However, since am using VS 2013, so, you will see that even @ the script level, you will be getting good intellisense.

3rd

4th

6th

So, if you see the page, inside this MVC project Angular is loading. so, it’s important to note that 1st MVC operation will be done, then Angular operation will be performed. However, in the above case, i have computed two values inside {{data-binding expression}}. Now, let’s go ahead and bring one layout page in the app.

7th 8th

Now, let’s go ahead and start building a real app, so for now let’s get rid of this hello world controller and let’s build movie site itself which we have earlier build but this time we build it with Angular. But, before doing the same, i need few library references as we have created an empty project. so, let’s 1st Jquery, then Bootstrap for some look and feel and then Add Json.Net to serialize our data and pass the same to view.

ok, Now let’s add these references to our layout page as shown below

9th

Now, also go ahead and download a free bootstrap theme from the Bootswatch.com

10th

Now, let’s build the same and refresh, then i can see CSS effect in there.

11th

However, i do need to populate few movies in there. so for that am going to add some movies on the page and then bootstrap the same with directive ng-repeat. here, i have used ng-repeat to loop through the collection. For now, I have hard coded few of the movie names on the page itself as shown below

12th 13th

so, with this i would like to wrap this session. We’ll delve much deeper in the coming series. Till then stay tuned and Happy coding.

Thanks,
Rahul
Happy Coding

885 total views, 1 views today

My New Dev box

Hi Friends,

I would just like to share my new Dev Box, multicore processor. So, basically i have 3 big systems designated for development. All these boxes are of different resolution and different processor, highest configuration being is I7 processor, 16 GB RAM, 500HDD. simply fast enough accommodate to tackle 5 projects @ time.

Dev_Box

am loving it.

Thanks,
Rahul
Happy Coding

814 total views, no views today