Developing Book My Seat Application In AngularJS And ASP.NET - WebAPI Methods - Part Two

Developing Book My Seat Application In AngularJS And ASP.NET - WebAPI Methods - Part Two

Here, I’ve merely thought to write my thoughts about hands-on Angular. This is my first article which tells you how to get your hands dirty with AngularJS & ASP.NET WEBAPI and SQL Server BookMySeat Application Tutorials.

• BOOKMYSEAT APPLICATION ANGULAR JS ASP.NET WEBAPI AND SQL SERVER 2012 : PART ONE

This is the technology stack for this BookMySeat library application, as shown below:

In the first article, I shared the technology and other brief information about components used. In this article, will look into WebApi creation and route to configure that.
This is an initial look at the WebAPI controller defined in Solution Explorer as depicted below:

If you open this file, you will have around 6 methods which have generic names to perform the operations and easy to understand.These WebAPI methods are given below:

The complete code for all APIs is given below.

1. public class BookMySeatAPIController : ApiController 
2.     { 
3. //
4. // GET: /BookMySeatAPI/
5.         SqlConnection objConnection = new SqlConnection(); 
6. public void SqlConnection() 
7.         { 
8.             objConnection.Dispose(); 
9.             objConnection.ConnectionString = "server=.;database=BookMySeat;uid=sa;pwd=Tpg@1234;"; 
10.             objConnection.Open(); 
11.         } 
13.         [HttpGet] 
14. public int[] GetSeatCount([FromUri] int slot) 
15.         { 
16. try
17.             { 
19.                 SqlConnection(); 
20.                 SqlCommand SqlCommand = new SqlCommand("sp_GetMySeat", objConnection); 
21.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
22.                 SqlCommand.Parameters.AddWithValue("@timeslotid", slot); 
23.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
24.                 da.SelectCommand = SqlCommand; 
25.                 DataSet ds = new DataSet(); 
26.                 da.Fill(ds); 
27. int[] result = new int[ds.Tables[0].Rows.Count]; 
28. for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
29.                 { 
30.                     result[i] = Convert.ToInt16(ds.Tables[0].Rows[i][0].ToString()); 
31.                 } 
32. return result; 
33.             } 
34. finally
35.             { 
36.                 objConnection.Close(); 
37.                 objConnection.Dispose(); 
39.             } 
40.         } 
44.         [HttpPost] 
45.         [ActionName("SeatBook")] 
46. public int[] PostBookSeat(BookSeat objBookSeat) 
47.         { 
48. try
49.             { 
50.                 SqlConnection(); 
51.                 SqlCommand SqlCommand = new SqlCommand("sp_BookMySeat", objConnection); 
52.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
53.                 SqlCommand.Parameters.AddWithValue("@UserName", objBookSeat.UserName); 
54.                 SqlCommand.Parameters.AddWithValue("@TimeSlot", objBookSeat.TimeSlot); 
55.                 SqlCommand.Parameters.AddWithValue("@SeatNo", objBookSeat.SeatNo); 
56.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
57.                 da.SelectCommand = SqlCommand; 
58.                 DataSet ds = new DataSet(); 
59.                 da.Fill(ds); 
60. int[] result = new int[ds.Tables[0].Rows.Count]; 
61. for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
62.                 { 
63.                     result[i] = Convert.ToInt16(ds.Tables[0].Rows[i][0].ToString()); 
64.                 } 
65. return result; 
66.             } 
67. finally
68.             { 
69.                 objConnection.Close(); 
70.                 objConnection.Dispose(); 
72.             } 
73.         } 
75.         [HttpPost] 
76.         [ActionName("ValidateUser")] 
77. public string ValidateUser(ValidateUser objValidateUser) 
78.         { 
79. try
80.             { 
81.                 SqlConnection(); 
82.                 SqlCommand SqlCommand = new SqlCommand("ValidateUser", objConnection); 
83.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
84.                 SqlCommand.Parameters.AddWithValue("@UserName", objValidateUser.UserName); 
85.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
86.                 da.SelectCommand = SqlCommand; 
87.                 DataSet ds = new DataSet(); 
88.                 da.Fill(ds); 
89. return ds.Tables[0].Rows[0][0].ToString(); 
90.             } 
91. finally
92.             { 
93.                 objConnection.Close(); 
94.                 objConnection.Dispose(); 
95.             } 
96.         } 
97.         [HttpPost] 
98.         [ActionName("SeatDetail")] 
99. public string GetSeatDetail(GetSeatDetail objGetSeatDetail) 
100.         { 
101. try
102.             { 
103.                 SqlConnection(); 
104.                 SqlCommand SqlCommand = new SqlCommand("sp_GetSeatDetail", objConnection); 
105.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
106. // SqlCommand.Parameters.AddWithValue("@UserName", objBookSeat.UserName);
107.                 SqlCommand.Parameters.AddWithValue("@TimeSlot", objGetSeatDetail.TimeSlot); 
108.                 SqlCommand.Parameters.AddWithValue("@SeatNo", objGetSeatDetail.SeatNo); 
109.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
110.                 da.SelectCommand = SqlCommand; 
111.                 DataSet ds = new DataSet(); 
112.                 da.Fill(ds); 
113. return ds.Tables[0].Rows[0][0].ToString(); 
114.             } 
115. finally
116.             { 
117.                 objConnection.Close(); 
118.                 objConnection.Dispose(); 
120.             } 
121.         } 
122.         [HttpPost] 
123.         [ActionName("DeleteSeat")] 
124. public string DeleteSeat(DeleteSeat objDeleteSeat) 
125.         { 
126. try
127.             { 
128.                 SqlConnection(); 
129.                 SqlCommand SqlCommand = new SqlCommand("sp_DeleteSeat", objConnection); 
130.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
131. // SqlCommand.Parameters.AddWithValue("@UserName", objBookSeat.UserName);              
132.                 SqlCommand.Parameters.AddWithValue("@SeatNo", objDeleteSeat.SeatNo); 
133.                 SqlCommand.Parameters.AddWithValue("@SlotNo", objDeleteSeat.TimeSlot); 
134.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
135.                 da.SelectCommand = SqlCommand; 
136.                 DataSet ds = new DataSet(); 
137.                 da.Fill(ds); 
138. return ds.Tables[0].Rows[0][0].ToString(); 
139.             } 
140. finally
141.             { 
142.                 objConnection.Close(); 
143.                 objConnection.Dispose(); 
145.             } 
146.         } 
148.         [HttpGet] 
150. public List<ShowBookSeat> ShowBookSeat() 
151.         { 
152. try
153.             { 
154.                 SqlConnection(); 
155.                   List<ShowBookSeat> list = new List<ShowBookSeat>();  
156.                 SqlCommand SqlCommand = new SqlCommand("sp_ShowBookDetail", objConnection); 
157.                 SqlCommand.CommandType = CommandType.StoredProcedure; 
158. // SqlCommand.Parameters.AddWithValue("@UserName", objBookSeat.UserName);              
159. //SqlCommand.Parameters.AddWithValue("@UserName", objDeleteSeat.SeatNo);
160. //SqlCommand.Parameters.AddWithValue("@SlotNo", objDeleteSeat.TimeSlot);
161.                 SqlDataAdapter da = new SqlDataAdapter(SqlCommand); 
162.                 da.SelectCommand = SqlCommand; 
163.                 DataSet ds = new DataSet(); 
164.                 da.Fill(ds); 
165. for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
166.                 { 
167.                     ShowBookSeat ShowBookSeat = new ShowBookSeat(); 
168.                     ShowBookSeat.UserName = (ds.Tables[0].Rows[i]["username"]).ToString(); 
169.                     ShowBookSeat.Date =Convert.ToDateTime(ds.Tables[0].Rows[i]["currentday"]); 
170.                     ShowBookSeat.TimeSlot = Convert.ToInt32(ds.Tables[0].Rows[i]["timeslot"]); 
171.                     ShowBookSeat.SeatNo = Convert.ToInt32(ds.Tables[0].Rows[i]["seatno"]); 
172.                     list.Add(ShowBookSeat); 
173.                 } 
174. return list;  
175.             } 
176. finally
177.             { 
178.                 objConnection.Close(); 
179.                 objConnection.Dispose(); 
181.             } 
182.         } 
184.     } 

Code segment for WebApiConfig under App_start folder is given below.

1. public static class WebApiConfig 
2.     { 
3. public static void Register(HttpConfiguration config) 
4.         { 
5.             config.Routes.MapHttpRoute( 
6.                 name: "DefaultApi", 
7.                 routeTemplate: "api/{controller}/{id}", 
8.                 defaults: new { id = RouteParameter.Optional } 
9.             ); 
10.             config.Routes.MapHttpRoute( 
11.                name: "seatbook", 
12.                routeTemplate: "api/seat/{controller}/{action}/{id}", 
13.                defaults: new { id = RouteParameter.Optional } 
14.            ); 
15.             config.Routes.MapHttpRoute( 
16.                name: "seatDetail", 
17.                routeTemplate: "api/seatdetail/{controller}/{action}/{id}", 
18.                defaults: new { id = RouteParameter.Optional } 
19.            ); 
20.             config.Routes.MapHttpRoute( 
21.                name: "ValidateUser", 
22.                routeTemplate: "api/ValidateUser/{controller}/{action}/{id}", 
23.                defaults: new { id = RouteParameter.Optional } 
24.            ); 
25.             config.Routes.MapHttpRoute( 
26.                name: "DeleteSeat", 
27.                routeTemplate: "api/DeleteSeat/{controller}/{action}/{id}", 
28.                defaults: new { id = RouteParameter.Optional } 
29.            ); 
30.         } 
31.     } 

The application which we are about to build consists almost all of the above defined keywords and the initial look of the application is as shown below.

Hope it’ll help you some day. Enjoy Coding.

Categories: AngularJS , MVC , WCF and WebAPI

AngularJS And ASP.NET MVC Movie Library Application - Integration Of IMDB Movie API - Part FivE

 

AngularJS And ASP.NET MVC Movie Library Application - Integration Of IMDB Movie API - Part Fiv

• ANGULARJS AND ASP.NET MVC MOVIE LIBRARY APPLICATION - PART ONE
• AngularJS And ASP.NET MVC Movie Library Application - Part Two Module,Controller,$Scope and Twitter Bootstrap
• AngularJS And ASP.NET MVC Movie Library Application - Part Three- EventBinding with UI Elements
• AngularJS And ASP.NET MVC Movie Library Application - AngularJS Routing with partial templates - Part Four

Moving ahead, in this article, we’ll focus on the integration of live movie API within an existing application.
Kindly open the given URL and register yourself. After registering, you will get a token which we’ll be using in this article to retrieve the information/data from API.
http://api.myapifilms.com/imdb
Once you register yourself, you should receive an email like the given image, with some token value.

Open the website with the link, shared above, and fill in the details, as shown below in the following images.


As soon as you click on the submit button, you should receive a response in JSON format, as given below:

You may also get XML response for just making amendments either in request or in format dropdown, as shown below:

So far so good. We are now able to use this API URL within our application.
Open you solution and find routing.js file to add a new Controller into this, as give below:

1. routingApp.controller("ApiMovieController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { 
3.     $scope.SearchMovieByTitle = function () { 
5. var title = $scope.searchByTitle; 
6.         alert(title); 
7.         $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + title + "&token=5bf98789787hghjg4&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=5&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0"es=0&fullSize=0&companyCredits=0&callback=JSON_CALLBACK").success(function (response) { 
8.             console.log(response); 
9.             $scope.movies = response.data.movies; 
10.         }) 
12.     }]); 

Kindly, put your token value in the above http request, in order to get the correct result.
Note: If you have noticed, in the above code segment, you have injected a dependency $http and $timeout. For now, only concentrate on the $http and forget about $timeout.

Complete code for routing.js main JavaScript file is shown below:
Code Routing.js file

1. /// <reference path="../Scripts/angular.js" />
2. /// <reference path="../Scripts/fusioncharts.js" />
3. /// <reference path="../Scripts/fusioncharts.charts.js" />
4. /// <reference path="DataService.js" />
5. /// <reference path="../Scripts/angular-route.js" />
7. var routingApp = angular.module('routingApp', ['ngRoute']); 
9. routingApp.directive("login", function () { 
11. var directive = {}; 
13. //restrict = E, signifies that directive is Element directive
14.     directive.restrict = 'E'; 
16. //template replaces the complete element with its text.
17.     directive.templateUrl = "/Application/Login.html";//"My first directive";
19. return directive; 
21. }); 
23. routingApp.config(['$routeProvider', function ($routeProvider) { 
24. //alert("Route Initiated");
25.     $routeProvider. 
26. // when('/Home', { templateUrl: '/Application/login.html', controller: 'DotnetPiperController' }).
27.         when('/Movie', { templateUrl: '/Application/Movie.html', controller: 'MovieController' }). 
28.         when('/SearchMovie', { templateUrl: '/Application/SearchMovie.html', controller: 'ApiMovieController' }). 
29.          when('/Tolly', { templateUrl: '/Application/Tollywood.html', controller: 'tollyController' }). 
30.         otherwise({ redirectTo: '' }); 
31. }]); 
33. routingApp.controller("tollyController", function ($scope) { 
35.     $scope.tollyMessage = "Welcome to TollyWood to watch Action,Thriller and Suspence movies"; 
37. }); 
40. routingApp.controller("MovieController", ['$scope', function ($scope) { 
42.     $scope.edit = false; 
43.     $scope.message = "Welcome to DotnetPiper.com to learn Angular"; 
44.     $scope.error = false; 
45.     $scope.clear = false; 
46.     $scope.success = false; 
47. // alert("Servcie Called");
49. var movies = [ 
50.                 { title: "Revenent", year: "2015", rating: "5Star", plot: " A revenger Journey" }, 
51.                  { title: "Counjouring2", year: "2016", rating: "4Star", plot: " A Complete Hourror" }, 
52.                  { title: "DDLJ", year: "1995", rating: "SuperStar", plot: "Romantic love story" }, 
53.                  { title: "Sultan", year: "2016", rating: "5Star", plot: "A Warrior" }, 
54.                  { title: "BajiRao Mastani", year: "2015", rating: "4.5 Star", plot: "Film of the Year" } 
55.     ]; 
57.     $scope.movies = movies; 
59.     $scope.AddMovie = function (movie) { 
61. if ($scope.edit == true) { 
63. var index = $scope.movies.indexOf(movie); 
64. // alert("edit Called");
65.             $scope.movies[index] = movie; 
66. //alert(movie.rating);
67.             $scope.updatedMovie = movie; 
68.             $scope.success = true; 
69.             $scope.movie = {}; 
70.         } 
71. else { 
72. var newMovie = { 
73.                 title: $scope.movie.title, 
74.                 year: $scope.movie.year, 
75.                 rating: $scope.movie.rating, 
76.                 plot: $scope.movie.plot 
77.             }; 
79.             movies.push(newMovie); 
80. // alert("Add Called");
81.         } 
82.     } 
84.     $scope.DeleteMovie = function (movie, index) { 
86.         movies.splice(index, 1); 
87. // $scope.movie = movie;
88.         $scope.updatedMovie = movie; 
89.         $scope.success = false; 
90.         $scope.clear = true; 
91.         $scope.movie = {}; 
92.         console.log(index); 
93.     } 
94.     $scope.EditMovie = function (movie, index) { 
96.         $scope.selectedRow = null;  // initialize our variable to null
97.         $scope.selectedRow = index; 
98.         $scope.movie = movie; 
99.         $scope.edit = true; 
100.     } 
101. }]); 
104. routingApp.controller("ApiMovieController", ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) { 
106.     $scope.SearchMovieByTitle = function () { 
108. var title = $scope.searchByTitle; 
109.         alert(title); 
110.         $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + title + "&token=5bf94c9e-203f-4a6f-91d0-a63a59a77084&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=5&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0"es=0&fullSize=0&companyCredits=0&callback=JSON_CALLBACK").success(function (response) { 
111.             console.log(response); 
112.             $scope.movies = response.data.movies; 
113.         }) 
114.     } 
117.     $scope.dateTime = new Date().getMinutes(); 
118. // alert($scope.dateTime);
120.     document.getElementById("btnSearch").addEventListener('click', function SearchMovieByTitleDigest() { 
122. var title = $scope.searchByTitle; 
124.         $scope.$watch("searchByTitle", function (newValue, oldValue) { 
125.             $scope.searchByTitle = newValue; 
126.             console.log("$scope.searchByTitle Called " + $scope.searchByTitle); 
127.             alert($scope.searchByTitle); 
128.         }); 
130. //console.log(title);
131. //alert(title);
132.         $http.jsonp("http://api.myapifilms.com/imdb/idIMDB?title=" + $scope.searchByTitle + "&token=5bc9e-203f-4a6f-91d0-a63a59de4222&format=json&language=en-us&aka=0&business=0&seasons=0&seasonYear=0&technical=0&filter=2&exactFilter=0&limit=5&forceYear=0&trailers=0&movieTrivia=0&awards=0&moviePhotos=0&movieVideos=0&actors=0&biography=0&uniqueName=0&filmography=0&bornAndDead=0&starSign=0&actorActress=0&actorTrivia=0&similarMovies=0&adultSearch=0&goofs=0"es=0&fullSize=0&companyCredits=0&callback=JSON_CALLBACK") 
133.             .success(function (response) { 
135.                 $scope.movies = response.data.movies; 
137.                 $timeout(function () { 
138.                     $scope.$digest(); 
139.                 }, 100); 
141.             }) 
142.     }); 
144. //document.getElementById("btnSearch").addEventListener('click', function () {
145. //                console.log("Seach Started");
146. //                alert("Seach Started");
147. //                $scope.dateTime = new Date().getMinutes();
148. //                $scope.$digest();
149. //            });
150. }]); 

We are almost done with our Controller code part. It's now turn to create the UI to meet our purpose.
Kindly open your solution and add searchMovie.html file, as shown below in the screenshot:

Please copy and paste the following code in searchMovie.html partial template.
Code for searchMovie.html file,

1. <!DOCTYPE html>
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
5. <h2>Seach Movie Using IMDB API</h2>
6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
9. <style>
10.         .selected 
11.         { 
12.             background-color: lightyellow; 
13.             color: red; 
14.             font-weight: bold; 
15.         } 
16. </style>
17. </head>
19. <body ng-app="routingApp" class="jumbotron">
20. <div ng-controller="ApiMovieController" class="container">
22.         <!--<div ng-show="success" class="alert-success">Record has been upddated for movie :  {{updatedMovie.title}}</div>
23. <div ng-show="clear" class="alert-success">Record has been deleted for movie :  {{updatedMovie.title}}</div>-->
24. <div class="row col-md-8">
25. <table class="table table-striped ">
29. <tr>
30. <td>
31. <input type="text" ng-model="searchByTitle" class="form-control" style="width: 300px;" />
32. </td>
33.                     {{dateTime}} 
34. <td>
35. <button type="button" ng-click="SearchMovieByTitle()" class="btn btn-info">Search using Angular Scope 
36. <span class="glyphicon glyphicon-search"></span>
37. </button>
38. <br />
40. </td>
41. </tr>
42. <tr>
43. <td></td>
44. <td>
45. <button type="button" id="btnSearch" class="btn btn-info">Seacrh Movie Using EventListener 
46. <span class="glyphicon glyphicon-search"></span>
47. </button>
48. </td>
49. </tr>
50. <tr class="thead-inverse">
51. <td style="background-color: Highlight">Title</td>
52. <td style="background-color: Highlight">Year of Release</td>
53. <td style="background-color: Highlight">Rating</td>
54. <td style="background-color: Highlight">Plot</td>
55. <td style="background-color: Highlight">Actions</td>
56. </tr>
57. <tbody>
58. <tr ng-repeat="movie in movies" ng-class="{'selected':$index == selectedRow}">
59. <td>{{movie.title}} 
60. </td>
61. <td>{{movie.year}} 
62. </td>
63. <td>{{movie.rating}} 
64. </td>
65. <td>{{movie.plot }} 
66. </td>
67. <td></td>
68. </tr>
69. </tbody>
70. </table>
71. </div>
72. </div>
73. </body>
74. </html>

Once you paste the above code segment, run an application and click on Search Movie Globally.
Note: Ensure that you had implemented the routing, as shown in the below URL,

• AngularJS And ASP.NET MVC Movie Library Application - Part Four AngularJS Routing with partial templates

The output will be, as depicted below:

Mapping of the above textbox search, using Angular Scope. Whatever value we put into the textbox, ApiMovieController reads that value using scope and passes into http request as Title, as depicted in the screenshot below:

Now, search for the movie as I’ve done for The Revenant and Sultan, both.


Kindly refer tothe given screen for full fledged movie search operation.

Hope it’ll help you some day. Enjoy Coding.

Categories: AngularJS , MVC

Access Model State Property within the View of ASP.NET MVC 4

Hi Folks,
If you want to access the ModelState property in the View , you can use the ModelState in your Razor View as depicted below in image:

This is the source code as shown below:

1. @model IEnumerable<MVCSample.Models.EmpRegistration> 
2. @{ 
3.     ViewBag.Title = "Verify"; 
5. if (@ViewContext.ViewData.ModelState.IsValid) 
6.     { 
7.         ViewBag.Title = "Verify"; 
9. if (TempData["EmployeeRegistration"] != null) 
10.         { 
11.             var tempDataEmployeeRegistration = TempData["EmployeeRegistration"]; 
12.         } 
13.     } 
14. } 

Thanks

To learn more about MVC please go to the following link.
MVC Articles
Thanks.
Enjoy coding and reading.

Categories: Error Resolutions , MVC

Bind DropDownListFor at runtime in MVC : An Essential Tip

Bind DropDownListFor at runtime in MVC : An Essential Tip

During an implementation of MVC View page ,I struggled little to bind the DropDownList with the runtime value from ViewModel . Here is the pictorial representation to Bind the DropDownList at runtime.

Image Representation As depicted below:

Hope it will help you to bind DropDownListFor at runtime.

To know more MVC and WebApi Kindly go through with these links

MVC Articles & WCF and WebAPI

Thanks.
Enjoy coding and reading.

Categories: MVC

Return Multiple Models in single View in MVC4

Return Multiple Models in single View in MVC4

 

As Exploring MVC more, today I am going to share one the interesting fact about MVC 3 to use multiple models in single view.
I belief this is one the interesting fact about MVC, which may be in use on regular basis. Because in today’s world generally we don’t keep data into single place/model.
So Let’s Go:
To move on I’d like to share little bit about MVC (Model-View-Controller) with excerpts.
Controller
Controllers are the heart of MVC. A controller handles some of the main work of the application, such as:

• It handles the User Input.
• It handles the User Interaction.
• It reads the data from the View.
• Then it sends the data read to the Model.

In simpler manner you can say that it receives the request from the user and sends it to the Model, and then the Model retrieves the related data from the database and sends the result to the View. A controller can be associated with multiple view means we can define multiple actions in controller and according to action associated view show. It is similar to Business Layer of 3-tier architecture. It is main part of MVC architecture.
View
View is simply used to display the data; it is the Graphical Data Representation. "Model sends the output to the View then the View displays the data to the end user", so it works like a bridge between the Model and the End User. Often the views are created from the model data.
Model
A Model handles the logic for the application data; it implements the Data Domain logic. A Model is associated with Views and Controller. It produces updated output on view. Often model objects retrieve data from database and store data to database. The Database Connection is part of the model and it provides the output requested by the user.
A typical Diagram of MVC:

Now we move ahead and discuss the code agenda of this article.
Step 1.
I’ve created a Model class named as GuestResponse having the code snippet:

Step 2.
Whenever we hit any Url into browser it generally goes into any controller and controller performs its action and returns its model to view, I have HomeController for this purpose and the code shown in below depict image:
 

Let’s discuss the code snippet in above given image.
At the first place I created an object of ParentModel class like:

ParentModel objParent = new ParentModel();

Later created an object of GuestResponse model class, which is of List type having some values as given below in code snippet?

   1:  List<GuestResponse> objGuestResponse = new List<GuestResponse>();

   2:   

   3:  objGuestResponse.Add(new GuestResponse { Name = "Sachin Kalia", Email = "Sachin@sachin.com", WillAttend = true });

   4:   

   5:  objGuestResponse.Add(new GuestResponse { Name = "Ravish Sindhwani", Email = "Ravish@Ravish.com", WillAttend = true });

   6:   

   7:  objGuestResponse.Add(new GuestResponse { Name = "Dhananjay Kumar", Email = "Ravish@Ravish.com", WillAttend = true });

   8:   

and passed its object to ParentModel as given below:
objParent.GuestResponse = objGuestResponse;
 
The same flow for the GuestCheck model class which is also of List type having some values as given below in code snippet?
 

List<GuestCheck> objGuestCheck = new List<GuestCheck>();

objGuestCheck.Add(new GuestCheck { GuestName = "Sachin Kalia", GuestPhone = "9911635975" });

objGuestCheck.Add(new GuestCheck { GuestName = "Ravish Sindhwani", GuestPhone = "7666666786" });

objGuestCheck.Add(new GuestCheck { GuestName = "Dhananjay Kumar", GuestPhone = "7667877786" });

And passed its object to ParentModel as given below:

 
Steps to move ahead and create an object of ParentModel ,the under given image is self-descriptive:

 
Step 3. The another step is to create View named as RsvpForm.cshtml having the following code snippet.

   1:  @using (Html.BeginForm())

   2:  {

   3:  <h2 style="background-color:Lime" color:"red">EmpRegistration</h2>

   4:   

   5:  foreach (var item in Model)

   6:  {

   7:   

   8:  <tr>

   9:   

  10:  @for (int i = 0; i < @item.GuestResponse.Count; i++)

  11:  {

  12:  <td>

  13:  <table><tr>

  14:  <td> @item.GuestResponse[i].Name @item.GuestResponse[i].Email @item.GuestCheck[i].GuestPhone ||</td>

  15:   

  16:  @Html.Raw(HttpUtility.HtmlEncode(Environment.NewLine))

  17:   

  18:  </tr></table>

  19:  </td>

  20:  }

  21:   

  22:  @*@Html.DisplayFor(modelItem => item.GuestResponse[1].Email.ToString())*@

  23:   

  24:  </tr>

  25:   

  26:  }

  27:   

  28:  }

  29:   

@model IEnumerable<MVCSample.Models.ParentModel>: If you notice at this line you will examine this model is of IEnumerable type which we’ve returned from HomeController class.

And another most important fact is about the Model collection at time of iteration in foreach loop:

It gives you the collection of both model classes, which we look for:
Step 4:

Now time to run you application and Press F5 .You will see the following depict image.



Ignore this and paste the following URL in your browser window: http://localhost:60346/Home/Rsvpform
The output will be:

I tried to keep it simple to understand the fact in easier manner.
You can download the code from here Return Multiple Models in Single View in MVC3
Enjoy Coding and stay Happy

Categories: MVC

Integration of Google ReCaptcha With MVC4 Application

Integration of Google ReCaptcha With MVC4 Application

It is in trend these days to verify that a user is a human or not and the easiest and most used option to do this is to have Google ReCaptcha in your application. This article elaborates how to integrate Google reCaptcha in a MVC4 application. After going through with this article you may get the benefit of this rich feature.
ReCaptcha

To understand what reCaptcha is we first need to define the term “Captcha“.
Captcha is a test made of an image and distorted text that must be solved by human users when they want to subscribe to websites that want to ensure the user is a human being and not a bot or a computer (= preventing spam). Excerpt taken from link.
The initial step to integrate Google reCaptcha is to register your site/domain to receive public/private keys. To reach that level merely paste this URL in a browser.
As soon as you hit the preceding given URL it gives you given the following screen.

I have registered mine as shown in the following screen shot:

This is how it looks after registering this feature and provides public/private keys along with a reference file and API to use further.

You have registered and now ready to use this excellent feature.
Step 1
Kindly put you public key and private key in the web.config file as shown in the following image:

Step 2

Kindly ensure a few points in order to integrate Google reCaptcha on the .cshtml page as shown in the following image:

Source Code Create.cshtml page is given below:

  1: @model MVCSample.Models.EmpRegistration  
  2: @{  
  3:     ViewBag.Title = "Create";  
  4: }  
  5: <h2>  
  6:     Create</h2>  
  7: <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>  
  8: <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>  
  9: 
 10: <script type="text/javascript" src='https://www.google.com/recaptcha/api.js'></script>  
 11: 
 12: @using (Html.BeginForm())  
 13: {  
 14:     @Html.ValidationSummary(true)  
 15:     <fieldset>  
 16:         <legend>EmpRegistration</legend>  
 17:         <div class="editor-label">  
 18:             @Html.LabelFor(model => model.Id)  
 19:         </div>  
 20:         <div class="editor-field">  
 21:           @*  @Html.EditorFor(model => model.Id)  
 22:             @Htm*@l.ValidationMessageFor(model => model.Id)  
 23:         </div>  
 24:         <div class="editor-label">  
 25:             @Html.LabelFor(model => model.Name)  
 26:         </div>  
 27:         <div class="editor-field">  
 28:             @Html.EditorFor(model => model.Name)  
 29:             @Html.ValidationMessageFor(model => model.Name)  
 30:         </div>  
 31:         <div class="editor-label">  
 32:             @Html.LabelFor(model => model.Address)  
 33:         </div>  
 34:         <div class="editor-field">  
 35:             @Html.EditorFor(model => model.Address)  
 36:             @Html.ValidationMessageFor(model => model.Address)  
 37:         </div>  
 38:         <div class="editor-label">  
 39:             @Html.LabelFor(model => model.City)  
 40:         </div>  
 41:         <div class="editor-field">  
 42:             @Html.EditorFor(model => model.City)  
 43:             @Html.ValidationMessageFor(model => model.City)  
 44:         </div>  
 45:         <div class="g-recaptcha"  data-sitekey=@System.Configuration.ConfigurationManager.AppSettings["recaptchaPublicKey"]></div>  
 46: 
 47:         <p>  
 48:             <input type="submit" value="Create" />  
 49:         </p>  
 50:     </fieldset>  
 51: }  
 52: <div>  
 53:     @Html.ActionLink("Back to List", "Index")  
 54: </div>

Step 3

Verify that the user response as reCAPTCHA is generated and resolved by a user. The following API URL is used to verify the user response.
In the preceding API URL the secret and response parameters are required and whereas the remoteip is optional. We have a response class to verify the user response.

I have created a POST method in the Index action in the RegisterController to verify the user response.
Here the code segment is shown below:

  1: [HttpPost]  
  2: public ActionResult Create(EmpRegistration modelEmpRegistration)  
  3: {  
  4: bool isCapthcaValid = ValidateCaptcha(Request["g-recaptcha-response"]);  
  5: 
  6: try
  7:     {  
  8: if (isCapthcaValid)  
  9:         {  
 10: if (ModelState.IsValid)  
 11:             {  
 12: //dbContext.AddToEmpRegistrations(modelEmpRegistration);
 13: //dbContext.SaveChanges();
 14: 
 15:             }  
 16: return RedirectToAction("Create");  
 17:         }  
 18: else
 19:         {  
 20: return Content("You have put wrong Captcha,Please ensure the authenticity !!!");  
 21:         }  
 22: //return RedirectToAction("Index");
 23:     }  
 24: catch
 25:     {  
 26: return View();  
 27:     }  
 28: }  
 29: 
 30: public static bool ValidateCaptcha(string response)  
 31: {  
 32: //secret that was generated in key value pair
 33: string secret = WebConfigurationManager.AppSettings["recaptchaPrivateKey"];  
 34: 
 35:     var client = new WebClient();  
 36:     var reply =  client.DownloadString(string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secret, response));  
 37: 
 38:     var captchaResponse = JsonConvert.DeserializeObject<CaptchaResponse>(reply);  
 39: 
 40: return Convert.ToBoolean(captchaResponse.Success);  
 41: 
 42: }  
 43: 

Step 4

Run the application and press F5. It'll open a page as shown in the image below:

Click on “Create New” => It will open a page as depicted below:

Case 1
Fill in the desired details and check the checkbox. Just prefix the I'm not a robot. It will open the popup to select the choice.

If you have provide the correct details it will consider you to be a human and shows the following screen as confirmation.

Click on the Create button and it reaches the code segment and executes the code.

As you can see from the image above it has returned “success” from the server meaning it worked perfectly.
Note: After executing successfully it returns to the create page again. I've used this page for demonstration purposes only.
Case 2
If you don't check the checkbox prefix to the message “I'm not a robot” and press Enter. It goes to the code and verifies the authenticity and it returns false. It means you are not a valid user.


Please find the source code as an attachment.
Integration of Google ReCaptcha with MVC4 Application - Running Application.
I hope it will help to resolve your issue.

Thanks.

Categories: MVC