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:

Step 2

Create a Modal class "Record.cs":

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 { get; set; }
  11. public string Name { get; set; }
  12. public string Description { get; set; }
  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:

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:

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:

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:

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:

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