Jeg har sidens kildekode og codebehind her
default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/ (...)<html xmlns="
http://www.w3.org/ (...)<head runat="server">
<title>JQuery UI Dialog Demo</title>
<link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//setup new person dialog
$('#newPerson').dialog({
autoOpen: false,
draggable: true,
title: "Add New Person",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
//setup edit person dialog
$('#editPerson').dialog({
autoOpen: false,
draggable: true,
title: "Edit Person",
open: function(type, data) {
$(this).parent().appendTo("form");
}
});
//alt. rows in grid
$("#tb-1 tr:even, #tb-2 tr:even").addClass("row");
$("#tb-1 tr, #tb-2 tr").mouseover(function() {
$(this).addClass("row-over");
}).mouseout(function() {
$(this).removeClass("row-over");
});
});
function showDialog(id) {
$('#' + id).dialog("open");
}
function closeDialog(id) {
$('#' + id).dialog("close");
}
function reLoad() {
//return confirm('Hello!');
$("#tb-1 tr:even, #tb-2 tr:even").addClass("row");
$("#tb-1 tr, #tb-2 tr").mouseover(function() {
$(this).addClass("row-over");
}).mouseout(function() {
$(this).removeClass("row-over");
});
}
</script>
<style type="text/css">
table#tb-1{
margin:0;
padding:0;
border: 1px solid #dbdbdb;
}
thead.th1{
background:#e9e9e9;
}
th.row{
font-weight:bold;
cursor:pointer;
}
th.row-over{
background:#e9e9e9;
}
tr.row{
background:#e9e9e9;
}
tr.row-over{
background:#fffcce;
}
</style>
</head>
<body>
<form id="frmJqueryDialogDemo" runat="server">
<asp:ScriptManager ID="mainScriptManager" runat="server"></asp:ScriptManager>
<input id="btnAdd" type="button" onclick="showDialog('newPerson');" value="Add New Person" />
<hr />
<asp:UpdatePanel ID="upGrid" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Repeater ID="gvUsers" runat="server" onitemcommand="Action">
<HeaderTemplate><table id="tb-1" cellpadding="0" cellspacing="0" border="0">
<tr>
<th>Names</th>
<th> </th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Literal ID="Literal1" Text='<%# Eval("Value") %>' runat="server" /></td>
<td><asp:ImageButton ID="lbName" CommandArgument='<%# Eval("Key") %>' ImageUrl="~/edit.png" OnClientClick="showDialog('editPerson');" onclick="lbName_Click" runat="server" /></td>
</tr>
</ItemTemplate>
<FooterTemplate></table></FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
<div id='newPerson'>
<asp:UpdatePanel ID="upNewUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<asp:Label ID="lblNewName" runat="server" AssociatedControlID="txtNewName" Text="Name"></asp:Label>
<asp:TextBox ID="txtNewName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqName1" ControlToValidate="txtNewName" ValidationGroup="Add" runat="server" ErrorMessage="Name is required"></asp:RequiredFieldValidator>
<asp:Button ID="btnAddSave" OnClick="btnAddSave_Click" runat="server" Text="Save" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id='editPerson'>
<asp:UpdatePanel ID="upEditUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<asp:Label ID="lblEditName" runat="server" AssociatedControlID="txtEditName" Text="Name"></asp:Label>
<asp:TextBox ID="txtEditId" Visible="false" runat="server"></asp:TextBox>
<asp:TextBox ID="txtEditName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqName2" ControlToValidate="txtEditName" ValidationGroup="Edit" runat="server" ErrorMessage="Name is required"></asp:RequiredFieldValidator>
<asp:Button ID="btnEditSave" runat="server" Text="Save"
onclick="btnEditSave_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
default.aspx.cs:
using System;
using System.Collections.Generic;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : Page
{
private Dictionary<Guid, string> Names
{
get { return (Dictionary<Guid, string>) ViewState["Names"]; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
/*
* to keep this sample really simple, we will populate some
* sample data in a Dictionary and store in the viewstate
*/
var names = new Dictionary<Guid, string>
{
{Guid.NewGuid(), "John"},
{Guid.NewGuid(), "Smith"},
{Guid.NewGuid(), "Arther"},
{Guid.NewGuid(), "Hari"}
};
//store the list in the viewstate.
ViewState.Add("Names", names);
//init grid
LoadNames();
}
}
private void LoadNames()
{
//databind grid
gvUsers.DataSource = ViewState["Names"];
gvUsers.DataBind();
}
protected void btnAddSave_Click(object sender, EventArgs e)
{
Page.Validate("Add");
if (Page.IsValid)
{
Names.Add(Guid.NewGuid(), txtNewName.Text);
LoadNames();
CloseDialog("newPerson");
//reset
txtNewName.Text = string.Empty;
//refresh grid
upGrid.Update();
}
}
protected void btnEditSave_Click(object sender, EventArgs e)
{
Page.Validate("Edit");
if (Page.IsValid)
{
Names[new Guid(txtEditId.Text)] = txtEditName.Text;
LoadNames();
CloseDialog("editPerson");
//reset
txtEditId.Text = string.Empty;
txtEditName.Text = string.Empty;
//refresh grid
upGrid.Update();
}
}
/// <summary>
/// Populate the Dialog with the existing name
/// and update the edit panel
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void lbName_Click(object sender, EventArgs e)
{
var editLink = ((ImageButton) sender);
txtEditId.Text = editLink.CommandArgument;
txtEditName.Text = Names[new Guid(editLink.CommandArgument)];
upEditUpdatePanel.Update();
}
/// <summary>
/// Registers client script to close the dialog
/// </summary>
/// <param name="dialogId"></param>
private void CloseDialog(string dialogId)
{
string script = string.Format(@"closeDialog('{0}')", dialogId);
ScriptManager.RegisterClientScriptBlock(this, typeof (Page), UniqueID, script, true);
}
protected void Action(object source, RepeaterCommandEventArgs e)
{
}
}
