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

BOOKMYSEAT APPLICATION Angular Js asp.net webapi and sql server 2012 : part one

BOOKMYSEAT APPLICATION AngularJS  Asp.Net Webapi and Sql Server 2012

Here, I’ve thought to write my thoughts about hands-on Angular. This is the first article, which tells you  how to get your hands dirty with AngularJS, ASP.NET WEBAPI and SQL Server BookMySeat Application Tutorials.
This is the technology stack for BookMySeat library Application, as shown below:

I’ve designed a simple BookMySeat Library Application, where you will be familiarized with a few keywords & components, which you may be confronting in coming days. These keywords are shown below in the article-

Component of Angular Description

Module
Modules serve as containers to assist you to organize the code within your AngularJS Application. Modules can contain sub-modules.

$http
$http is an AngularJS Service for reading the data from the remote Servers.

Angular ui.bootstrap
<scriptdata-require="ui-bootstrap@*"data-semver="0.10.0"src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>

Services
Services are a point, where you can put common functionality to an AngularJS Application. For example,  if you would like to share the data with more than one controller then the best way is to promote the data to the Service and then make it available via the Service. Services extend the controllers and make them more globally accessible.

Routes Routing in Angular JS
Routes allow us to determine the ways to navigate to the specific states within our Application. It also allows us to define the configuration options for each specific route, such as which template and controller to use.

View
The view in AngularJS is what exists after AngularJS has compiled and rendered the DOM.

@scope
$scope is essentially the “glue” between the view and controller within an AngularJS Application. It supports two way binding within an Application.

Controller
The controller is to define the methods and properties that the view can bind to and interact with. Controllers should be lightweight and only focus on the view; they’re controlling.

Directive
A directive is an extension of a view in AngularJS, which allows us to create custom, reusable elements. You can also consider the directives as the decorators for your HTML. Directives are used to extend the views and to make these extensions available for use in more than one place.

Route Config
The config block of an AngularJS Application allows for the configuration to be applied before the Application actually runs. This is useful to set up routes, dynamically configuring Services and so on.

Dependency Injection
How can we inject dependency in Angular controller and module? For this sample Application, we have injected $Log,$RouteParams,$modal ,Custom Services and many more.

The Application which we are about to build consists of almost all the defined keywords, mentioned above and the initial look of the application is shown below-

There are a few points which we’ll cover in this Application. To make it complete, you can also reference how this Application will work from this BookMySeat Gif representation,

• The screenshot, shown above, is a sample form for BookMySeat Application .You can book your seat for the specific slot. You can cancel your seat also from the given slot.
• In the same way, we’ll try to integrate UI-bootstrap (modal Popup) to show which seat is booked by the user.
• We will focus on Custom Directive and Custom Service.
• Usage of $http to call to WebApi to populate the data on HTML page.
• Usage of dependency injection at the various levels, Load partial templates to MVC view page.
• There can be some various add ons, which you can do at your level after the completion of this Application like Email notification after booking the seat, cancel the seat, booking slot information and responsive Application .
• The structure of the BookMySeat Application is given below-
  
  The basic life cycle of Angular app is given below-
  

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

Categories: AngularJS , SQL Server , WCF and WebAPI