In this post, I will show you how to use the jquery model dialogue in asp.net.
Note:Please make sure that you have downloaded the jquery and jquery library.
-
Start visual studio
-
Select File/New Project
-
Choose a Web Site Template -for this example, I used Empty Web Site
-
Right-click on the empty website and add a new class named Person. cs and paste the following code
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
public class Person
{
public string Name { get; set; }
public string Email { get; set; }
public static List<Person> GetAll()
{
List<Person> list = new List<Person>()
{
new Person{Name="John",Email="john@doe.com"},
new Person{Name="Admin",Email="admin@doe.com"},
};
HttpContext.Current.Session["Add"] = list;
return list;
}
}
- Right-click on the empty website and add a new item (Ajax Enabled WCF Service), and modified the code of Service.cs as below
Service.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;
using System.Web;
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service
{
[WebGet(UriTemplate = "Insert/?name={name}&email={email}", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
[OperationContract]
public string InsertPerson(string name, string email)
{
string data = string.Empty;
List<Person> list = null;
if (HttpContext.Current.Session["Add"] == null)
{
list = Person.GetAll();
}
else
{
list = (List<Person>)HttpContext.Current.Session["Add"];
if (!string.IsNullOrEmpty(name) || !string.IsNullOrEmpty(email))
{
list.Add(new Person { Name = name, Email = email });
HttpContext.Current.Session["Add"] = list;
data = "<tr><td>" + name + "</td> <td>" + email + "</td></tr>";
}
else
{
data = "Failure";
}
}
return data;
}
}
- Right-click on Website and add a new item named Default.aspx and add the following code
<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
body
{
font-size: 80%;
}
label, input
{
display: block;
}
input.text
{
margin-bottom: 12px;
width: 95%;
padding: .4em;
}
fieldset
{
padding: 0;
border: 0;
margin-top: 25px;
}
h1
{
font-size: 1.2em;
margin: .6em 0;
}
div#users-contain
{
width: 350px;
margin: 20px 0;
}
div#users-contain table
{
margin: 1em 0;
border-collapse: collapse;
width: 100%;
}
div#users-contain table td, div#users-contain table th
{
border: 1px solid #eee;
padding: .6em 10px;
text-align: left;
}
.ui-dialog .ui-state-error
{
padding: .3em;
}
.validateTips
{
border: 1px solid transparent;
padding: 0.3em;
}
</style>
<link href="Style/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.8.7.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#editPerson').dialog({
autoOpen: false,
model: true,
draggable: true, title: "Add Person",
buttons: {
"Create an account": function () {
var name = $("#name").val();
var email = $("#email").val();
$.getJSON("Service.svc/Insert", { name: name, email: email }, function (data) {
$('#grdPerson tbody tr:last').after(data);
$("#editPerson").dialog("close");
});
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
//Show Dialog function
function showDialog(id) {
$('#' + id).dialog("open");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<asp:GridView ID="grdPerson" runat="server" AutoGenerateColumns="false" Width="400">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Email" HeaderText="Email" />
</Columns>
</asp:GridView>
<div id="editPerson" title="Create new user">
<fieldset>
<label for="name">
Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">
Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</div>
<input type="button" id="btnAdd" runat="server" value="Add New Person" onclick="showDialog('editPerson');" />
</div>
</form>
</body>
</html>