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:

Step 2

Create a Modal class "Record.cs":

Write the Following code:

Step 3

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

Add the following code:

Step 4

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

Add the following code:

Step 5

Create another view:

Add the following code:

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:

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>