2009-08-16 46 views
5

Auf meiner Seite habe ich die folgende Benutzersteuerung:ASP.NET Benutzersteuerung und jQuery Dialog

<div class="editFormDialog" style="display: none; font-size: 12px;"> 
    <mm:Form ID="editUC" ShowCreateButton="false" ShowEditButton="true" runat="server" /> 
</div> 

Diese UC hat eine öffentliche Eigenschaft, die einen DataSet nimmt und aktualisiert einige Felder in der UC.

Also, wenn ich einen Knopf auf meiner Seite drücke, ruft es diese Eigenschaft auf dem UC auf, und der UC wird mit Daten vom DataSet aktualisiert.

So weit so gut. Das Problem tritt auf, wenn ich möchte, dass der UC ein jQuery UI Dialog ist.

Zunächst erstelle ich den Dialog:

$(document).ready(function() { 
    $('.editFormDialog').dialog({ 
     autoOpen: false, 
     height: 700, 
     width: 780, 
     modal: true, 
     bgiframe: true, 
     title: 'Rediger', 
     open: function(type, data) { 
      $(this).parent().appendTo("form"); 
      $(this).css('display', 'block'); 
     } 
    }); 
}); 

Und ich wan't es auf einem Tastendruck zu öffnen (dies ist nicht eine ASP.NET-Taste, plain HTML):

$('#btnEdit').live('click', function() { 
    $('.editFormDialog').dialog('open'); 
}); 

Der Dialog öffnet sich, aber der UC enthält nicht die korrekten Daten. Wenn die Seite geladen wird, wird der UC mit den Standarddaten aktualisiert. Dann klickt der Benutzer auf eine Schaltfläche, und die Daten ändern sich, aber der UC wird nicht aktualisiert. Es enthält immer noch die Standarddaten. Das ist das Problem.

Haben Sie eine Idee warum?

Hilfe wird sehr geschätzt!

Antwort

1

Genau was passiert, wenn Sie "die Eigenschaft aufrufen" (ich nehme an, Sie meinen, es ist eine Methode)? Führt die Seite ein Postback durch? Wenn das der Fall ist, wird das Postback irgendwie blockiert, wenn Sie jQuery in das Szenario mischen?

+0

Ich klicke auf eine Schaltfläche, um die nächsten Daten zu erhalten. Ein Postback tritt auf. Die Eigenschaft in der UC wird wie folgt festgelegt: "editUC.EditData = ds;".Die Seite enthält die neuen Daten. Wenn ich jetzt auf eine andere Schaltfläche klicke, die den Dialog öffnet, enthält der UC immer noch die Standarddaten. Wie es die Änderungen in seiner Datenquelle nicht registriert hat. Aber wenn ich den UC außerhalb des Dialogs anzeigen, funktioniert es perfekt. –

+0

Das hört sich komisch an: Könnten Sie etwas mehr von Ihrem Quellcode posten? –

+0

Es ist alles in einem Update-Panel platziert. Kann es sein, wenn ich den Dialog erstelle, er ist "außerhalb des Update-Panels"? Vielleicht könnte eine andere Lösung darin bestehen, den Dialog jedes Mal zu erstellen, wenn er geöffnet wird, und ihn dann zu entfernen, wenn er geschlossen wird. Natürlich platzieren Sie die HTML-Elemente an der richtigen Stelle. Aber wie kann ich das tun? –

0

Da Sie Update-Panels verwenden, wie injizierst du den Aufruf des Javascript auf der Seite? Ich frage, weil es nur einen Weg gibt, der bei partiellen Postbacks richtig funktioniert: ScriptManager.RegisterStartupScript(). Dadurch kann JavaScript-Code so funktionieren, als wäre die Seite geladen worden. Natürlich kann auch jedes andere Onload-JavaScript aufgerufen werden, was zu dem Verhalten führen kann, das Sie sehen.

So

  1. stellen Sie sicher, dass Ihr JavaScript mit dem Skript-Manager injiziert wird.
  2. stellen Sie sicher, nur die Bits von Javascript, die Sie wollen nach einer partiellen Postbacks auszuführen

Es besteht auch die Möglichkeit, Ihre UC in einer Ajax-Steuerung mit einem Web-Service des Drehens an die Datenquelle ausgeführt werden, ändern . Keine weiteren Postbacks, die normalerweise die Reaktionsfähigkeit der Seite verbessern.

2

Ich habe die Lösung für dieses Problem gefunden. Es stellt sich heraus, dass, wenn Sie in das Formular anhängen, müssen Sie diese Code-Snippet stellen Sie sicher, innerhalb jquery Dokument ist fertig:

$("#dialog1").parent().appendTo($("form:first")); 

So das Ganze sollte wie folgt aussehen:

jQuery(document).ready(function() { 
    $("#<%=myFamilyGrid.ClientID %>").tablesorter({ 
     sortList: [[0, 1]] 
    }) 
     .tablesorterPager({ container: $("#pager") }); 


    $("#dialog1").dialog({ 
     modal: true, 
     height: 370, 
     width: "350px", 
     autoOpen: false, 
     bgiframe: false, 
     zIndex: 3999 
    }); 

    $("#dialog1").parent().appendTo($("form:first")); 
}); 

Hoffnung das hilft!