ASP.NET: Modales Fenster mit Parameterübergabe und -rückgabe
September 3, 2007
Keine Kommentare
Heute hatte ich das nette Problem, einen Suchdialog in einer ASP.NET-Webseite zu realisieren. Dabei sollte ein modales Fenster geöffnet werden, an das Parameter übergeben werden und nach erfolgreicher Suche das entsprechende Ergebnis zurückgegeben wird.
Nunja, ich bin weder ASP.NET-GUI- noch JavaScript-Guru, aber dennoch möchte ich meinen Code der Allgemeinheit nicht vorenthalten.
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/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Suchdialogdemo</title> <script type="text/javascript"> var _searchArgs; function getSearchResults(args) { if (args && (args.modalResult == true)) { document.getElementById(args.elementId).value = args.resultValue; if (args.results.length > 0) { document.getElementById('edtAttr3').value = args.results[0]; } } } function openSearchDialog(elementId) { // Argumentübergabe vorbereiten _searchArgs=new Object(); _searchArgs.window = window; _searchArgs.getResults = getSearchResults; _searchArgs.elementId = elementId; _searchArgs.searchValue = document.getElementById(elementId).value; // Existenz der Methode showModalDialog überprüfen if (window.showModalDialog) { window.showModalDialog('Dialog.aspx', _searchArgs); } else { window.open('Dialog.aspx', '', 'modal=yes'); } } </script> </head> <body> <form id="form1" runat="server"> <div> Attribut 1:<asp:TextBox ID="edtAttr1" runat="server"></asp:TextBox> <a href="#" onclick="openSearchDialog('edtAttr1')">Suchen</a> <br /> Attribut 2:<asp:TextBox ID="edtAttr2" runat="server"></asp:TextBox> <a href="#" onclick="openSearchDialog('edtAttr2')">Suchen</a> <br /> Attribut 3:<asp:TextBox ID="edtAttr3" runat="server"></asp:TextBox> </div> </form> </body> </html>
Dialog.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dialog.aspx.cs" Inherits="Dialog" %> <!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>Suchdialog</title> <script type="text/javascript"> function closewindow(result) { args = new Object(); args.modalResult = (result == 'OK'); if (window.dialogArguments) { args.elementId = window.dialogArguments.elementId; } else { args.elementId = opener._searchArgs.elementId; } args.resultValue = document.getElementById('edtSuche').value; // args.results = ['Testattr. 1', 'Testattr. 2']; if (window.dialogArguments) { window.dialogArguments.getResults(args); } else { opener._searchArgs.getResults(args); } window.close(); } function loadwindow() { if (window.dialogArguments) { document.getElementById('edtSuche').value = window.dialogArguments.searchValue; } else { document.getElementById('edtSuche').value = opener._searchArgs.searchValue; } } window.onload = loadwindow; </script> </head> <body> <form id="frmSuche" runat="server"> <div> <asp:TextBox ID="edtSuche" runat="server"></asp:TextBox> <a href="#" onclick="closewindow('OK')">OK</a> <a href="#" onclick="closewindow('CANCEL')">Abbruch</a> </div> </form> </body> </html>
Für Verbesserungsvorschläge und Kommentare bin ich übrigens immer dankbar.
Kommentare
Kommentar hinterlassen Trackback