Use jQuery UI dialog yes no

For this example, I’m using jQuery version 3.2.1. The javascript method popupConfirm() can be called on the click of a button event or onchange event of a drop-down. The no-close class is to remove the x button from top-right of the dialog box.

< link href="../Scripts/jquery-ui.css" rel="stylesheet" />
< script src="../Scripts/jquery.js"></script>
< script src="../Scripts/jquery-ui.js"></script>
< style>
	.no-close .ui-dialog-titlebar-close{
		display: none;
	}
< /style>
<script language="JavaScript">   
    $(document).ready(function () {
        $("#dialog").dialog({
            autoOpen: false,
            modal: true,
            width: 400
        });
    });

    function popupConfirm() {
        $("#dialog").dialog({
			buttons: {
				"Yes": function () {
					$("#message").text('You clicked Yes');
					$(this).dialog("close");
				},
				"No": function () {
					$("#message").text('You clicked No');
					$(this).dialog("close");
				}
			},
			dialogClass: "no-close"
		});

		$("#dialog").dialog("open");
    }
</script>

Use the following html for the dialog and message as below.

< div id="dialog" title="Confirmation Required" >
  Are you sure?
< /div >
< div id="message" style="color: red;" >

< /div >

Use onchange method of a drop-down e.g.

< select name = 'types' size='1' onchange='popupConfirm();'> < /select> 

Http POST request with jQuery ajax

One of the most common scenarios is making client side Http calls to URLs to external or internal domain using jQuery ajax. In this demo, I’ll show how to call Page static method of an ASP.net method written for an aspx page using C#. The requirement is to use headers that need to be passed along with POST data.

var dataSent = "{firstName : '" + firstName + "', lastName: '" + lastName + "', pID: '" + pID + "'}";

I used the following Javascript method to generate Guid which is RFC4122 version 4 compliant solution.

var Guid = createGuid();

function createGuid() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}

Below is the jQuery ajax POST request calling the Page static method DemoMethod in the DemoPage.aspx.cs file with the following signature:

Server-side public static method:

[WebMethod]

public static string DemoMethod(string firstName, string lastName, string pID) {return "demo";}

Client-side jquery ajax call:

$.ajax({
type: ‘POST’,
url: “DemoPage.aspx/DemoMethod”,

contentType: “application/json; charset=utf-8”,
dataType: ‘json’,
headers: {
‘Accept’: ‘application/json’,
‘Content-Type’: ‘application/json’,
‘firstName’: firstName,
‘lastName’: lastName,
‘x-requestKey’: Guid
},
data: dataSent,
async: false,
success: function (response) {
alert(response);
if (response != null && response.d != null) {
alert(response.d);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(‘error’);
}
});

The response in the success part will be received by the object “response” and can be accessed using the response.d property.