{"id":89,"date":"2018-04-10T00:03:00","date_gmt":"2018-04-09T22:03:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/2018\/04\/10\/restful-web-services-tutorial-8-using-entity-framework-with-mvc-database-first\/"},"modified":"2020-08-22T08:55:55","modified_gmt":"2020-08-22T06:55:55","slug":"restful-web-services-tutorial-8-using-entity-framework-with-mvc-database-first","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/restful-web-services-tutorial-8-using-entity-framework-with-mvc-database-first\/","title":{"rendered":"RESTful Web Services Tutorial 8: Using Entity Framework With MVC &#8211; Database First"},"content":{"rendered":"<p>In this lesson we are going to use Entity Framework(EF) with MVC(Model-View-Controller) to carry out select, insert, update and delete operation. We would see the forms and tables generated easily for us, without writing codes.<\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p>Believe me, this is would be the easiest lesson so far in this series! I personally could not believe it when I saw it work like magic!<\/p>\n<p>Let&#8217;s do this!<\/p>\n<p><ins style=\"display: block; text-align: center;\" data-ad-client=\"ca-pub-7041870931346451\" data-ad-format=\"fluid\" data-ad-layout=\"in-article\" data-ad-slot=\"4209786523\"><\/ins><br \/>\n<b>We are going to cover the following:<\/b><\/p>\n<ol>\n<li><a href=\"#t1\">Create an API Web Service using MVC<\/a><\/li>\n<li><a href=\"#t2\">About the MVC Folders <\/a><\/li>\n<li><a href=\"#t3\">Generate the Models<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h3 id=\"t1\">1. Create an Web Application Using Web API Template.<\/h3>\n<p>This is similar to the steps we followed in Tutorial 8 except that if you get to the dialog box in Figure 1, you make sure that Web API is selected<br \/>\nAlso make sure that the boxes for Web API and MVC is selected as shown<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-x7I5qkYKtCU\/WsvsKmjp7dI\/AAAAAAAABtY\/Qdf_FmR3Ctg_AKcX-MM46UB2RUlbni20QCLcBGAs\/s1600\/Tutorial%2B8%2B-%2BFigure%2B1.JPG\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/-x7I5qkYKtCU\/WsvsKmjp7dI\/AAAAAAAABtY\/Qdf_FmR3Ctg_AKcX-MM46UB2RUlbni20QCLcBGAs\/s400\/Tutorial%2B8%2B-%2BFigure%2B1.JPG\" width=\"400\" height=\"298\" border=\"0\" data-original-height=\"575\" data-original-width=\"770\" \/>\u00a0<\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 1: MVC Web API<\/div>\n<p>&nbsp;<\/p>\n<p>After a few seconds,\u00a0 the solution is generated as shown in Figure 2<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/3.bp.blogspot.com\/-F8vIAs1YRgs\/WsvsTqOMGvI\/AAAAAAAABtc\/noeFqNaCQlcXuURHMnl0zzq9tayb_4VlACLcBGAs\/s1600\/Tutorial%2B8%2B-%2BFigure%2B2.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/3.bp.blogspot.com\/-F8vIAs1YRgs\/WsvsTqOMGvI\/AAAAAAAABtc\/noeFqNaCQlcXuURHMnl0zzq9tayb_4VlACLcBGAs\/s640\/Tutorial%2B8%2B-%2BFigure%2B2.jpg\" width=\"640\" height=\"360\" border=\"0\" data-original-height=\"816\" data-original-width=\"1446\" \/><\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 2: Home Page of MVC Application<\/div>\n<p>&nbsp;<\/p>\n<h3 id=\"t2\">2. Learn about the folder structure<\/h3>\n<p>The folder structure for an MVC application always contains the folders: Model, View and Controller<\/p>\n<p><i>Model<\/i>: This folder contains the classes for your entities &#8211; which corresponds to tables in your database.<\/p>\n<p><i>View<\/i>: This Folder would contain subfolders which contains pages for each of entity for your application. For each of the table, there would be a folder. For each folder there would be five cshtml pages:<\/p>\n<ul>\n<li>Create.cshtml<\/li>\n<li>Details.cshtml<\/li>\n<li>Edit.cshtml<\/li>\n<li>Delete.cshtml<\/li>\n<li>Index.cshtml<\/li>\n<\/ul>\n<p><i>Controller<\/i>: This folder contains the controller files for each of the the model (table). The controller file controls how the data from the table is access and displayed on a web page.<\/p>\n<p>For now, these are the three folders you need to understand very clearly. This is because this same concepts is used in MVC architecture for other platforms like Java(using Eclipse IDE or any other IDE)<\/p>\n<p>&nbsp;<\/p>\n<h3 id=\"t3\">3. Generate the Models<\/h3>\n<p>Before you continue with this step, make sure you have create the Employee database in SQL Server.<br \/>\nRight-click on your project and Add new Item.<br \/>\nChoose Data and Select ADO.Net Entity Data Model<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/4.bp.blogspot.com\/-_EzGpmr8nHc\/WsvyoFcKevI\/AAAAAAAABuA\/IYba3uaG_a07NeLiSfHiUihQ5X_oHP9SQCLcBGAs\/s1600\/Tutorial%2B8%2B-%2BAdd%2BNew%2BADO%2BNet%2BEntity%2BData%2BModel.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/4.bp.blogspot.com\/-_EzGpmr8nHc\/WsvyoFcKevI\/AAAAAAAABuA\/IYba3uaG_a07NeLiSfHiUihQ5X_oHP9SQCLcBGAs\/s400\/Tutorial%2B8%2B-%2BAdd%2BNew%2BADO%2BNet%2BEntity%2BData%2BModel.jpg\" width=\"400\" height=\"252\" border=\"0\" data-original-height=\"650\" data-original-width=\"1025\" \/><\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 3: ADO.Net Entity Data Model<\/div>\n<p>&nbsp;<\/p>\n<p>Give it a name and Click Add. The Entity Data Model Wizard is displayed as shown in Figure 3<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/--Jo_aLLytSI\/WsvzUjtj_tI\/AAAAAAAABuI\/0Sjo55Hu0i03etx0oDQj9NeKeMJTRgQ-ACLcBGAs\/s1600\/Tutorial%2B9%2B-%2BEntity%2BData%2BModel%2BWizard.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/--Jo_aLLytSI\/WsvzUjtj_tI\/AAAAAAAABuI\/0Sjo55Hu0i03etx0oDQj9NeKeMJTRgQ-ACLcBGAs\/s400\/Tutorial%2B9%2B-%2BEntity%2BData%2BModel%2BWizard.jpg\" width=\"400\" height=\"365\" border=\"0\" data-original-height=\"551\" data-original-width=\"602\" \/><\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 4: EF Design from Database<\/div>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p>Make sure that the <i>EF Designer From database<\/i> is selected. Click on Next to display the Database Connection definition step.<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-rQ6h0PxSShQ\/Wsv0ZiAT3WI\/AAAAAAAABuU\/BxTFzlhSIE8sd9XO-jw-Uc7fmNggtYxSgCLcBGAs\/s1600\/Choosing%2BData%2BConnections.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/-rQ6h0PxSShQ\/Wsv0ZiAT3WI\/AAAAAAAABuU\/BxTFzlhSIE8sd9XO-jw-Uc7fmNggtYxSgCLcBGAs\/s400\/Choosing%2BData%2BConnections.jpg\" width=\"400\" height=\"365\" border=\"0\" data-original-height=\"551\" data-original-width=\"602\" \/><\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 5:Choose Database Connection<\/div>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p>Click on New Connection and specify the New Connection properties. In Figure 5, the Connection Properties have been defined.<\/p>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-sisCv5ubv5s\/Wsv00Pu8UxI\/AAAAAAAABuY\/r4-USU5LH7AxTSVVYU-qxW12sri61l1KwCLcBGAs\/s1600\/Connection%2BProperties%2BWindow.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/-sisCv5ubv5s\/Wsv00Pu8UxI\/AAAAAAAABuY\/r4-USU5LH7AxTSVVYU-qxW12sri61l1KwCLcBGAs\/s400\/Connection%2BProperties%2BWindow.jpg\" width=\"282\" height=\"400\" border=\"0\" data-original-height=\"630\" data-original-width=\"445\" \/><\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 6:Connection Properties Definition<\/div>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p>After defining the new Connection, Click OK, then Click Next.<br \/>\nClick on Next again. When you get the the last step of the Wizard, Select Tables as shown in Figure 7.<\/p>\n<div style=\"clear: both; text-align: center;\">\u00a0<a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-egFpCfszCXA\/Wsv10esp9lI\/AAAAAAAABuo\/Q-ghWwMUyecwV0fiQPfj362E8_P_iihUgCLcBGAs\/s1600\/Last%2BStep%2Bof%2BEntity%2BData%2BModel%2BDefintion%2B-%2BSelect%2BTables.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/-egFpCfszCXA\/Wsv10esp9lI\/AAAAAAAABuo\/Q-ghWwMUyecwV0fiQPfj362E8_P_iihUgCLcBGAs\/s400\/Last%2BStep%2Bof%2BEntity%2BData%2BModel%2BDefintion%2B-%2BSelect%2BTables.jpg\" width=\"400\" height=\"365\" border=\"0\" data-original-height=\"551\" data-original-width=\"602\" \/><\/a><\/div>\n<div style=\"clear: both; text-align: center;\">Figure 7: Entity Data Model &#8211; Select Table<\/div>\n<p>&nbsp;<\/p>\n<p>Click Finish. The class diagram is generated as shown in Figure 8<\/p>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-Wtyv3keBx1o\/Wsv2z5oQwNI\/AAAAAAAABu0\/bJdb_5OJnU8b-qeyVv4tZ6PPDBlyeIlkQCLcBGAs\/s1600\/Class%2BDiagram.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/2.bp.blogspot.com\/-Wtyv3keBx1o\/Wsv2z5oQwNI\/AAAAAAAABu0\/bJdb_5OJnU8b-qeyVv4tZ6PPDBlyeIlkQCLcBGAs\/s640\/Class%2BDiagram.jpg\" width=\"640\" height=\"364\" border=\"0\" data-original-height=\"663\" data-original-width=\"1161\" \/><\/a><\/div>\n<div style=\"clear: both; text-align: center;\"><b>\u00a0Figure 8:<\/b> Generated Class Diagram<\/div>\n<p>&nbsp;<\/p>\n<p>Examine the Classes generated. Expand the EmployeeModel.edmx to view the classes generated for each of the tables.<\/p>\n<p>&nbsp;<\/p>\n<p><!-- HTML generated using hilite.me --><\/p>\n<pre style=\"line-height: 125%; margin: 0;\">   <span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #008800; font-weight: bold;\">partial<\/span> <span style=\"color: #008800; font-weight: bold;\">class<\/span> <span style=\"color: #bb0066; font-weight: bold;\">Address<\/span>\r\n    {\r\n        <span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #0066bb; font-weight: bold;\">Address<\/span>()\r\n        {\r\n            <span style=\"color: #008800; font-weight: bold;\">this<\/span>.Employees = <span style=\"color: #008800; font-weight: bold;\">new<\/span> HashSet&lt;Employee&gt;();\r\n        }\r\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">int<\/span> Id { <span style=\"color: #008800; font-weight: bold;\">get<\/span>; <span style=\"color: #008800; font-weight: bold;\">set<\/span>; }\r\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">string<\/span> Street { <span style=\"color: #008800; font-weight: bold;\">get<\/span>; <span style=\"color: #008800; font-weight: bold;\">set<\/span>; }\r\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">string<\/span> Number { <span style=\"color: #008800; font-weight: bold;\">get<\/span>; <span style=\"color: #008800; font-weight: bold;\">set<\/span>; }\r\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">string<\/span> City { <span style=\"color: #008800; font-weight: bold;\">get<\/span>; <span style=\"color: #008800; font-weight: bold;\">set<\/span>; }\r\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #333399; font-weight: bold;\">string<\/span> Region { <span style=\"color: #008800; font-weight: bold;\">get<\/span>; <span style=\"color: #008800; font-weight: bold;\">set<\/span>; }\r\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> Nullable&lt;<span style=\"color: #333399; font-weight: bold;\">int<\/span>&gt; CountryId { <span style=\"color: #008800; font-weight: bold;\">get<\/span>; <span style=\"color: #008800; font-weight: bold;\">set<\/span>; }\r\n\r\n<span style=\"color: #008800; font-weight: bold;\">public<\/span> <span style=\"color: #008800; font-weight: bold;\">virtual<\/span> ICollection&lt;Employee&gt; Employees { <span style=\"color: #008800; font-weight: bold;\">get<\/span>; <span style=\"color: #008800; font-weight: bold;\">set<\/span>; }\r\n}\r\n<\/pre>\n<p><b>Listing 1:<\/b> Generated Class Address<\/p>\n<p>&nbsp;<\/p>\n<p>For example, the generated class for the Address table is given in Listing 1. Isn&#8217;t this amazing! All codes written for us. Thanks to Entity Framework!.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this lesson we are going to use Entity Framework(EF) with MVC(Model-View-Controller) to carry out select, insert, update and delete operation. We would see the &hellip; <\/p>\n","protected":false},"author":2,"featured_media":662,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[289],"tags":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/89"}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=89"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/89\/revisions"}],"predecessor-version":[{"id":664,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/89\/revisions\/664"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media\/662"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}