Development Using MVC: Web Developer Newsletter
Development Using MVC: Web Developer Newsletter
Password
Sign in
Join
Lost password?
Home
Articles
Quick Answers
Discussions
Zones
Features
Community
Help!
Search site
See Also
More like this More by this author
Overview
ASP.NET provides the MVC framework as an alternate to the ASP.NET Web Forms pattern for developing web applications. MVC (Model-View-Controller) is a lightweight, highly testable presentation framework that is integrated with the existing ASP.NET features such as Master Pages and Membership-based authentication.
Related Articles
A Simple Tutorial on Developing ASP.NET Applications in MVC Pattern Developing and Unit Testing an ASP.NET MVC 2 Application Developing Well-Designed ASP.NET MVC Applications with S#arp Lite BDD using SpecFlow on ASP.NET MVC Application Development of web application using MVC II design pattern or why following MVC II will help me Event C alendar for an ASP.NET MVC Application Implement secure ASP.NET MVC applications Developing Facebook C onnect Application using ASP.NET Using MVC to Unit Test WPF Applications N-Tier development with ASP.NET MVC , WC F, and LINQ Introduction to ASP.NET MVC 3 C reating a Bilingual ASP.NET MVC 3 Application Part I Webpart/Portlet development in ASP.NET MVC Framework Routing a Localized ASP.NET MVC Application C reating a Bilingual ASP.NET MVC 3 Application Part 2 ASP.NET MVC Application in Action - I (DailyJournal) How To Improve the Performance of ASP.NET MVC Web Application Actions in ASP.NET MVC 3 MVC Based ASP.NET Application with Dependency Injection MVC Bricks for ASP.net
Introduction
The S s e . e . v namespace is for ASP.NET MVC. MVC is a standard Design Pattern. ytmWbMc MVC has the following components: Controller Classes that handle incoming requests to the application, retrieve model data, and then specify view templates that return a response to the client. Model Classes that represent the data of the application and that use validation logic to enforce business rules for that data. View Template files that your application uses to dynamically generate HTML responses.
Background
In this demonstration, I will design a database using SQL Server Management Studio 2005. I will develop an ASP.NET MVC application and will describe all of its parts.
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
1/20
Figure 1
1. Open Microsoft Visual Studio 2010 2. Create a new project (File> New> Project> Visual C#): ASP.NET MVC 3 Web Application 3. Named it ASPNETMVCApplication 4. Click on the OK button
Figure 2
1. 2. 3. 4.
Select a template for Internet Application View engine to Razor Create a unit test project to uncheck Click on the OK button
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
2/20
Figure 3
The default project will be created. Now Add Library Package Reference. We will use a .NET Framework data-access technology known as the Entity Framework. The Entity Framework (often referred to as EF) supports a development paradigm called code-first. Code-first allows you to create model objects by writing simple classes. You can then have the database created on the fly from your classes, which enables a very clean and rapid development workflow. We'll start by using the NuGet package manager (automatically installed by ASP.NET MVC 3) to add the EFCodeFirst library to the ASPNETMVCApplication project. This library lets us use the code-first approach. To add Entity Framework reference: From the Tools menu, select Library Package Manager and then Add Library Package Reference.
Figure 4
Figure 5
Figure 6
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
4/20
Figure 7
Click on I Accept. Entity Framework will install and will add a reference to the project.
Figure 8
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
5/20
Figure 9
Adding a Model Class 1. 2. 3. 4. Right click on Models from Solution Explorer Select Add Select Class Name it Book.cs
Figure 10
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
6/20
Figure 11
nmsaeAPEMCplcto.oes aepc SNTVApiainMdl { pbi casBo ulc ls ok { pbi It4I {gt st } ulc n6 d e; e; pbi Srn Tte{gt st } ulc tig il e; e; pbi Srn IB {gt st } ulc tig SN e; e; pbi DcmlPie{gt st } ulc eia rc e; e; } }
Add another class the way you did for Book.cs and name it BookDBContext.cs. Add a S s e . a a E t t namespace reference in the BookDBContext.cs file. ytmDt.niy
C ollapse | C opy C ode
uigSse.aaEtt; sn ytmDt.niy
Add the following code in the B o D C n e tclass. And derive it from the D C n e t okBotx botx class so that all data operations can be handled by the B o sproperty. ok Note: The property name B o smust be the same as the database table name Books. ok Here is the complete code:
C ollapse | C opy C ode
uigSse; sn ytm uigSse.e; sn ytmWb uigSse.aaEtt; sn ytmDt.niy nmsaeAPEMCplcto.oes aepc SNTVApiainMdl { pbi casBoDCnetDCnet ulc ls okBotx:botx { pbi DStBo>Bos{gt st } ulc be<ok ok e; e; } }
Add a connection string in the web.config file. Remember, the connection string name must be the same as B o D C n e t okBotx.
C ollapse | C opy C ode
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
7/20
<oncintig> cnetoSrns <d nm=BoDCnet ad ae"okBotx" cnetoSrn=dt suc=oeP; oncintig"aa oreHm-C uds;w=24IiilCtlgIvnoy i=apd13;nta aao=netr" poieNm=Sse.aaSllet / rvdrae"ytmDt.qCin" > <cnetoSrns /oncintig>
Adding the Controller 1. 2. 3. 4. 5. Right click on Controller from Solution Explorer Select Add Select Controller Name it BookController Add action methods for Create, Update, Delete, and Details scenarios to Checked
Figure 12
Figure 13
nmsaeAPEMCplcto.otolr aepc SNTVApiainCnrles { pbi casBoCnrle :Cnrle ulc ls okotolr otolr { / / / GT /ok / E: Bo/ pbi AtoRsl Idx) ulc cineut ne( { rtr Ve(; eun iw) } / / / GT /okDtis5 / E: Bo/eal/
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
8/20
pbi AtoRsl Dtisiti) ulc cineut eal(n d { rtr Ve(; eun iw) } / / / GT /okCet / E: Bo/rae pbi AtoRsl Cet( ulc cineut rae) { rtr Ve(; eun iw) } / / / PS:/okCet / OT Bo/rae [tpot HtPs] pbi AtoRsl Cet(omolcincleto) ulc cineut raeFrCleto olcin { ty r { / TD:Adisr lgchr / OO d net oi ee rtr RdrcTAto(Idx) eun eietocin"ne"; } cth ac { rtr Ve(; eun iw) } } / / / GT /okEi/ / E: Bo/dt5 pbi AtoRsl Ei(n i) ulc cineut dtit d { rtr Ve(; eun iw) } / / / PS:/okEi/ / OT Bo/dt5 [tpot HtPs] pbi AtoRsl Ei(n i,FrCleto cleto) ulc cineut dtit d omolcin olcin { ty r { / TD:Adudt lgchr / OO d pae oi ee rtr RdrcTAto(Idx) eun eietocin"ne"; } cth ac { rtr Ve(; eun iw) } } / / / GT /okDlt/ / E: Bo/eee5 pbi AtoRsl Dlt(n i) ulc cineut eeeit d { rtr Ve(; eun iw) } / / / PS:/okDlt/ / OT Bo/eee5 [tpot HtPs] pbi AtoRsl Dlt(n i,FrCleto cleto) ulc cineut eeeit d omolcin olcin { ty r { / TD:Addlt lgchr / OO d eee oi ee
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
9/20
Declare a global instance variable of the B o D C n e tclass in the B o C n r l e okBotx okotolr class.
C ollapse | C opy C ode
pbi AtoRsl Idx) ulc cineut ne( { vrbos=fo bo i _bBos a ok rm ok n d.ok slc bo; eet ok rtr Ve(ok.oit); eun iwbosTLs() }
This is the LINQ code for getting books and b o s T L s ( to display the book list in the ok.oit) View. Now right click on Solution and select Build to build the solution. Adding the View 1. 2. 3. 4. 5. 6. Right click in the Index method Select View Create a strongly-typed view to Checked Select Model class to Book (ASPNETMVCApplication.Models) Scaffold template to List Click on the OK button
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
10/20
Figure 14
@oe InmrbeAPEMCplcto.oesBo> mdl Eueal<SNTVApiainMdl.ok @ { VeBgTte="ne" iwa.il Idx; } <2Idx/2 h>ne<h> <> p @tlAtoLn(Cet Nw,"rae) Hm.cinik"rae e" Cet" <p /> <al> tbe <r t> <h<t> t>/h <h t> Tte il <t> /h <h t> IB SN <t> /h <h t> Pie rc <t> /h <t> /r @oec (a ie i Mdl { frah vr tm n oe) <r t> <d t> @tlAtoLn(Ei" "dt,nw{i=tmI } | Hm.cinik"dt, Ei" e die.d ) @tlAtoLn(Dtis,"eal" nw{i=tmI } | Hm.cinik"eal" Dtis, e die.d ) @tlAtoLn(Dlt" "eee,nw{i=tmI } Hm.cinik"eee, Dlt" e die.d ) <t> /d <d t> @tmTte ie.il <t> /d <d t> @tmIB ie.SN www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC 11/20
<t> /d <d t> @tigFra({:},ie.rc) Srn.omt"0F" tmPie <t> /d <t> /r } <tbe /al>
Now, add the Create View. Adding the Create View 1. 2. 3. 4. 5. 6. Right click on the Create method Select View Create a strongly-typed view to Checked Select Model class to Book (ASPNETMVCApplication.Models) Scaffold template to Create Click on the OK button
@oe APEMCplcto.oesBo mdl SNTVApiainMdl.ok @ { VeBgTte="rae; iwa.il Cet" } <2Cet<h>srp sc"UlCnet"/cit/qeyvldt.i.s) h>rae/2<cit [email protected](~Srpsjur.aiaemnj"" tp=tx/aacit>/cit<cit ye"etjvsrp"<srp>srp sc"UlCnet"/cit/qeyvldt.nbrsv.i.s) [email protected](~Srpsjur.aiaeuotuiemnj"" tp=tx/aacit>/cit@sn (tlBgnom) { ye"etjvsrp"<srp>uig Hm.eiFr() @tlVldtoSmaytu) Hm.aiainumr(re <ilst fede> <eedBo<lgn>dvcas"dtrlbl> lgn>ok/eed<i ls=eio-ae" @tlLblo(oe = mdlTte Hm.aeFrmdl > oe.il) <dv /i> <i cas"dtrfed> dv ls=eio-il" @tlEioFrmdl= mdlTte Hm.dtro(oe > oe.il) @tlVldtoMsaeo(oe = mdlTte Hm.aiainesgFrmdl > oe.il) <dv /i> <i cas"dtrlbl> dv ls=eio-ae" @tlLblo(oe = mdlIB) Hm.aeFrmdl > oe.SN <dv /i> <i cas"dtrfed> dv ls=eio-il" @tlEioFrmdl= Hm.dtro(oe >
Now add the following code in the C e t method in the B o C n r l e class. rae okotolr
C ollapse | C opy C ode
[tpot HtPs] pbi AtoRsl Cet(omolcincleto) ulc cineut raeFrCleto olcin { ty r { Bo bo =nwBo(; ok ok e ok) i (oeSaeIVld f Mdltt.sai) { bo.il =cleto[Tte]TSrn(; okTte olcin"il".otig) bo.SN=cleto[IB".otig) okIB olcin"SN]TSrn(; bo.rc =CnetTDcmlcleto[Pie]; okPie ovr.oeia(olcin"rc") _bBosAdbo) d.ok.d(ok; _bSvCags) d.aehne(; rtr RdrcTAto(Idx) eun eietocin"ne"; } es le { rtr Ve(ok; eun iwbo) } } www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC 12/20
Now we will add the Edit View. Adding the Edit View 1. 2. 3. 4. 5. 6. Right click on the Edit method Select View Create a strongly-typed view to Checked Select Model class to Book (ASPNETMVCApplication.Models) Scaffold template to Edit Click on the OK button
Figure 15
@oe APEMCplcto.oesBo mdl SNTVApiainMdl.ok @ { VeBgTte="dt; iwa.il Ei" } <2Ei<h>srp sc"UlCnet"/cit/qeyvldt.i.s) h>dt/2<cit [email protected](~Srpsjur.aiaemnj"" tp=tx/aacit>/cit<cit ye"etjvsrp"<srp>srp sc"UlCnet"/cit/qeyvldt.nbrsv.i.s) [email protected](~Srpsjur.aiaeuotuiemnj"" tp=tx/aacit>/cit@sn (tlBgnom) { ye"etjvsrp"<srp>uig Hm.eiFr() @tlVldtoSmaytu) Hm.aiainumr(re <ilst fede> <eedBo<lgn>Hm.idno(oe = mdlI) lgn>ok/eed@tlHdeFrmdl > oe.d <i cas"dtrlbl> dv ls=eio-ae" @tlLblo(oe = mdlTte Hm.aeFrmdl > oe.il) <dv /i> <i cas"dtrfed> dv ls=eio-il" @tlEioFrmdl= mdlTte Hm.dtro(oe > oe.il) www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC 13/20
@tlVldtoMsaeo(oe = mdlTte Hm.aiainesgFrmdl > oe.il) <dv /i> <i cas"dtrlbl> dv ls=eio-ae" @tlLblo(oe = mdlIB) Hm.aeFrmdl > oe.SN <dv /i> <i cas"dtrfed> dv ls=eio-il" @tlEioFrmdl= Hm.dtro(oe >
Now add the following code in the E i method in the B o C n r l e class. dt okotolr
C ollapse | C opy C ode
pbi AtoRsl Ei(n i) ulc cineut dtit d { Bo bo =_bBosFn(d; ok ok d.ok.idi) i (ok= nl) f bo = ul rtr RdrcTAto(Idx) eun eietocin"ne"; rtr Ve(ok; eun iwbo) } [tpot HtPs] pbi AtoRsl Ei(n i,FrCleto cleto) ulc cineut dtit d omolcin olcin { ty r { vrbo =_bBosFn(d; a ok d.ok.idi) UdtMdlbo) paeoe(ok; _bSvCags) d.aehne(; rtr RdrcTAto(Idx) eun eietocin"ne"; } cth ac { Mdltt.dMdlro(" "dtFiue seinrecpin) oeSaeAdoeErr", Ei alr, e ne xeto"; rtr Ve(; eun iw) } }
Now we will add the Details View. Adding the Details View 1. 2. 3. 4. 5. 6. Right click on the Edit method Select View Create a strongly-typed view to Checked Select Model class to Book (ASPNETMVCApplication.Models) Scaffold template to Details Click on the OK button
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
14/20
Figure 16
@oe APEMCplcto.oesBo mdl SNTVApiainMdl.ok @ { VeBgTte="eal" iwa.il Dtis; } <2Dtis/2<ilst h>eal<h>fede> <eedBo<lgn>dvcas"ipa-ae"Tte/i> lgn>ok/eed<i ls=dslylbl>il<dv <i cas"ipa-il"@oe.il<dv dv ls=dslyfed>MdlTte/i> <i cas"ipa-ae"IB<dv dv ls=dslylbl>SN/i> <i cas"ipa-il"@oe.SN/i> dv ls=dslyfed>MdlIB<dv <i cas"ipa-ae"Pie/i> dv ls=dslylbl>rc<dv <i cas"ipa-il"@tigFra({:},MdlPie<dv dv ls=dslyfed>Srn.omt"0F" oe.rc)/i> <fede> /ilst <> p @tlAtoLn(Ei" "dt,nw{i=oe.d} | Hm.cinik"dt, Ei" e dMdlI ) @tlAtoLn(Bc t Ls" "ne" Hm.cinik"ak o it, Idx) <p />
Add the following code to the D t i smethod of the B o C n r l e class. eal okotolr
C ollapse | C opy C ode
pbi AtoRsl Dtisiti) ulc cineut eal(n d { Bo bo =_bBosFn(d; ok ok d.ok.idi) i (ok= nl) f bo = ul rtr RdrcTAto(Idx) eun eietocin"ne"; rtr Ve(Dtis,bo) eun iw"eal" ok; }
Now we will add the Delete View. Adding the Delete View
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC 15/20
1. 2. 3. 4. 5. 6.
Right click on the Edit method Select View Create a strongly-typed view to Checked Select Model class to Book (ASPNETMVCApplication.Models) Scaffold template to Delete Click on the OK button
Figure 17
@oe APEMCplcto.oesBo mdl SNTVApiainMdl.ok @ { VeBgTte="eee; iwa.il Dlt" } <2Dlt<h>h>r yusr yuwn t dlt ti?/3<ilst h>eee/2<3Ae o ue o at o eee hs<h>fede> <eedBo<lgn>dvcas"ipa-ae"Tte/i> lgn>ok/eed<i ls=dslylbl>il<dv <i cas"ipa-il"@oe.il<dv dv ls=dslyfed>MdlTte/i> <i cas"ipa-ae"IB<dv dv ls=dslylbl>SN/i> <i cas"ipa-il"@oe.SN/i> dv ls=dslyfed>MdlIB<dv <i cas"ipa-ae"Pie/i> dv ls=dslylbl>rc<dv <i cas"ipa-il"@tigFra({:},MdlPie<dv dv ls=dslyfed>Srn.omt"0F" oe.rc)/i> <fede> /ilst @sn (tlBgnom) { uig Hm.eiFr() <> p <nu tp=sbi"vle"eee / | ipt ye"umt au=Dlt" > @tlAtoLn(Bc t Ls" "ne" Hm.cinik"ak o it, Idx) <p /> }
Add the following code to the D l t method in the B o C n r l e class. eee okotolr
C ollapse | C opy C ode
pbi AtoRsl Dlt(n i) ulc cineut eeeit d { Bo bo =_bBosFn(d; ok ok d.ok.idi) i (ok= nl) f bo = ul rtr RdrcTAto(Idx) eun eietocin"ne"; www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC 16/20
rtr Ve(ok; eun iwbo) } [tpot HtPs] pbi AtoRsl Dlt(n i,FrCleto cleto) ulc cineut eeeit d omolcin olcin { Bo bo =_bBosFn(d; ok ok d.ok.idi) _bBosRmv(ok; d.ok.eoebo) _bSvCags) d.aehne(; rtr RdrcTAto(Idx) eun eietocin"ne"; }
Now run the application. Type /Book in the URL and remember that the port number may be different in your case.
Figure 17
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
17/20
Figure 18
Figure 19
This way you can edit, delete, and view details of the books.
Conclusion
This article will help you create your own robust ASP.NET MVC application. Thank you!
License
This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
18/20
I have been developing software/web application since 2002 mainly on Microsoft technologies. I am a MCSD and MCTS. I have developed a wide range of Web, Desktop and Mobile applications. I am vast experience with Telerik technologies. I am also experience with other technologies. I am very much fan of Object Oriented Architectural Framework(Design & Pattern) and well organized effective coding.
Mamun Bhai, khub bhalo likshen, dakha khub bhalo lagloo. Thanks Md. Marufuzzaman I will not say I have failed 1000 times; I will say that I have discovered 1000 ways that can cause failure Thomas Edison.
Sign In View Thread Permalink Re: Excellent Abdul Quader Mamun 2:55 30 Jun '12
Keep it up Thanks Md. Marufuzzaman I will not say I have failed 1000 times; I will say that I have discovered 1000 ways that can cause failure Thomas Edison.
Sign In View Thread Permalink very useful Rajalingam22 23:50 25 Jun '12
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
19/20
Hi Friend, your article is very useful to MVC begginers. Thank you very much..
Sign In View Thread Permalink Error Jos Rafael Giraldo Tenorio 11:19 1 Mar '11
pbi AtoRsl Idx) ulc cineut ne( { vrvrirs=fo lboi cnet.irs a aLbo rm ir n otxoLbo slc lbo eet ir; rtr Ve(aLbo.oit);/ Hr aieteerr! eun iwvrirsTLs() / ee rs h ro!! }
This is spanish: 'Books == Libros' and 'Book == Libro' I don't know why appear the 'es' chars. Thanks for your help!!! Rafael
Sign In View Thread Permalink [My vote of 1] nothing new Seishin# 21:31 24 Feb '11
nicely written
Sign In View Thread Permalink Re: My vote of 5 Abdul Quader Mamun 13:47 23 Feb '11
P ermalink | A dvertis e | P rivac y | M obile L ayout: fixed | A rtic le C opyright 2 0 1 1 by A bdul Q uader M amun Web0 2 | 2 .5 .1 2 0 7 3 0 .1 | L as t U pdated 2 3 Feb 2 0 1 1 fluid E verything els e C opyright C odeP rojec t, 1 9 9 9 - 2 0 1 2 T erms of U s e
www.codeproject.com/Articles/161402/ASP-NET-Application-Development-Using-MVC
20/20