54854 aplikasi crud untuk biodata dengan mvc 2 vb.net
Biodata ba 'kamo?
end term requirement in elective 4
23FEB2014CRUD (Create, Update, Delete) Operations +
Searching in MVC 2 (VB)
posted in biodata, CRUD, MVC, searching, VB by joannamarielm
This article describes how to perform basic CRUD (Create, Update, Delete) operations + Searching in an MVC 2 application using Entity Framework 4.
The purpose of this tutorial is to give a sense of “what it is like” to build an ASP.NET MVC application. In this tutorial, we’ll show you how to build a simple database-driven application that illustrates how you can list, create, delete, and edit database records. But first, let’s have a short introduction about MVC and Entity Framework.
I. MVC
Model: is an object representing data or even activity, e.g. a database table or even some plant-floor production-machine process.
View: is some form of visualization of the state of the model. Controller: offers facilities to change the state of the model.
To implement MVC in .NET we need mainly three classes (View, Controller and the Model). II. ENTITY FRAMEWORK
Let’s have a look at the standard definition of Entity Framework given by Microsoft:
“The Microsoft ADO.NET Entity Framework is an Object/Relational Mapping (ORM) framework that enables developers to work with relational data as domain-specific objects, eliminating the need for most of the data access plumbing code that developers usually need to write. Using the Entity
Framework, developers issue queries using LINQ, then retrieve and manipulate data as strongly typed objects. The Entity Framework’s ORM implementation provides services like change tracking, identity resolution, lazy loading, and query translation so that developers can focus on their application-specific business logic rather than the data access fundamentals.”
In simple terms, Entity Framework is an Object/Relational Mapping (ORM) framework. It is an enhancement to ADO.NET, an upper layer to ADO.Net that gives developers an automated mechanism for accessing and storing the data in the database.
(2)
III. OVERVIEW OF THE BIODATA DATABASE APPLICATION
Because our goal is to keep things simple, we’ll build a very simple Biodata Database application. Our simple Biodata Database application will allow us to do three things:
List a set of biodata database records Create a new biodata database record Edit an existing biodata database record Delete an existing biodata database record Search for an existing biodata database record Viewing of Biodata
In order to create our application, we need to complete each of the following steps: Create the ASP.NET MVC Web Application Project
Create the database
Create the database model
Create the ASP.NET MVC controller Create the ASP.NET MVC views IV. PRELIMINARIES
Microsoft Visual Studio 2010
SQL Server Management Studio Express
V. CRUD (Create, Update, Delete) Operations + Searching in MVC 2 (VB)
Creating a New ASP.NET MVC 2 WEB APPLICATION
Let’s start by creating a new ASP.NET MVC 2 Web Application project in Visual Studio 2010. Select the menu option File, New Project and you will see the New Project dialog box. Select Visual Basic as the programming language and select the ASP.NET MVC Web Application project template. Give your project the name BiodataSampleApplication and click the OK buDon.(3)
(hDp://joannamarielm.files.wordpress.com/2014/02/3.jpg)
Whenever you create a new MVC 2 Web Application project, Visual Studio prompts you to create a separate unit test project. The dialog below appears. Because we won’t be creating tests in this tutorial, select the No option and click the OK buDon.
(hDp://joannamarielm.files.wordpress.com/2014/02/4.jpg)
An ASP.NET MVC application has a standard set of folders: a Models, Views, and Controllers folder. You can see this standard set of folders in the Solution Explorer window. We’ll need to add files to each of the Models, Views, and Controllers folders in order to build our Biodata Database application.
When you create a new MVC application with Visual Studio, you get a sample application. Because we want to start from scratch, we need to delete the content for this sample application. You need to delete the following file and the following folder:
Controllers\HomeController.vb Controllers\AccountController.vb Models\AccountModels.vb
Views\Home Views\Account
(4)
Creating the Database
We need to create a database to hold our database records. So we need to open our SQL Server Management Studio Express.
First, we need to connect to our Server. Enter your Server Name, select Windows Authentication, and click Connect.
(hDp://joannamarielm.files.wordpress.com/2014/02/11.jpg) Follow these steps to create the database and the table:
Right-click on the Databases and select New Database. 1.
Enter the database name and click OK. 2.
Double click on the created database, right click on the Tables and choose New Table. 3.
Enter the fields below. 4.
(5)
(hDp://joannamarielm.files.wordpress.com/2014/02/aaa.jpg)
The first column, the Id column, has two special properties. First, you need to mark the Id column as the primary key column. After selecting the Id column, click the Set Primary Key buDon (it is the icon that looks like a key). Second, you need to mark the Id column as an Identity column. In the Column Properties window, scroll down to the Identity Specification section and expand it. Change the Is Identity property to the value Yes. When you are finished, the table should look like the one above. The final step is to save the new table. Click the Save buDon (the icon of the floppy) and give the new table the name BioTB.
After you finish creating the table, add some records to the table. Right-click the BioTB table in the Server Explorer window and select the menu option Open Table and enter some records.
(hDp://joannamarielm.files.wordpress.com/2014/02/2.jpg)
Creating the Model
We next need to create a set of classes to represent our database. We need to create a database model. We’ll take advantage of the Microsoft Entity Framework to generate the classes for our database model automatically.
(6)
Follow these steps to launch the Entity Data Model Wizard:
Right-click the Models folder in the Solution Explorer window and the select the menu option Add, New Item.
1.
Select the Data category and select the ADO.NET Entity Data Model template. 2.
Give your data model the name BioDBModel.edmx and click the Add buDon. 3.
(hDp://joannamarielm.files.wordpress.com/2014/02/7.jpg)
(7)
(hDp://joannamarielm.files.wordpress.com/2014/02/8.jpg)
Click on the New Connection and select Microsoft SQL Server from the list.
(hDp://joannamarielm.files.wordpress.com/2014/02/9.jpg)
(8)
(hDp://joannamarielm.files.wordpress.com/2014/02/10.jpg) Follow these steps to complete the wizard:
In the Choose Model Contents step, select the Generate from database option. 1.
Type the name BioEntities for the connection seDings. Click the Next buDon. 2.
In the Choose Your Database Objects step, expand the Tables node, select the BioTB table. Enter the namespace BioModel.Models and click the Finish buDon.
3.
(9)
After you complete the Entity Data Model Wizard, the Entity Data Model Designer opens. The Designer should display the BioTB database table.
(hDp://joannamarielm.files.wordpress.com/2014/02/13.jpg)
Creating the Controller
The next step is to create the ASP.NET MVC controller. A controller is responsible for controlling how a user interacts with an ASP.NET MVC application.
Follow these steps:
In the Solution Explorer window, right-click the Controllers folder and select the menu option Add, Controller.
1.
In the Add Controller dialog, enter the name HomeController and check the checkbox labeled Add action methods for Create, Update, and Details scenarios.
2.
Click the Add buDon to add the new controller to your project. 3.
(10)
(hDp://joannamarielm.files.wordpress.com/2014/02/14.jpg)
After you complete these steps, the controller is created. Notice that it contains methods named Index, Details, Create, and Edit. In the following sections, we’ll add the necessary code to get these methods to work.
Listing Database Records
The Index() method of the Home controller is the default method for an ASP.NET MVC 2 application. When you run an ASP.NET MVC 2 application, the Index() method is the first controller method that is called.
We’ll use the Index() method to display the list of records from the BioTB database table. We’ll take advantage of the database model classes that we created earlier to retrieve the movie database records with the Index() method.
I’ve modified the HomeController class so that it contains a new private field named _db. The BioEntities class represents our database model and we’ll use this class to communicate with our database.
I’ve also modified the Index() method. The Index() method uses the BioEntities class to retrieve all of the movie records from the Movies database table. The expression _db.BioTBs.ToList() returns a list of all of the records from the database table.
The list of records is passed to the view. Anything that gets passed to the View() method gets passed to the view as view data.
Controllers/HomeController.vb (modified Index() method)
The Index() method returns a view named Index. We need to create this view to display the list of movie database records. Follow these steps:
You should build your project (select the menu option Build, Build Solution) before opening the Add View dialog or no classes will appear in the View data class dropdown list.
Right-click the Index() method in the code editor and select the menu option Add View. 1.
In the Add View dialog, verify that the checkbox labeled Create a strongly-typed view is checked. 2.
From the View content dropdown list, select the value List. 3.
From the View data class dropdown list, select the value BiodataSampleApplication.BioTB. 4.
1 2 3 4 5 6 7 8
Public Class HomeController
Inherits System.Web.Mvc.Controller Private _db As New BioEntities()
'
' GET: /Home
Function Index(ByVal searchString As String) As ActionResult Return View(_db.BioTBs.ToList())
(11)
Click the Add buDon to create the new view. 5.
(hDp://joannamarielm.files.wordpress.com/2014/02/15.jpg)
(hDp://joannamarielm.files.wordpress.com/2014/02/16.jpg)
After you complete these steps, a new view named Index.aspx is added to the Views\Home folder. The Index view displays all of the records from the database table within an HTML table. The view contains a For Each loop that iterates through each movie represented by the ViewData.Model property. If you run your application by hiDing the F5 key, then you’ll see the web page like the one
(12)
below. Since we have many fields, the table extends outside the main body portion of our project.
(hDp://joannamarielm.files.wordpress.com/2014/02/17.jpg)
To solve this, I modified the Index.aspx and deleted some of the fields. Don’t worry because deleting them from Index.aspx won’t delete them from the database. In order to view the whole record of each person, I added a View link that redirects to another page which displays all the information of each record. I also added a Upload Photo link.
(13)
Creating New Database Records
The Index view that we created in the previous section includes a link for creating new database records.
The Home controller contains two methods named Create(). I used the code below for validation, so that if you tried to create an empty record, a validation message is shown.
Controllers/HomeController.vb (modified Create() method)
And then follow the following steps:
Right-click the Create() method in the code editor and select the menu option Add View. 1.
Verify that the checkbox labeled Create a strongly-typed view is checked. 2.
From the View content dropdown list, select the value Create. 3.
From the View data class dropdown list, select the value BiodataSampleApplication.BioTB. 4.
Click the Add buDon to create the new view. 5.
1 2
If stud.bname.Trim().Length = 0 Then
ModelState.AddModelError("bname", "Name is required.")
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 '
' GET: /Home/Create
Function Create() As ActionResult Return View()
End Function
'
' POST: /Home/Create</pre>
<HttpPost()> _
Function Create(<Bind(Exclude:="id")> ByVal bio As BioTB) As ActionResult Try
If bio.bname.Trim().Length = 0 Then
ModelState.AddModelError("bname", "Name is required.") Return View(bio) Else _db.AddToBioTBs(bio) _db.SaveChanges() Return RedirectToAction("Index") End If Catch
ModelState.AddModelError("bname", "Name is required.") Return View(bio)
(14)
(hDp://joannamarielm.files.wordpress.com/2014/02/23.jpg)
The HTML form generated by the Add View dialog generates an Id form field. Because the Id column is an Identity column, we don’t need this form field and you can safely remove it.
After you add the Create view, you can add new records to the database. Press the F5 key and click the Create New link to see the create form. If you complete and submit the form, a new database record is created.
(15)
(hDp://joannamarielm.files.wordpress.com/2014/02/27.jpg)
Editing Existing Database Records
First, we need to generate the Edit form. This step is easy since Visual Studio will generate the Edit form for us automatically. Open the HomeController.vb class in the Visual Studio code editor and follow these steps:
Right-click the Edit() method in the code editor and select the menu option Add View. 1.
Check the checkbox labeled Create a strongly-typed view. 2.
From the View content dropdown list, select the value Edit. 3.
From the View data class dropdown list, select the value BiodataSampleApplication.BioTB. 4.
Click the Add buDon to create the new view. 5.
Completing these steps adds a new view named Edit.aspx to the Views\Home folder. This view contains an HTML form for editing a record.
(16)
(hDp://joannamarielm.files.wordpress.com/2014/02/28.jpg)
The Edit view contains an HTML form field that corresponds to the Movie Id property. Because you don’t want people editing the value of the Id property, you should remove this form field.
Controllers/HomeController.vb (modified Edit() method)
The first Edit() method returns the database record that corresponds to the Id parameter passed to the method. The second overload performs the updates to a record in the database.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
'
' GET: /Home/Edit/5
Function Edit(ByVal id As Integer) As ActionResult
Dim bio As BioTB = _db.BioTBs.Single(Function(a) a.id = id) Return View(bio)
End Function
'
' POST: /Home/Edit/5
<HttpPost()> _
Function Edit(ByVal id As Integer, ByVal collection As FormCollection) As Act Dim bio As BioTB = _db.BioTBs.Single(Function(a) a.id = id)
UpdateModel(bio) _db.SaveChanges()
Return RedirectToAction("Index") End Function
(17)
(hDp://joannamarielm.files.wordpress.com/2014/02/311.jpg)
(18)
(hDp://joannamarielm.files.wordpress.com/2014/02/331.jpg)
Deleting Existing Database Record
First, we need to generate the Delete form. This step is easy since Visual Studio will also generate the Delete form for us automatically. Open the HomeController.vb class in the Visual Studio code editor and follow the following steps:
Right-click the Delete() method in the code editor and select the menu option Add View. 1.
Check the checkbox labeled Create a strongly-typed view. 2.
From the View content dropdown list, select the value Delete. 3.
From the View data class dropdown list, select the value BiodataSampleApplication.BioTB. 4.
Click the Add buDon to create the new view. 5.
(hDp://joannamarielm.files.wordpress.com/2014/02/29.jpg)
By clicking the Add buDon, Delete.aspx is created. You can modify your Delete View based on what you want it to be.
(19)
When you click the Delete link, a confirmation appears. Clicking the Delete buDon, the record will be deleted.
(hDp://joannamarielm.files.wordpress.com/2014/02/27.jpg)
(hDp://joannamarielm.files.wordpress.com/2014/02/36.jpg) 1
2 3 4 5 6 7 8 9
</pre>
<h2>Delete</h2>
<h3>Are you sure you want to delete <%=Model.bname %>?</h3> <pre><% Using Html.BeginForm() %>
<input type="submit" value="Delete" /> |
<%: Html.ActionLink("Back to List", "Index") %> <% End Using %>
(20)
(hDp://joannamarielm.files.wordpress.com/2014/02/41.jpg)
Searching a Record
I added a textbox and a submit buDon just below the Create link on the Index.aspx:
And this is the modified Index() method: 1
2 3 4
<%Using Html.BeginForm("Index","Home",FormMethod.Get)%> Search by name: <%=Html.TextBox("searchString")%> <input type="submit" value="search" />
<%End Using%>
1 2 3 4 5 6 7
Private _db As New BioEntities()
'
' GET: /Home
Function Index(ByVal searchString As String) As ActionResult
Return View(_db.BioTBs.Where(Function(a) a.bname.StartsWith(searchString) Or End Function
(21)
(hDp://joannamarielm.files.wordpress.com/2014/02/43.jpg)
(hDp://joannamarielm.files.wordpress.com/2014/02/44.jpg)
Adding a Photo
I added a new method under the HomeController:
Follow the following steps:
Right-click the Upload() method in the code editor and select the menu option Add View. 1.
Check the checkbox labeled Create a strongly-typed view. From the View content dropdown list, select the value Details.
From the View data class dropdown list, select the value BiodataSampleApplication.BioTB. Click the Add buDon to create the new view.
1 2 3 4
Function Upload(ByVal id As Integer) As ActionResult
Dim biophoto As BioTB = _db.BioTBs.Single(Function(a) a.id = id) Return View(biophoto)
(22)
(hDp://joannamarielm.files.wordpress.com/2014/02/37.jpg) This will create another view named Upload. I modified the code and this is my final code:
And since Upload.aspx redirects to UploadPhoto, this is the code for the UploadPhoto in the HomeController.
1 2 3 4 5 6 7
Upload Photo</pre>
<h3>Name: <%: Model.bname %></h3> <h3>Current Photo:</h3>
<img alt="<%: Model.bname %>" src="../../Images/<%: Model.pic %>" width="100px <form action="/Home/UploadPhoto?id=<%: Model.id %>" enctype="multipart/form-dat
<input type="file" name="FileUpload1" />
<input id="Submit" type="submit" name="Submit" value="Upload" /></form>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
</pre>
Function UploadPhoto() As ActionResult For Each Upload As String In Request.Files
Dim path As String = AppDomain.CurrentDomain.BaseDirectory + "Images/"
Dim filename As String = System.IO.Path.GetFileName(Request.Files(Upload).Fil Request.Files(Upload).SaveAs(System.IO.Path.Combine(path, filename))
Dim dbconn As New SqlClient.SqlConnection("Data Source=JOANNA-PC;Initial Cata Dim comm As New SqlClient.SqlCommand("UPDATE BioTB SET pic='" & filename.ToSt dbconn.Open()
comm.ExecuteNonQuery() dbconn.Close()
Next
Return RedirectToAction("Index") End Function
(23)
(hDp://joannamarielm.files.wordpress.com/2014/02/40.jpg)
(hDp://joannamarielm.files.wordpress.com/2014/02/41.jpg)
Viewing of Biodata
I created a new method in HomeController and named it ViewBio.
Follow the following steps in creating the ViewBio view:
Right-click the ViewBio() method in the code editor and select the menu option Add View. 1.
Check the checkbox labeled Create a strongly-typed view. 2.
From the View content dropdown list, select the value Empty. 3.
1 2 3 4
Function ViewBio(ByVal id As Integer) As ActionResult
Dim biodata As BioTB = _db.BioTBs.Single(Function(a) a.id = id) Return View(biodata)
(24)
From the View data class dropdown list, select the value BiodataSampleApplication.BioTB. 4.
Click the Add buDon to create the new view. 5.
(hDp://joannamarielm.files.wordpress.com/2014/02/20.jpg)
To make it more presentable, I downloaded a template (Curriculum Vitae Template since I had trouble finding Biodata Template), and modified it. Credits to the owner of the CSS template. Sorry, I forgot which site I got it from.
(25)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 Biodata
<meta name="viewport" content="width=device-width" /> <meta name="description" content="Biodata" />
<meta charset="UTF-8" />
<link href="../../Content/style.css" rel="stylesheet" type="text/css" <link href="http://fonts.googleapis.com/css?family=Rokkitt:400 (http:/
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></pre>
<div class="instaFade" id="cv"> <div class="mainDetails">
<div class="quickFade" id="headshot"><img alt="<%= Model.bname %>" src="../../ <div id="name">
<h1 class="quickFade delayTwo"><%=Model.bname %></h1> </div>
<div class="quickFade delayFour" id="contactDetails"> <ul>
<ul> <ul>
<li>email address: <%=model.emailadd %></li> </ul> </ul> </ul> <ul> <ul> <ul>
<li>mobile number: +63<%=Model.mobileno %></li> </ul>
</ul> </ul> </div>
<div class="clear"></div> </div>
<div class="quickFade delayFive" id="mainArea"> <section>
<article>
<div class="sectionTitle"> <h1>Personal Information</h1> </div>
<div class="sectionContent">Age: <%=Model.age %> Gender: <%=Model.gender %> Da </article>
(26)
Since the template gets its css style from a different css file, we will create another css file by right-clicking on the Content folder and adding a New Item. Select Style Sheet and name it style.css then click OK.
Paste the following code and save: 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 </section> <section>
<div class="sectionTitle"> <h1>Educational Background</h1> </div>
<div class="sectionContent"> <article>
<h2>Elementary</h2>
<%=Model.elem_yr%> School Name: <%=Model.elem_name %> School Address: <%=Model <article>
<h2>High School</h2>
<%=Model.hs_yr %> School Name: Luciano Millan National High School School Addr <article>
<h2>College</h2>
<%=Model.coll_yr %> School Name: <%=Model.coll_name%> School Address: <%=Model <div class="clear"></div>
</section></div> </div>
<pre><script type="text/javascript">// <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl. (http // ]]></script>
<script type="text/javascript">// <![CDATA[
var pageTracker = _gat._getTracker("UA-3753241-1"); pageTracker._initData(); // ]]></script>
(27)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,addr border:0; font:inherit; font-size:100%; margin:0; padding:0; vertical-align:baseline; } article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section display:block; }
html, body {background: #181818; font-family: 'Lato', helvetica, arial,
sans-.clear {clear: both;} p { font-size: 1em; line-height: 1.4em; margin-bottom: 20px; color: #444; } #cv { width: 90%; max-width: 800px; background: #f3f3f3; margin: 30px auto; }
.mainDetails {
padding: 25px 35px;
border-bottom: 2px solid #cf8a05; background: #ededed;
}
#name h1 {
font-size: 2.5em; font-weight: 700;
font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
margin-bottom: -6px; }
#name h2 {
font-size: 2em; margin-left: 2px;
font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
}
#mainArea {
padding: 0 40px; } #headshot { width: 12.5%; float: left; margin-right: 30px; }
(28)
60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118
#headshot img {
width: 100%; height: auto; -webkit-border-radius: 50px; border-radius: 50px; } #name { float: left; } #contactDetails { float: right; }
#contactDetails ul {
list-style-type: none; font-size: 0.9em; margin-top: 2px; }
#contactDetails ul li {
margin-bottom: 3px; color: #444;
}
#contactDetails ul li a, a[href^=tel] {
color: #444;
text-decoration: none;
-webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; -o-transition: all .3s ease-in; -ms-transition: all .3s ease-in; transition: all .3s ease-in; }
#contactDetails ul li a:hover {
color: #cf8a05; }
section {
border-top: 1px solid #dedede; padding: 20px 0 0;
}
section:first-child { border-top: 0;
}
section:last-child { padding: 20px 0 10px; } .sectionTitle { float: left; width: 25%; } .sectionContent {
(29)
119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 float: right; width: 72.5%; }
.sectionTitle h1 {
font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
font-style: italic; font-size: 1.5em; color: #cf8a05; }
.sectionContent h2 {
font-family: 'Rokkitt', Helvetica, Arial, sans-serif;
font-size: 1.5em; margin-bottom: -2px; } .subDetails { font-size: 0.8em; font-style: italic; margin-bottom: 3px; } .keySkills { list-style-type: none; -moz-column-count:3; -webkit-column-count:3; column-count:3; margin-bottom: 20px; font-size: 1em; color: #444; }
.keySkills ul li { margin-bottom: 3px; }
@media all and (min-width: 602px) and (max-width: 800px) {
#headshot { display: none; } .keySkills { -moz-column-count:2; -webkit-column-count:2; column-count:2; } }
@media all and (max-width: 601px) {
#cv {
width: 95%;
margin: 10px auto; min-width: 280px; }
#headshot {
display: none; }
(30)
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236
#name, #contactDetails {
float: none; width: 100%;
text-align: center; }
.sectionTitle, .sectionContent { float: none; width: 100%; } .sectionTitle { margin-left: -2px; font-size: 1.25em; } .keySkills { -moz-column-count:2; -webkit-column-count:2; column-count:2; } }
@media all and (max-width: 480px) { .mainDetails {
padding: 15px 15px; }
section {
padding: 15px 0 0; }
#mainArea {
padding: 0 25px; } .keySkills { -moz-column-count:1; -webkit-column-count:1; column-count:1; }
#name h1 {
line-height: .8em; margin-bottom: 4px; }
}
@media print {
#cv {
width: 100%; }
}
@-webkit-keyframes reset { 0% {
opacity: 0; }
(31)
237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 opacity: 0; } }
@-webkit-keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
@-moz-keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } }
@keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } .instaFade {
(32)
Now the view will look like this: 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351
-webkit-animation-name: reset, fade-in; -webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in; -moz-animation-name: reset, fade-in;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: ease-in; animation-name: reset, fade-in;
animation-duration: 1.5s;
animation-timing-function: ease-in; }
.quickFade {
-webkit-animation-name: reset, fade-in; -webkit-animation-duration: 2.5s;
-webkit-animation-timing-function: ease-in; -moz-animation-name: reset, fade-in;
-moz-animation-duration: 2.5s;
-moz-animation-timing-function: ease-in; animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in; }
.delayOne {
-webkit-animation-delay: 0, .5s; -moz-animation-delay: 0, .5s; animation-delay: 0, .5s; }
.delayTwo {
-webkit-animation-delay: 0, 1s; -moz-animation-delay: 0, 1s; animation-delay: 0, 1s; }
.delayThree {
-webkit-animation-delay: 0, 1.5s; -moz-animation-delay: 0, 1.5s; animation-delay: 0, 1.5s; }
.delayFour {
-webkit-animation-delay: 0, 2s; -moz-animation-delay: 0, 2s; animation-delay: 0, 2s; }
.delayFive {
-webkit-animation-delay: 0, 2.5s; -moz-animation-delay: 0, 2.5s; animation-delay: 0, 2.5s; }
(33)
(hDp://joannamarielm.files.wordpress.com/2014/02/42.jpg)
(hDp://joannamarielm.files.wordpress.com/2014/02/22.jpg) Conclusion
In this tutorial we learned to set up an environment for MVC 2 and Entity Framework 4 and perform CRUD operations + searching. You can expand the application by adding multiple Controllers, Models and Views.
You can download the finished project at: BiodataSampleApplication (hDps://app.box.com /s/r5oo5hjrcbhrucx7Nms)
(34)
Happy Coding!
crud
Leave a commentBiodata ba ʹkamo?
(1)
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177
width: 72.5%; }
.sectionTitle h1 {
font-family: 'Rokkitt', Helvetica, Arial, sans-serif; font-style: italic;
font-size: 1.5em; color: #cf8a05; }
.sectionContent h2 {
font-family: 'Rokkitt', Helvetica, Arial, sans-serif; font-size: 1.5em;
margin-bottom: -2px; }
.subDetails { font-size: 0.8em; font-style: italic; margin-bottom: 3px; }
.keySkills {
list-style-type: none; -moz-column-count:3; -webkit-column-count:3; column-count:3;
margin-bottom: 20px; font-size: 1em; color: #444; }
.keySkills ul li { margin-bottom: 3px; }
@media all and (min-width: 602px) and (max-width: 800px) { #headshot {
display: none; }
.keySkills {
-moz-column-count:2; -webkit-column-count:2; column-count:2;
} }
@media all and (max-width: 601px) { #cv {
width: 95%;
margin: 10px auto; min-width: 280px; }
#headshot { display: none; }
(2)
178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236
#name, #contactDetails { float: none;
width: 100%;
text-align: center; }
.sectionTitle, .sectionContent { float: none;
width: 100%; }
.sectionTitle { margin-left: -2px; font-size: 1.25em; }
.keySkills {
-moz-column-count:2; -webkit-column-count:2; column-count:2;
} }
@media all and (max-width: 480px) { .mainDetails {
padding: 15px 15px; }
section {
padding: 15px 0 0; }
#mainArea { padding: 0 25px; }
.keySkills {
-moz-column-count:1; -webkit-column-count:1; column-count:1;
}
#name h1 {
line-height: .8em; margin-bottom: 4px; }
}
@media print { #cv {
width: 100%; }
}
@-webkit-keyframes reset { 0% {
opacity: 0; }
(3)
238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 } }
@-webkit-keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
@-moz-keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } }
@keyframes reset { 0% { opacity: 0; } 100% { opacity: 0; } }
@keyframes fade-in { 0% { opacity: 0; } 40% { opacity: 0; } 100% { opacity: 1; } } .instaFade {
(4)
Now the view will look like this: 296
297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351
-webkit-animation-name: reset, fade-in; -webkit-animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in; -moz-animation-name: reset, fade-in;
-moz-animation-duration: 1.5s;
-moz-animation-timing-function: ease-in; animation-name: reset, fade-in;
animation-duration: 1.5s;
animation-timing-function: ease-in; }
.quickFade {
-webkit-animation-name: reset, fade-in; -webkit-animation-duration: 2.5s;
-webkit-animation-timing-function: ease-in; -moz-animation-name: reset, fade-in;
-moz-animation-duration: 2.5s;
-moz-animation-timing-function: ease-in; animation-name: reset, fade-in;
animation-duration: 2.5s;
animation-timing-function: ease-in; }
.delayOne {
-webkit-animation-delay: 0, .5s; -moz-animation-delay: 0, .5s; animation-delay: 0, .5s; }
.delayTwo {
-webkit-animation-delay: 0, 1s; -moz-animation-delay: 0, 1s; animation-delay: 0, 1s; }
.delayThree {
-webkit-animation-delay: 0, 1.5s; -moz-animation-delay: 0, 1.5s; animation-delay: 0, 1.5s; }
.delayFour {
-webkit-animation-delay: 0, 2s; -moz-animation-delay: 0, 2s; animation-delay: 0, 2s; }
.delayFive {
-webkit-animation-delay: 0, 2.5s; -moz-animation-delay: 0, 2.5s; animation-delay: 0, 2.5s; }
(5)
(hDp://joannamarielm.files.wordpress.com/2014/02/22.jpg) Conclusion
In this tutorial we learned to set up an environment for MVC 2 and Entity Framework 4 and perform CRUD operations + searching. You can expand the application by adding multiple Controllers, Models and Views.
You can download the finished project at: BiodataSampleApplication (hDps://app.box.com /s/r5oo5hjrcbhrucx7Nms)
(6)
Happy Coding!
crud
Leave a commentBiodata ba ʹkamo?