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".

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

Step 2

Create a Modal class "Record.cs":

• In the "Solution Explorer".

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

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

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

Write the Following code:

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Web;

 namespace CustomModel.Models

{
   public class Record

    {

        public int ID { get; set; } 

        public string Name { get; set; }

        public string Description { get; set; }

    }

    public class RecordManager

    {

        public Collection<Record> Records

        {

            get

            {

                if (HttpRuntime.Cache["Records"] == null)

                    this.DisplayData();

                return (Collection<Record>)HttpRuntime.Cache["Records"];

            }

        }

        private void DisplayData()

        {

            var records = new Collection<Record>();

            records.Add(new Record

            {

                ID = 1,

                Name = "Set schedule for saturday",

                Description = "Don't forget to upload this schedule.."

            });

            HttpRuntime.Cache["Records"] = records;

        }

        public Collection<Record> GetAll()

        {

            return Records;

        }

        public Record GetById(int Id)

        {

            return Records.Where(i => i.ID == Id).FirstOrDefault();

        }

        public int Collect(Record detail)

        {

            if (detail.ID <= 0)

                return collectAsNew(detail);

            var availableR = Records.Where(a => a.ID == detail.ID).FirstOrDefault();

            availableR.Name = detail.Name;

            availableR.Description = detail.Description;

            return availableR.ID;

        }

        private int collectAsNew(Record item)

        {

            item.ID = Records.Count + 1;

            Records.Add(item);

            return item.ID;

        }

    }

}

Step 3

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

• In the "Solution Explorer".

• Select "Controller" -> "HomeController".

Add the following code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using CustomModel.Models;

namespace CustomModel.Controllers

{
    public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        public ActionResult List()

        { 

            var mgr = new RecordManager();

            var mode = mgr.GetAll();

            return PartialView(mode);

        }

        public ActionResult Develop()

        {

            var model = new Record();

            return PartialView("RecordForm", model);

        }

        [HttpPost]

        public ActionResult Collect(Record record)

        {

            var mgr = new RecordManager();

            mgr.Collect(record);

            var mode = mgr.GetAll();

            return PartialView("List", mode);

        }

    }

}

 

Step 4

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

• In the "Solution Explorer".

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

Add the following code:

<div id="RecordListBlock"></div> 

<span class="AddLink ButtonLink">Add Another New information</span>

<div id="RecordDialog" title="" class="Hidden"></div>

Step 5

Create another view:

• In the "HomeController".

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

• Click the "Add" button.

Add the following code:

@{

    ViewBag.Title = "List";

}

<h2>List</h2> 

 @model IEnumerable<CustomModel.Models.Record>

<ul class="NotesList">

    @foreach (var data in Model)

    {

    <li>

        @data.ID<br />

        @data.Name <br />

        @data.Description <br />

    </li>

    }

</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".

• Click on the "Add" button.

Add the following code:

@{

    ViewBag.Title = "RecordForm";

}

 <h2>NoteForm</h2>

 @model CustomModel.Models.Record

 @using(Html.BeginForm("Collect", "Home", FormMethod.Post, new { Id = "RecordForm" })) {

 @Html.Hidden("ID")

<label class="Name"> 

    <span>Name</span><br />

    @Html.TextBox("Name")<br />

</label>

<label class="Description">

    <span>Description</span><br />

    @Html.TextArea("Description")

</label>

}fa

    <script type="text/javascript">

        $(function () {

            $("#NoteForm").validate({

                rules: {

                   Name: { required: true },

                    Description: { required: true }

                }

            });

        });

    </script>

Step 7

In the "_Layout.cshtml" file that exists:

• In the "Solution Explorer".

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

Add the following code:

 <!DOCTYPE html>

 <html>

 <head>

    <meta charset="utf-8" />

    <title>@ViewBag.Name</title>

    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="Stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.24.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>

</head>

<body>

    <script type="text/javascript">

        $(function () {

            $("#RecordDialog").dialog({

                autoOpen: false, width: 500, height: 500, modal: true,

                buttons: {

                    "Save": function () {

                        if ($("#RecordForm").validate().form()) {

                            $.post("/Home/Collect",

        $("#RecordForm").serialize(),

        function (data) {

            $("#RecordDialog").dialog("close");

            $("#RecordListBlock").html(data);

        });

                        }

                    },

                    Cancel: function () { $(this).dialog("close"); }

                }

            });

 

            $(".AddLink").click(function () {

                $("#RecordDialog").html("")

                .dialog("option", "title", "Add Note")

                .load("/Home/Develop", function () { $("#RecordDialog").dialog("open"); });

          });

            LoadList();

        });

        function LoadList() {

            $("#RecordListBlock").load("/Home/List");

        }

    </script>

    @RenderBody()

</body>

</html>

Step 8

Now execute the application by pressing "F5".

Click on the "Add Another New information".

Fill in both names and a description box:

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