11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

Ready to master latest .NET, JavaScript framework and

Mobile development skills?
Join our training programs and take your career to the next level!
Signup

CRUD Operations using jQuery

Framework and ASP.NET MVC

dialog,

Entity

P o st e dBy :S h aile ndraCh auh an, 17N o v 2 0 12

U pdat e dOn:11Jun2 0 14
Total Views : 125,120
Version Support : MVC5, MVC4 & MVC3
Keywords : insert update delete view in mvc using entity framework jquery dialog,
jquery dialog in mvc razor, Add Edit Delete in webGrid with jquery dialog and entity
framework

his article will demonstrate, how to create an Asp.Net MVC application with CRUD Create, Read,
Update, Delete Operations using jQuery and Entity Framework code first. suppose you have following

data model and DataContext classes in EF.

01. publicclassUser
02. {
03. publicintUserID{get;set;}
04. [Required(ErrorMessage="PleaseEnterYourName")]
05. publicstringName{get;set;}
06. [Required(ErrorMessage="PleaseEnterYourAddress")]
07. publicstringAddress{get;set;}
08. [Required(ErrorMessage="PleaseEnterYourContactNo")]
09. publicstringContactNo{get;set;}
10. }
11.
12. publicclassDataContext:DbContext
13. {
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

1/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

14. publicDataContext()
15. :base("DefaultConnection")
16. {
17.
18. }
19.
20. publicDbSet<User>Users{get;set;}
21. }
Now migrate your data model class into SQL Server database by using EF code first database migration. For
more help refer this link Understanding Entity Framework Code First Migrations

Create Operation

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

2/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

Read Operation

Update Operation
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

3/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

Delete Operation

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

4/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

Making jQuery dialogs for CRUD Operations

01. @modelIEnumerable<jQuery_CRUD.DAL.User>
02. @{
03. ViewBag.Title="Index";
04. }
05. <scriptsrc="~/Scripts/jquery1.8.2.min.js"></script>
06. <scriptsrc="~/Scripts/jqueryui1.8.24.min.js"></script>
07. <linkhref="~/Content/themes/base/jqueryui.css"rel="stylesheet"/>
08. <script>
09. $(document).ready(function(){
10. varurl="";
11. $("#dialogalert").dialog({
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

5/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

12. autoOpen:false,
13. resizable:false,
14. height:170,
15. width:350,
16. show:{effect:'drop',direction:"up"},
17. modal:true,
18. draggable:true,
19. open:function(event,ui){
20. $(".uidialogtitlebarclose").hide();
21. },
22. buttons:{
23. "OK":function(){
24. $(this).dialog("close");
25.
26. },
27. "Cancel":function(){
28. $(this).dialog("close");
29. }
30. }
31. });
32.
33. if('@TempData["msg"]'!=""){
34. $("#dialogalert").dialog('open');
35. }
36.
37. $("#dialogedit").dialog({
38. title:'CreateUser',
39. autoOpen:false,
40. resizable:false,
41. width:400,
42. show:{effect:'drop',direction:"up"},
43. modal:true,
44. draggable:true,
45. open:function(event,ui){
46. $(".uidialogtitlebarclose").hide();
47. $(this).load(url);
48. }
49. });
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

6/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

50.
51. $("#dialogconfirm").dialog({
52. autoOpen:false,
53. resizable:false,
54. height:170,
55. width:350,
56. show:{effect:'drop',direction:"up"},
57. modal:true,
58. draggable:true,
59. open:function(event,ui){
60. $(".uidialogtitlebarclose").hide();
61.
62. },
63. buttons:{
64. "OK":function(){
65. $(this).dialog("close");
66. window.location.href=url;
67. },
68. "Cancel":function(){
69. $(this).dialog("close");
70. }
71. }
72. });
73.
74. $("#dialogdetail").dialog({
75. title:'ViewUser',
76. autoOpen:false,
77. resizable:false,
78. width:400,
79. show:{effect:'drop',direction:"up"},
80. modal:true,
81. draggable:true,
82. open:function(event,ui){
83. $(".uidialogtitlebarclose").hide();
84. $(this).load(url);
85. },
86. buttons:{
87. "Close":function(){
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

7/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

88. $(this).dialog("close");
89. }
90. }
91. });
92.
93. $("#lnkCreate").live("click",function(e){
94. //e.preventDefault();//usethisorreturnfalse
95. url=$(this).attr('href');
96. $("#dialogedit").dialog('open');
97.
98. returnfalse;
99. });
100.
101. $(".lnkEdit").live("click",function(e){
102. //e.preventDefault();usethisorreturnfalse
103. url=$(this).attr('href');
104. $(".uidialogtitle").html("UpdateUser");
105. $("#dialogedit").dialog('open');
106.
107. returnfalse;
108. });
109.
110. $(".lnkDelete").live("click",function(e){
111. //e.preventDefault();usethisorreturnfalse
112. url=$(this).attr('href');
113. $("#dialogconfirm").dialog('open');
114.
115. returnfalse;
116. });
117.
118. $(".lnkDetail").live("click",function(e){
119. //e.preventDefault();usethisorreturnfalse
120. url=$(this).attr('href');
121. $("#dialogdetail").dialog('open');
122.
123. returnfalse;
124. });
125.
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

8/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

126. $("#btncancel").live("click",function(e){
127. $("#dialogedit").dialog("close");
128. returnfalse;
129. });
130. });
131. </script>
132. <divid="dialogalert"style="display:none">
133. <p>
134. @TempData["msg"]!
135. </p>
136. </div>
137.
138. <divid="dialogconfirm"style="display:none">
139. <p>
140. <spanclass="uiiconuiiconalert"style="float:left;margin:07px20px0;">
</span>
141. Areyousuretodelete?
142. </p>
143. </div>
144.
145. <divid="dialogedit"style="display:none">
146. </div>
147. <divid="dialogdetail"style="display:none">
148. </div>
149.
150. <h2>UsersList</h2>
151.
152. <p>
153. @Html.ActionLink("CreateNew","Create",null,new{id="lnkCreate"})
154. </p>
155. <table>
156. <tr>
157. <th>
158. @Html.DisplayNameFor(model=>model.Name)
159. </th>
160. <th>
161. @Html.DisplayNameFor(model=>model.Address)
162. </th>
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

9/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

163. <th>
164. @Html.DisplayNameFor(model=>model.ContactNo)
165. </th>
166. <th></th>
167. </tr>
168.
169. @foreach(variteminModel)
170. {
171. <tr>
172. <td>
173. @Html.DisplayFor(modelItem=>item.Name)
174. </td>
175. <td>
176. @Html.DisplayFor(modelItem=>item.Address)
177. </td>
178. <td>
179. @Html.DisplayFor(modelItem=>item.ContactNo)
180. </td>
181. <td>
182. @Html.ActionLink("Edit", "Edit", new { id = item.UserID }, new { @class =
"lnkEdit"})|
183. @Html.ActionLink("Details","Details",new{id=item.UserID},new{@class=
"lnkDetail"})|
184. @Html.ActionLink("Delete","Delete",new{id=item.UserID},new{@class=
"lnkDelete"})
185. </td>
186. </tr>
187. }
188.
189. </table>

Controller for handling CRUD Operations

01. publicclassUserController:Controller
02. {
03. privateDataContextdb=newDataContext();
04.
05. //GET:/User/
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

10/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

06. publicActionResultIndex()
07. {
08. returnView(db.Users.ToList());
09. }
10.
11. //GET:/User/Details/5
12. publicActionResultDetails(intid=0)
13. {
14. Useruser=db.Users.Find(id);
15. if(user==null)
16. {
17. returnHttpNotFound();
18. }
19. returnView(user);
20. }
21.
22. //GET:/User/Create
23. publicActionResultCreate()
24. {
25. returnPartialView();
26. }
27.
28. //POST:/User/Create
29. [HttpPost]
30. [ValidateAntiForgeryToken]
31. publicActionResultCreate(Useruser,stringCommand)
32. {
33. if(ModelState.IsValid)
34. {
35. db.Users.Add(user);
36. db.SaveChanges();
37. TempData["Msg"]="Datahasbeensavedsucceessfully";
38. returnRedirectToAction("Index");
39. }
40.
41. returnView(user);
42. }
43.
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

11/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

44. //GET:/User/Edit/5
45. publicActionResultEdit(intid=0)
46. {
47. Useruser=db.Users.Find(id);
48. if(user==null)
49. {
50. returnHttpNotFound();
51. }
52. returnView(user);
53. }
54.
55. //POST:/User/Edit/5
56. [HttpPost]
57. [ValidateAntiForgeryToken]
58. publicActionResultEdit(Useruser)
59. {
60. if(ModelState.IsValid)
61. {
62. db.Entry(user).State=EntityState.Modified;
63. db.SaveChanges();
64. TempData["Msg"]="Datahasbeenupdatedsucceessfully";
65. returnRedirectToAction("Index");
66. }
67. returnView(user);
68. }
69.
70. //GET:/User/Delete/5
71. publicActionResultDelete(intid)
72. {
73. Useruser=db.Users.Find(id);
74. db.Users.Remove(user);
75. db.SaveChanges();
76. TempData["Msg"]="Datahasbeendeletedsucceessfully";
77. returnRedirectToAction("Index");
78. }
79.
80. protectedoverridevoidDispose(booldisposing)
81. {
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

12/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

82. db.Dispose();
83. base.Dispose(disposing);
84. }
85. }

What do you think?

I hope you will enjoy these tricks while programming with ASP.NET MVC. I would like to have feedback
from my blog readers. Your valuable feedback, question, or comments about this article are always
welcome.
Download Code

Share this article with your friends!

Share

Tweet

Prev

Share

15

Print

Next

Recommended Articles!
1. Asp.net MVC Request Life Cycle
2. Custom Validation for Cascading Dropdownlist in MVC Razor
3. Server Side Model Validation in MVC Razor
4. Handling multiple submit buttons on the same form MVC Razor
5. How to Enable and Disable ClientSide Validation in MVC
6. Removing the Web Form View Engine for better performance of Razor View Engine
7. Difference Between Razor View Engine and ASPX View Engine
8. Custom Validation for Checkbox in MVC Razor
9. Understading Controllers and Actions in MVC Razor
10. Difference between Asp.Net WebForm and Asp.Net MVC

About the Author

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

13/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

Hey! I'm Shailendra Chauhan author, developer with more than 5 years of hand over Microsoft .NET
technologies. I am a .NET Consultant, founder & chief editor of www.dotnettricks.com and
www.dotnetinterviewtricks.com. I am author of books ASP.NET MVC Interview Questions and
Answers & LINQ Interview Questions and Answers.
I love to work with web applications and mobile apps using Microsoft technology including ASP.NET,
MVC, C#, SQL Server, WCF, Web API, Entity Framework,Cloud Computing, Windows Azure, jQuery,
jQuery Mobile, Knockout.js, Angular.js and many more web technologies. More...

Free .NET Interview Books

ASP.NET MVC Interview Questions and Answers
This book is appropriate for novice as well as for senior level professionals who wants to strengthen their
technical skills before appearing for an interview on MVC.
Download Book

LINQ Interview Questions and Answers

This book is appropriate for novice as well as for senior level professionals who wants to strengthen their
technical skills before appearing for an interview on LINQ.
Download Book

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

14/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

23Comments

DotNetTricks

Login

Share Favorite

SortbyNewest

Jointhediscussion
yasir 22daysago

whatiwilldoifiwanttodeletemultipleobjectforexampledeleteallwheretypeId=4

Reply Share

Ankita 2monthsago

Thankyouforsuchanicearticle..sirimfindingsomeprobleminjquerymodalpopupcode..i
havetakenreferencefromthesourcecodegiveninthepagethanalsocreateandeditpage
arenotdisplayedinsidethemodalpopuptheyaredisplayasthenormalpageduring
runtime...canusuggestwhereimmakingmistake....Thankyousirinadvance..

Reply Share

JoseLuisAlarcn 2monthsago

Thankyouforyourcontribution.
Ihavethesameissuethatmvcstarter.Ihaveusing:
<scriptsrc="~/Scripts/jquery2.1.1.min.js"></script>
<scriptsrc="~/Scripts/jqueryui1.10.4.min.js"></script>
<linkhref="~/Content/themes/base/jqueryui.css"rel="stylesheet"/>
Itrytochange:
$(".lnkEdit").live("click",function(e){
to
$(document).on("click",".lnkEdit",function(e){

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

15/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

$(document).on("click",".lnkEdit",function(e){

ButthewindowthatIcallisshowinthesametab,insteadinapopupwindows.
Couldyouhelpme,please

Reply Share

mvcstarter 5monthsago

itisnotrunningwithlaterjqueryandjqueryui..sowhatchangeshavetobemade
<scriptsrc="/Scripts/jquery1.10.2.js"></script>
<scriptsrc="/Scripts/jqueryui1.10.4.min.js"></script>
<linkhref="/Content/themes/base/jqueryui.css"rel="stylesheet"/>

Reply Share

ShailendraChauhan

DotNetTricks >mvcstarter

5monthsago

Replacelive()methodwithon()method.sinceitisremovedinjquery1.9+.Uselike
this$(document).on("click",".lnkEdit",function(e){})
1

Reply Share

Guest 5monthsago

itisnotrunningwithlaterjqueryandjqueryui..sowhatchangeshavetobemade
<scriptsrc="~/Scripts/jquery1.10.2.min.js"></script>
<scriptsrc="~/Scripts/jqueryui1.10.4.min.js"></script>
<linkhref="~/Content/themes/base/jqueryui.css"rel="stylesheet"/>

Reply Share

ShailendraChauhan

DotNetTricks >Guest

5monthsago

Replacelive()methodwithon()method.sinceitisremovedinjquery1.9+.Uselike
this$(document).on("click",".lnkEdit",function(e){})

Reply Share

SamirDuran 5monthsago

Whichareyourpackageimports???Ican'tgetyourcodeworkinginanewproject.Doyou
usewithNugget,forexample,JQueryUI,JQueryValidation,Knockoutandstufflikethat???

Reply Share

ShailendraChauhan

DotNetTricks >SamirDuran

5monthsago

Youjustrequiredjquery,jQueryUIandEF5+toworkthisexample.Ensureyouhave
jquerylibraryeitheronlayoutpageoronthelistingpage.Ifyouhaveitonlayoutpage,
removeitfromlayoutpage.

Reply Share

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

16/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

cccc 6monthsago

YoursourceisnotworkingwhenIportedittoMVC5

Reply Share

ShailendraChauhan

DotNetTricks >cccc

5monthsago

Youmighthavejquerylibrayreferenceatlayoutpage(atbottom).Removeitfrom
layoutpage.

Reply Share

kumar 6monthsago

yourSourceCodeisnotworking..pleasehelpsir!
1

Reply Share

NaumanUllah 7monthsago

Justviewit..howtoachieveinlineeditingwithjquerywithoutdialogappearance..justlike
kendoUI
1

Reply Share

aruna 7monthsago

itsnotworking

Reply Share

aruna 7monthsago

itsnotworking...

Reply Share

gouthamreddy>aruna 7monthsago

yesitsnotworking..

Reply Share

tanmay 7monthsago

hi,inmycaseoncreatedialogwhenweclickcreateitgoestotheservermethodbutinyour
casethevalidationoccursonUIitdoesn'tgotoservermethodhow?

Reply Share

Tanmay 7monthsago

Hi,ThanksforthewonderfulPost
Myonlyqueryisthe.cshtmlfilewhichuhaveusedforcrudoperationsthatisCreate.cshtml
isvieworPartialview

Reply Share

Jai 7monthsago

Nicestructure,usingjquerymighthelpappperformance,ihavetotryandwonderingitgonna
http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

17/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

Nicestructure,usingjquerymighthelpappperformance,ihavetotryandwonderingitgonna
begood.

Reply Share

GauravSharma 7monthsago

CanWedothisallfunctionalitywithviewandcontroller.withoutusingjquery.
IWantthisfunctionalityonsinglepagewithoutusingjqueryanddialogboxes.

Reply Share

ScottJohnson 8monthsago

ThisisEXACTLYwhatI'vebeenlookingfor.Nicejobthanks!

Reply Share

ScottJohnson 8monthsago

I'mnotsureIfullyunderstandwhatyouaredoinghere:(".lnkDelete").live("click",function(e)
Whatis(e)?

Reply Share

ShailendraChauhan

DotNetTricks >ScottJohnson

8monthsago

eisparameterwhichrepresentsyourlinkclickevent.
1

Reply Share

WHAT'STHIS?

ALSOONDOTNETTRICKS

UnderstandingAttributeRoutingin
ASP.NETMVC

UnderstandingAngularJS$rootScope
and$scope

9comments7monthsago

1comment2monthsago

ShailendraChauhanThiswillbemapped

PleriseiHello.Ienjoyedthequicklesson

inthesameway,sinceeverypublicmethod
inacontrolleristreatedasactionmethod.

thedifferenceandhowtheyfunction
differentlywithininancontrollerandoutside
ofit.Doyouhave

UnderstandingLINQStandardQuery
Operators

UnderstandingAngularJS$watch(),
$digest()and$apply()

2comments4monthsago

2comments2monthsago

mvcstarteriamusingmvc...andfor

MitulGandhiNicearticle...VeryHelpful.

deletingentitycontrollercodeislikepublic

Browse By Category
.Net Framework

ADO.NET

ASP.NET Web Page

Backbone

Ajax
1

2
5

AngularJS
C#

29

12

ASP.NET

15

C# Windows Apps

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

CSS

18/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

Dependency Injection
Hybrid Mobile Apps
Knockout
PhoneGap
WCF

10

WPF

5
1

Design Patterns

Ionic

LINQ

15

SQL Server

Web API

MVC
47

18

Entity Framework

JavaScript

jQuery

MVC 6

Nhibernate

54

SQL Server 2012

Web Service

10

Fluent Nhibernate

jQuery Mobile
1

OOPS

TFS

Visual Studio

Windows Azure

Windows Phone Apps

4
6

Learn In Hindi

Recent Articles

Popular Articles

Enable Ionic Intellisense support in Visual Studio 2013

Understanding AngularJS Routing
Understanding AngularJS Templates
Understanding AngularJS Directive
Understanding AngularJS $rootScope and $scope
Understanding AngularJS Factory, Service and Provider
Understanding AngularJS $watch, $digest and $apply
Understanding Dependency Injection in AngularJS
What is Ionic and Why to use it?
AngularJS CRUD Operations with WebAPI, EF and Bootstrap

Like us on Facebook

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

19/20

11/21/2014

CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC

DotNetTricks
Like

6,030peoplelikeDotNetTricks.

Facebooksocialplugin

Subscribe & follow Us

Enter Your Email Address..
Subscribe!

Disclaimer!
This is my personal blog and having articles on .net and others .net related technologies. The opinions
expressed here are my own and not belongs to my employer or other organization. I have listed my own
learning experience on this blog.

Dot Net Tricks is licensed under a Creative Commons Attribution 4.0 International License
Copyright 20122014.The content is copyright to Shailendra Chauhan and may not be reproduced on
other websites without permission from the owner.

http://www.dotnettricks.com/Tutorial/mvc/42R0171112CRUDOperationsusingjQuerydialog,EntityFrameworkandASP.NETMVC.html

20/20