Tuesday, October 25, 2016

Manipulating and showing data using .NET MVC


Here is sample code for a form in which we can show and pass data in .NET using MVC architecture. This simple example will show you how to place our code in the right way by using Model View Controller architecture. Just copy paste the next code into your project and run it...

using System;  
 using System.ComponentModel.DataAnnotations;  
 using System.Collections.Generic;  
 using System.Web.Mvc;  
 namespace HelloWorldMvcApp  
 {  
      // Data models  
      public class Report  
      {  
           public int ID { get; set; }  
           public string Name { get; set; }  
      }  
      public class FileType  
      {  
           public int ID { get; set; }  
           public string Name { get; set; }  
      }  
      // View models  
      public class CronVM  
      {  
           public int ID { get; set; }  
           [Required(ErrorMessage = "Please select the name")]  
           public string Name { get; set; }  
           [Required(ErrorMessage = "Please select the frequency")]  
           [Display(Name = "Frequency")]  
           public string SelectedFrequency { get; set; }  
           public IEnumerable<SelectListItem> FrequencyList { get; set; }  
           public List<ReportVM> Reports { get; set; }  
           public IEnumerable<FileType> FileTypes { get; set; }  
      }  
      public class ReportVM  
      {  
           public int ID { get; set; }  
           public string Name { get; set; }  
           // Note you would apply a foolproof [RequiredIfTrue("IsSelected")]   
           // or similar attribute to this property  
           public int? SelectedFile { get; set; }  
           public bool IsSelected { get; set; }  
      }  
      public static class Repository  
      {  
           public static List<Report> FetchReports()  
           {  
                return new List<Report>()  
                {  
                     new Report(){ ID = 1, Name = "Report 1" },  
                     new Report(){ ID = 2, Name = "Report 2" },  
                     new Report(){ ID = 3, Name = "Report 3" }  
                };  
           }  
           public static List<FileType> FetchFileTypes()  
           {  
                return new List<FileType>()  
                {  
                     new FileType(){ ID = 1, Name = "File type 1" },  
                     new FileType(){ ID = 2, Name = "File type 2" },  
                };  
           }  
           public static List<string> FetchFrequencies()  
           {  
                return new List<string>(){ "Daily", "Weekly" };  
           }  
      }  
 }  


 using System;  
 using System.Web.Mvc;  
 using System.Collections.Generic;  
 using System.Linq;  
 namespace HelloWorldMvcApp  
 {  
      public class HomeController : Controller  
      {  
           [HttpGet]  
           public ActionResult Index()  
           {  
                var reports = Repository.FetchReports();  
                var fileTypes = Repository.FetchFileTypes();  
                var frequencies = Repository.FetchFrequencies();  
                var model = new CronVM()  
                {  
                     FileTypes = fileTypes,  
                     FrequencyList = new SelectList(frequencies),  
                     Reports = reports.Select(x => new ReportVM()  
                     {  
                          ID = x.ID,  
                          Name = x.Name,                           
                     }).ToList()  
                };  
                return View(model);  
           }  
           [HttpPost]  
           public ActionResult Index(CronVM model)  
           {  
                var selected = model.Reports.Where(x => x.IsSelected).Select(x => x.Name);  
                var message = string.Format("You selected reportss {0}", String.Join(" and ", selected));  
                return Content(message);  
           }  
      }  
  } 


 @model HelloWorldMvcApp.CronVM  
 @{  
      Layout = null;  
 }  
 <!DOCTYPE html>  
 <!-- template from http://getbootstrap.com/getting-started -->  
 <html lang="en">  
      <head>  
           <meta charset="utf-8">  
           <meta http-equiv="X-UA-Compatible" content="IE=edge">  
           <meta name="viewport" content="width=device-width, initial-scale=1">  
           <title>Bootstrap 101 Template</title>  
           <!-- CSS Includes -->  
           <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">  
           <style type="text/css">  
                .field-validation-error {  
                     color: #ff0000;  
                }  
                table {  
                     width: 100%;  
                }  
                td {  
                     padding: 2px 0;  
                }  
                td:first-child {  
                     width: 25px;  
                }  
                td:last-child {  
                     width: 150px;  
                }  
           </style>  
      </head>  
      <body>  
           <div class="container">  
                <div class="col-md-6 col-md-offset-3">  
                     <h1>Hello Big Bang Code</h1>  
                     @using (Html.BeginForm())  
                     {  
                          <div class="form-group">  
                               @Html.LabelFor(m => m.Name)  
                               @Html.TextBoxFor(m => m.Name, new { @class="form-control" })   
                               @Html.ValidationMessageFor(m => m.Name)  
                          </div>  
                          <div class="form-group">  
                               @Html.LabelFor(m => m.SelectedFrequency)  
                               @Html.DropDownListFor(m => m.SelectedFrequency, Model.FrequencyList, "-Please select-", new { @class="form-control" })   
                               @Html.ValidationMessageFor(m => m.SelectedFrequency)  
                          </div>  
                          <table>  
                               @for (int i = 0; i < Model.Reports.Count; i++)  
                               {  
                                    <tr>  
                                         <td>  
                                              @Html.HiddenFor(m => m.Reports[i].ID)  
                                              @Html.HiddenFor(m => m.Reports[i].Name)  
                                              @Html.CheckBoxFor(m => m.Reports[i].IsSelected)  
                                         </td>  
                                         <td>@Model.Reports[i].Name</td>  
                                         <td>  
                                              @Html.DropDownListFor(m => m.Reports[i].SelectedFile, new SelectList(Model.FileTypes, "ID", "Name"), "-Please select-", new { @class="form-control" })  
                                              @Html.ValidationMessageFor(m => m.Reports[i].SelectedFile)  
                                         </td>  
                                    </tr>  
                               }  
                          </table>  
                          <button type="submit" class="btn btn-success submit">Create</button>  
                     }  
                </div>  
           </div>  
           <!-- JS includes -->  
           <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
           <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>  
           <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>  
           <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>  
           <script type="text/javascript">  
           </script>  
      </body>  
 </html>


And this is how our app should look like...enjoy






Programming thought of the day:
  • In a world without fences and walls, who needs Gates and Windows?
  • =)

No comments:

Post a Comment