ASP.NET MVC , மாடல், வியூ, கண்ட் ரோலர் ஆட் செய்வது எவ்வாறு?

Model என்பது ஆப்ஜெக்டுகளையும் டேட்டாவையும் என்கேப்சுலேட் செய்கின்றது. இது பிஸினஸ் லாஜிக்கைக் கொண்டுள்ளது.

Views என்பது யூசர் இன்டெர்ஃபேசை தருகின்றது. உதாரணமாக ஃபார்ம் , டேபிள் போன்றவை.

Controllers என்பது யூசர் ஆக்சன்களுட்சன் இன்டெராக்ட் செய்கின்றது. யூசரிடமிமிருந்து இன்புட்டை பெற்று தேவைப்பட்டால்  மாடலுடன் தொடர்பு கொண்டு டேட்டாக்களை பெற்று வியூவிற்கு அனுப்புகின்றது வியூ ஆனது டேட்டாவை காட்சி படுத்துகின்றது.


Controller

கன்ட் ரோலெர் ஆனது mvc –யின் அடிப்ப்டை உறுப்பாகும். இந்த கிளாஸ் ஆனது System.Web.Mvc என்ற நேம்பேசில் உள்ளது. கன்ட் ரோலர் எவ்வாறு உருவாக்குவது என்று பார்ப்போம்.

படி-1

விசுவல் ஸ்டுடியோவை ஓபன் செய்து “New Project “ என்பதை கிளிக் செய்யவும்.

படி2.

பின் வரும் டையலாக் பாக்சில் இடது புறம் installed templates என்பதில் visual c# என்பதை விரிவு செய்து பின் web என்பதை விரிவு செய்து பிறகு visual studio 2012 என்பதை கிளிக் செய்யவும். வலது புறம் ASP.NET MVC 4 WEB APPLICATION என்பதை தேர்வு செய்யவும்.

படி 3

Project templates என்பதில் Empty என்பதை தேர்வு செய்யவும். View engine என்பதில் razor என்பதை தேர்வு செய்யவும்.

படி 4

விசுவல் ஸ்டுடியோ ஆனது குறைந்த பட்ச மாடல், வியூ, கண்ட்ரோலர்களுடன் தோற்றமளிக்கின்றது.

படி 5

Mvc யை பொருத்த வரை நேமிங்க் கன்வென்சனை பின்பற்ற வேண்டியது அவசியம். உதாரணமாக ஒவ்வொரு கண்ட் ரோலருடைய பெயரும் controller என் முடிவடைய வேண்டும். மேலும் ஒவ்வொரு கண்ட் ரோலரும் controllers என்ற ஃபோல்டருக்குள் இருக்க வேண்டும்.

புதிதாக கன்ட் ரோலர் உருவாக்குவதற்கு contriollers டைரக்டரியை வலது கிளிக் செய்து Add-> controller என்பதை தேர்வு செய்யவும்.

படி 6

கண்ட் ரோலருகு HomeController என பெயரிடவும் . scaffolding option template என்பதில் Empty MVC controller என்பதை தேர்வு செய்யவும்.

சொலூசன் எக்ஸ்ப்ளோரரில் APP_Start என்றொரு டரக்டரியில் RouteConfig  என்றொரு கிளாஸ் இருக்கும் இது தான் டிஃபால்ட் ரூட் கான்பிக்ரேசனை வழங்குகின்றது.

RegisterRoute என்ற ஸ்டேட்டிக் மெத்தட் இருக்கும் அது கீழ் கானும் தகவல்களைக் கொண்டுள்ள்து.

IgnoreRoute,MapRpoute என இரு பிராப்பர்ட்டி இருக்கும்..இதில் MapRoute-ல் பின் வருமாறு இருக்கும்.
 

     Name:route பெயர்.

• URL: அட்ரஸ்பாரில் பயனர் எழுத வேண்டிய url –ஐ குறிக்கின்றது
• Defaults: இது டிஃபால்ட் ரௌட்டிங்க் காண்பிக்ரேசனை குறிக்கின்றது.
• Controller: இது டி ஃபால்ட் ஆக Home என இருக்கும். முதலில் அப்ளிகேசன் இயங்கும் பொழுது அது HomeController என்பதை தேடும்.
•  Action: இது டிஃபால்ட் ஆக்சன் மெத்தடைக் குறிக்குல், இது டிஃபால்ட் ஆக HomeController என்பதில் உள்ள Index என்பதைக் குறிக்கும்.
• Id: இது பராமீட்டர் மதிப்பை குறிக்கும் இது ஆப்சனல் ஆகும்.

படி 7:  HomeController.cs என்ற  file ஓபன் செய்யவும்..

HomeController கிளாஸ் ஆனது Controller என்ற லைப்ரரி கிளாசை இன் ஹெரிட் செய்கின்றது. இந்த லைப்ரரி கிளாஸ் ஆனது System.Web.Mvc –ல் இருக்கின்றது. இந்த கிளாஸ் ஆனது நமக்கு Index என்ற public ஆக்சன் மெத்தடைத் தருகின்றது.இந்த ஆக்சன் மெத்த்ட் என்பது பப்ளிக். கண்ட் ரோலர் உள்ளே உள்ள எல்லா பப்ளிக் மெத்தட்களும் ஆக்சன் மெத்தட் எனப்ப்டுகின்றது.டிஃபால்ட் ஆக இந்த மெத்தட்கள் ActionResult ஆப்ஜெக்டுகளை ரிடர்ன் செய்கின்றன.

1.    using System;  

2.    using System.Collections.Generic;  

3.    using System.Linq;  

4.    using System.Web;  

5.    using System.Web.Mvc;  

6.      

7.    namespace MvcApplication1.Controllers {  

8.        public class HomeController : Controller {  

9.            public ActionResult Index() {  

10.                                   //to display a content, we can use the content method  

11.                                   return Content("This is a content");  

12.                         

13.                                   //file download  

14.                                   return File(Server.MapPath("~/App_Data/ABC.pdf"), contentType: "application/pdf", fileDownloadName: "A.pdf");  

15.                         

16.                                   //to redirect to other action method, use RedirectToAction  

17.                                   return RedirectToAction("GetDetails");  

18.                               }  

19.                               public ActionResult GetDetails() {  

20.                                   return Content("GetDetails");  

21.                               }  

22.                           }  

23.                       } 

ஒரே கிளாஸிற்க்குள் ஒன்றுக்கு மேற்பட்ட மெத்தட் ஆனது ஒரே பெயரில் இருக்கலாம் ஆனால் அதன் சிக்னேச்சர் வேறுபடும். இது மெத்தட் ஓவர் லோடிங்கை குறிக்கும்.

1.    public class HomeController : Controller {  

2.       public string Index() {  

3.          return "IndexOne output";  

4.      

5.       }  

6.       public string Index(string id) {  

7.          return id;  

8.       }  

9.    } 

மேலே உள்ள அப்ளிகேசனை இயக்கினால் பிழை சுட்டப்படும்,

இதை சரி செய்ய ActionName என்ற ஆட்ரிபியூட்டை பயன்படுத்தலாம்.

To overcome this issue, we can use the ActionName attribute ActionName.

1.    public class HomeController : Controller {  

2.       public string Index() {  

3.          return "IndexOne output";  

4.      

5.       }  

6.       [ActionName("Index_Two")]  

7.       public string Index(string id) {  

8.          return "My value " + id;  

9.       }  

10.                       } 

Run the application

இப்பொழுது பயன்பாட்டை இயக்கினால் HomeController என்பதில் உள்ள index மெத்தட் இயங்கும்.



ஆக்சன் நேம் “Tndex_Two” என்பது இரண்டாவது index மெத்தடின் (id என்ற பாராமீட்டருடன் கூடிய)பெயரைக் குறிக்கின்றது.

The ActionName “Index_Two” will be treated as the action method name of the second Index(int id) method.

எனவே லோக்கல் ஹொஸ்டிற்க்கு பிறகு /Home/Index_Two/Index two output என டைப் செய்து எண்டர் பட்டனைத் தட்டவும்.

Press Enter.


Models

·       மாடல் ஆனது ஒரு கிளாஸ் ஃபைலாகும். இது சிம்பிள் அல்லது சிக்கலான டேட்டா டைப்பை கொண்டுள்ளது.

·       மாடல் ஆனது என்டைட்டிஸ் அல்லது பிஸினஸ் ஆப்ஜெக்டுகளாக இருக்கலாம்.

·       கண்ட் ரோலர் ஆனது url-ரிக்வ்வெஸ்ட் வரும் பொழுது மாடலுடன் தொடர்பு கொள்ளும். பிறகு மாடலிடமிருந்து டேட்டாவை பெற்றுஅதை  வியூவிற்க்கு அனுப்பும்.வியூ ஆனது டேட்டாவை காட்சிபடுத்தும்

DEMO on how to add a Model

ஒரு மாடலை எவ்வாறு ஆட் செய்வது?

Step 1

Open Visual Studio -> select New Project -> expand Installed templates -> expand visual C# -> expand web -> select Visual Studio as template -> select ASP.NET MVC 4 web application as a project ->பிராகெக்ட் பெயரை குறிப்பிட்டு ok பட்டனை கிளிக் செய்யவும்..



படி 2

பின் வரும் டையலாக் பாக்சில் Empty என்ற டெம்ப்லேட்டையும் வியூ எஞ்சின் ஆக Razor என்பதையும் தேர்வு செய்யவும்.

Click OK

படி 3

மாடல் ஆட் செய்ய models டைரக்டரியை வலது கிளிக் செய்து Add->class என்பதை செலெக்ட் செய்யவும்.

அதற்கு பொருத்தமான பெயரிடவும். இங்கு students என வைத்துள்ளேன்.



பின் Add பட்டனை கிளிக் செய்யவும்

Step 4

பின் வருமாறு கோட் எழுதவும்.

1.    public class Students {  

2.        public int StudentId { get; set; }  

3.        public string Name { get; set; }  

4.        public double TotalMarks { get; set; }  

5.    } 

Note

குறிப்பு:

இந்த கிளாசிற்க்குள் இருப்பது ஆட்டோ இம்ப்ளிமெண்டட பிராப்பர்ட்டிகளை தவிர வேறில்லை..

இப்பொழுது மாடல் உருவாக்கி விட்டோம்.

ரியல் டைமில் டேட்டாவை மாடலை பயன்படுத்தி டேட்டாபேசில் இருந்து பெறுவோம். இங்கு அதை ஹார்ட்கோட் செய்து இருக்கின்றோம்.



Step 5

சொல்யூசன் எக்ஸ்புளோரரில் கன்ட்ரொலேர் டைரக்டரியை வலது கிளிக் செய்து Add->controller என தேர்வு செய்து அதற்கு பெயராக homeController என வைக்கவும்.

 scaffolding template என்பதில் Empty MVC controller என்பதை செலெக்ட் செய்யவும்

 Add என்பதை கிளிக் செய்யவும்..

Step 6

இங்கு HomeController என்ற கண்ட் ரோலரில் இண்டெக்ஸ் மெத்தடில் Students கிளாசிற்கு ஆப்ஜெக்ட் உருவாக்க்கி அதை தொடக்க மதிப்பிருத்தவும்.  மாடல் ஆனது ModelsDemo.Models என்ற நேம்ஸ்பேசில் உள்ளது. ஆனால் controllers ஆனது ModelDemo.Controllers என்ற நேம்ஸ்பேசில் உள்ளது.எனவே using ModelsDemo.Models;  என்பதை இம்போர்ட் செய்ய வேண்டும்.

  using ModelsDemo.Models;  

1.    using System.Web.Mvc;  

  

2.    namespace ModelsDemo.Controllers {  

3.        public class HomeController : Controller {  

4.            public ActionResult Index() {  

5.                Students student = new Students() {  

6.                    StudentId = 2,  

7.                    Name = "Max Payne",  

8.                    TotalMarks = 450.5  

9.                };  

10.                                   return View(student);//pass the object student to the view  

11.                               }  

12.                           }  

13.                       } 

Views
வியூஸ் ஆனது HTML file அன்றி வேறொன்றும் இல்லை.

இது டேட்டாவை காட்சி படுத்த பயன்படுகின்றது. சுருக்கமாக சொல்வதென்றால் பிரவுசரில் நாம் காண்பது தான் வியூ


Step 7

வியூ உருவாக்க கண்ட் ரோலரில் உள்ள index மெத்தடை வலது கிளிக் செய்து ஆட் வியூ என்பதை செலெக்ட் செய்யவும்.

வியூவின் பெயரும் ஆக்சன் மெத்தடின் பெயரும் ஒன்றாக இருக்க வேண்டும்.

வியூ எஞ்சின் ஆனது Razor(CSHTML) ஆக இருக்க வேண்டும்.

 "Create a strongly-typed view"  என்ற செக்பாக்சை செக் செய்து மாடல் பெயராக Students என்பதை தேர்ந்தெடுக்கவும்.


Note

இந்த மாடல் ஆனது லிஸ்டில் இல்லாவிட்டால் பிராஜெக்டை கம்பைல் செய்து கொள்ளவும் இதற்குf6 என்ற பட்டனை அழுத்தலாம்.




 strongly typed view என்பதை செலெக்ட் செய்ததன் காரணம் பிழை விட்டால் கம்பைல் டைமிலேயே சுட்டப்படும். மேலும் இன்டெல்லிசென்ஸ் ஹெல்ப் கிடைக்கும்.

 Step 8

இப்பொழுது கீழ் காணுமாறு நிரல் view-லெழுதவும்

1.    @model ModelsDemo.Models.Students  

2.      

3.    @{  

4.        ViewBag.Title = "Index";  

5.    }  

6.      

7.    <h2>Index</h2>  

8.    <table>  

9.        <tr>  

10.                               <td><b>Student Id - </b></td>  

11.                               <td></td>  

12.                           </tr>  

13.                         

14.                           <tr>  

15.                               <td><b>Student Name - </b></td>  

16.                               <td></td>  

17.                           </tr>  

18.                         

19.                           <tr>  

20.                               <td><b>Student Marks - </b></td>  

21.                               <td></td>  

22.                           </tr>  

23.                       </table> 

இப்பொழுது நம்மிடம் லேஅவுட் உள்ளது. ஆனால் students ரிக்கார்ட்களை எவ்வாறு பெறுவதில்  கன்ட் ரோலரில் உள்ள ஆகசன் மெத்தடில் Student  ஆப்ஜெக்டை ரிடர்ன் செய்கின்றோம்.எனவே இந்த வியூவிற்கான மாடல் Students ஆகும்

Html –க்கும் சி ஷார்ப்பிற்க்கும் மாறிக் கொள்ள @ Symbol பயன்படுத்தவும்.
               <tr>  

1.       <td><b>Student Id - </b></td>  

2.       <td>@Model.</td>  

3.    </tr> 

View codes

1.    @model ModelsDemo.Models.Students  

2.      

3.    @{  

4.        ViewBag.Title = "Index";  

5.    }  

6.      

7.    <h2>Index</h2>  

8.    <table>  

9.        <tr>  

10.                               <td><b>Student Id - </b></td>  

11.                               <td>@Model.StudentId</td>  

12.                           </tr>  

13.                         

14.                           <tr>  

15.                               <td><b>Student Name - </b></td>  

16.                               <td>@Model.Name</td>  

17.                           </tr>  

18.                         

19.                           <tr>  

20.                               <td><b>Student Marks - </b></td>  

21.                               <td>@Model.TotalMarks</td>  

22.                           </tr>  

23.                       </table> 

இப்பொழுது அப்ளிகேசனை பில்ட் செய்து இயக்கவும். கீழ் காணும் வெளியீடு இருக்கும்.

நன்றி.

முத்து கார்த்திகேயன்,மதுரை.