Custom Modal Popup Box in ASP.Net Web API

Mudita Rathore
11y
17.2k
0
1

100

Article

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:

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

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

}

@model IEnumerable<CustomModel.Models.Record>

@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")

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

</label>

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

@Html.TextArea("Description")

</label>

}fa

$(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>

<title>@ViewBag.Name</title>

</head>

<body>

$(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:

Up Next

Ebook Download

View all

ASP.NET MVC 5 Recipes: A Practical Solution

Read by 9.3k people

Download Now!

Learn

View all