Custom Modal Popup Box in ASP.Net Web API

Introduction

This article describes how to create a Custom Modal Popup Box in ASP.NET Web API.

Procedure for creating the Custom Modal Popup Box in the Web API.

Step 1

First create a Web API Application:

  • Start Visual Studio 2012.

  • From the start window select "New Project".

  • In the Template Window select "Installed" -> "Visual C#" -> "Web".

  • Select "ASP.NET MVC 4 Web Application" and click on "OK".

    cu4.jpg

  • From the "MVC4 Project" window select "Web API".

    cu5.jpg

Step 2

Create a Modal class "Record.cs":

  • In the "Solution Explorer".

  • Right-click on the "Modal" -> "Add" -> "Class".

  • Select "Installed" -> "Visual C#".

    cu9.jpg

  • Select "Class" and click the "OK" button.

Write the Following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Collections.ObjectModel;  
  4. using System.Linq;  
  5. using System.Web;  
  6. namespace CustomModel.Models  
  7. {  
  8.     public class Record  
  9.     {  
  10.         public int ID { getset; }   
  11.         public string Name { getset; }  
  12.         public string Description { getset; }  
  13.     }  
  14.     public class RecordManager  
  15.     {  
  16.         public Collection<Record> Records  
  17.         {  
  18.             get  
  19.             {  
  20.                 if (HttpRuntime.Cache["Records"] == null)  
  21.                     this.DisplayData();  
  22.                 return (Collection<Record>)HttpRuntime.Cache["Records"];  
  23.             }  
  24.         }  
  25.         private void DisplayData()  
  26.         {  
  27.             var records = new Collection<Record>();  
  28.             records.Add(new Record  
  29.             {  
  30.                 ID = 1,  
  31.                 Name = "Set schedule for saturday",  
  32.                 Description = "Don't forget to upload this schedule.."  
  33.             });  
  34.             HttpRuntime.Cache["Records"] = records;  
  35.         }  
  36.         public Collection<Record> GetAll()  
  37.         {  
  38.             return Records;  
  39.         }  
  40.         public Record GetById(int Id)  
  41.         {  
  42.             return Records.Where(i => i.ID == Id).FirstOrDefault();  
  43.         }  
  44.         public int Collect(Record detail)  
  45.         {  
  46.             if (detail.ID <= 0)  
  47.                 return collectAsNew(detail);  
  48.             var availableR = Records.Where(a => a.ID == detail.ID).FirstOrDefault();  
  49.             availableR.Name = detail.Name;  
  50.             availableR.Description = detail.Description;  
  51.             return availableR.ID;  
  52.         }  
  53.         private int collectAsNew(Record item)  
  54.         {  
  55.             item.ID = Records.Count + 1;  
  56.             Records.Add(item);  
  57.             return item.ID;  
  58.         }  
  59.     }  
  60. }   

Step 3

In the "HomeController" file write some code. This file exists in:

  • In the "Solution Explorer".

  • Select "Controller" -> "HomeController".

Add the following code:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using CustomModel.Models;  
  7. namespace CustomModel.Controllers  
  8. {  
  9.     public class HomeController : Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.         public ActionResult List()  
  16.         {  
  17.             var mgr = new RecordManager();  
  18.             var mode = mgr.GetAll();  
  19.             return PartialView(mode);  
  20.         }  
  21.         public ActionResult Develop()  
  22.         {  
  23.             var model = new Record();  
  24.             return PartialView("RecordForm", model);  
  25.         }  
  26.         [HttpPost]  
  27.         public ActionResult Collect(Record record)  
  28.         {  
  29.             var mgr = new RecordManager();  
  30.             mgr.Collect(record);  
  31.             var mode = mgr.GetAll();  
  32.             return PartialView("List", mode);  
  33.         }  
  34.     }  
  35. } 

Step 4

In the "Index.cshtml" file that exists in:

  • In the "Solution Explorer".

  • Select "Views" -> "Home" -> "index.cshtml".

Add the following code:

  1. <div id="RecordListBlock"></div>   
  2. <span class="AddLink ButtonLink">Add Another New information</span>  
  3. <div id="RecordDialog" title="" class="Hidden"></div> 

Step 5

Create another view:

  • In the "HomeController".

  • Right-click on the action method "list" -> "Add View".

    cu6.jpg

    cu7.jpg

  • Click the "Add" button.

Add the following code:

  1. @{  
  2.     ViewBag.Title = "List";  
  3. }  
  4. <h2>List</h2>   
  5.  @model IEnumerable<CustomModel.Models.Record>  
  6. <ul class="NotesList">  
  7.     @foreach (var data in Model)  
  8.     {  
  9.     <li>  
  10.         @data.ID<br />  
  11.         @data.Name <br />  
  12.         @data.Description <br />  
  13.     </li>  
  14.     }  
  15. </ul> 

Step 6

Create one more view, "RecordForm.cshtml" as in the following:

  • In the "HomeController".

  • Right-click on the action method "Develop" -> "Add View" then change the name of the view to "RecordForm.cshtml".

    cu8.jpg

  • Click on the "Add" button.

Add the following code:

  1. @{  
  2.     ViewBag.Title = "RecordForm";  
  3. }  
  4.  <h2>NoteForm</h2>  
  5.  @model CustomModel.Models.Record  
  6.  @using(Html.BeginForm("Collect""Home", FormMethod.Post, new { Id = "RecordForm" })) {  
  7.  @Html.Hidden("ID")  
  8. <label class="Name">   
  9.     <span>Name</span><br />  
  10.     @Html.TextBox("Name")<br />  
  11. </label>  
  12. <label class="Description">  
  13.     <span>Description</span><br />  
  14.     @Html.TextArea("Description")  
  15. </label>  
  16. }fa  
  17.     <script type="text/javascript">  
  18.         $(function () {  
  19.             $("#NoteForm").validate({  
  20.                 rules: {  
  21.                    Name: { required: true },  
  22.                     Description: { required: true }  
  23.                 }  
  24.             });  
  25.         });  
  26. </script> 

Step 7

In the "_Layout.cshtml" file that exists:

  • In the "Solution Explorer".

  • Select "View" -> "Shared" -> "_Layout.cshtml".

    cu10.jpg

Add the following code:

  1. <!DOCTYPE html>  
  2.  <html>  
  3.  <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>@ViewBag.Name</title>  
  6.     <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="Stylesheet" type="text/css" />  
  7.     <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>  
  8.     <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" type="text/javascript"></script>  
  9.     <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>  
  10. </head>  
  11. <body>  
  12.     <script type="text/javascript">  
  13.         $(function () {  
  14.             $("#RecordDialog").dialog({  
  15.                 autoOpen: false, width: 500, height: 500, modal: true,  
  16.                 buttons: {  
  17.                     "Save"function () {  
  18.                         if ($("#RecordForm").validate().form()) {  
  19.                             $.post("/Home/Collect",  
  20.         $("#RecordForm").serialize(),  
  21.         function (data) {  
  22.             $("#RecordDialog").dialog("close");  
  23.             $("#RecordListBlock").html(data);  
  24.         });  
  25.                         }  
  26.                     },  
  27.                     Cancel: function () { $(this).dialog("close"); }  
  28.                 }  
  29.             });  
  30.             $(".AddLink").click(function () {  
  31.                 $("#RecordDialog").html("")  
  32.                 .dialog("option""title""Add Note")  
  33.                 .load("/Home/Develop"function () { $("#RecordDialog").dialog("open"); });  
  34.           });  
  35.             LoadList();  
  36.         });  
  37.         function LoadList() {  
  38.             $("#RecordListBlock").load("/Home/List");  
  39.         }  
  40.     </script>  
  41.     @RenderBody()  
  42. </body>  
  43. </html>   

Step 8

Now execute the application by pressing "F5".

cu.jpg

Click on the "Add Another New information".

cu1.jpg

Fill in both names and a description box:

cu2.jpg

Click on the "Save" button.This show this record in the browser:

cu3.jpg