Introduction

This article provides an example of a confirmation box in the Web API. We often use a confirmation box for verifying or accepting information. It has two buttons, "OK" and "Cancel". If we click on the "Ok" button then the TextBox returns the value true and if the "Cancel" button is clicked then the TextBox returns false.

The following provides an example of a confirmation box.

Step 1

First create an application:

Step 2

Now add a Model class in the model folder as in the following:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace ConfirmBoxWebAPI.Models
  6. {
  7. public class DetailModel
  8. {
  9. public int ID { get; set; }
  10. public string Name { get; set; }
  11. public string Address { get; set; }
  12. }
  13. }

Step 3

In the "HomeController" add some code. This file exists:

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 ConfirmBoxWebAPI.Models;
  7. namespace ConfirmBoxWebAPI.Controllers
  8. {
  9. public class HomeController : Controller
  10. {
  11. [HttpGet]
  12. public ActionResult Index()
  13. {
  14. return View();
  15. }
  16. [HttpPost]
  17. public ActionResult Display(DetailModel info)
  18. {
  19. return View(info);
  20. }
  21. }
  22. }

Step 4

Now create a View.

Add the following code:

  1. @model ConfirmBoxWebAPI.Models.DetailModel
  2. @{
  3. ViewBag.Title = "Display";
  4. }
  5. <h2>Display</h2>
  6. Id:: @Model.ID<br />
  7. Name:: @Model.Name <br />
  8. Address:: @Model.Address <br />

Step 5

In the View provide the following code.

Add the following code.

  1. @model ConfirmBoxWebAPI.Models.DetailModel
  2. @{
  3. ViewBag.Title = "Index";
  4. }
  5. <h2>Example of confermation Box</h2>
  6. <script type="text/javascript">
  7. function Show() {
  8. var Item = {
  9. Name: $("#Name").val(),
  10. Address: $("#Address").val()
  11. };
  12. if (Item.Name != "" && Item.Address != "") {
  13. var r = confirm("Are you sure you want to submit the record?");
  14. if (r==true)
  15. {
  16. return true;
  17. }
  18. else
  19. {
  20. return false;
  21. }
  22. }
  23. else {
  24. var t = confirm("Please insert the record");
  25. if (t == true) {
  26. return false;
  27. }
  28. }
  29. }
  30. </script>
  31. @using (Html.BeginForm("Display", "Home"))
  32. {
  33. @Html.Label("Name");
  34. @Html.TextBoxFor(m => m.Name)<br />
  35. @Html.Label("Address");
  36. @Html.TextBoxFor(m => m.Address)<br />
  37. <input type="submit" value=" submit" onclick="javascript: return Show();" />
  38. }

In the code above we define a function "Show()" in which we take the value of the variable. If the TextBox value is not empty then it displays the message "are you sure you want to submit the record" now if you click on "Ok" then it shows the TextBox value. If the textboxes are empty then it shows the message "please insert the record". If Ok is clicked again then it returns the textboxes.

Step 6

Now execute the application.

conf7.jpg

Insert the values into the textboxes and click on the "Submit" button.

conf8.jpg

conf9.jpg

Without inserting the value, click on the submit button.

conf10.jpg