我有一個問題，我在 JQuery 對話框中嵌入了一個用戶控制元件。在這個用戶控制元件中是一個簡單的聯系表單，它利用 UpdatePanel 異步訪問服務器，并提交資料而不會導致整頁回發。我面臨的問題是，當到達服務器時，我無法從更新面板中的文本框中獲取值。請參閱下面的代碼片段，如果您有任何問題，請告訴我。謝謝你。

ASCX 更新面板

<asp:UpdatePanel ID="contactPanelID" runat="server"> 
<ContentTemplate>
    <div>
        <h2>CONTACT US</h2>
        <p type="Name:"><asp:TextBox id="nameText" runat="server" cssclass="contactInput" placeholder="Write your name here.."/></p>             
        <p type="Email:"><asp:TextBox id="emailText" runat="server" cssclass="contactInput" placeholder="Let us know how to contact you back.."/></p>
        <p type="Message:"><asp:TextBox id="messageText" runat="server" cssclass="contactInput" placeholder="What would you like to tell us.."/></p>
        <asp:LinkButton id="ContactSubmit" cssclass="contactBtn" runat="server" Text="Send Message" />
        <asp:label runat="server" id="responseLabel" cssclass="contactInput"></asp:label>
    </div>
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="ContactSubmit" />
</Triggers>   
</asp:UpdatePanel>

VB 用戶控制

Protected Sub lnk_ContactSubmit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ContactSubmit.Click
    responseLabel.Text = nameText.Text ' WHY IS THIS VALUE BLANK?
End Sub

Web.Master 嵌入式用戶控制元件

    <div id="dialog" title="Basic dialog" style="display: none" >
        <web:ContactUs runat="server" ></web:ContactUs>   
    </div>

Web.Master Javascript 打開對話框

$("#dialog").dialog({
            dialogClass: 'contactDialog'
        });

為 Albert 編輯 從下圖中可以看出，當我追加到表單時，它幾乎禁用了我現在添加的對話框的模式選項。抱歉，如果我只是遺漏了一些簡單的東西，但我對對話框沒有打開的原因感到困惑。

var myDialog = $("#EditRecord");
        myDialog.dialog({
            title: "Edit Hotel Information",
            appendTo: "form1",
            modal: true,
            width: 860 
        });

從 AsyncPostBackTrigger 上的 ASP UpdatePanel 中的文本框中檢索值

編輯 2 給阿爾伯特

這是我的 Web.Master 的樣例（簡化版）

<head id="Head1" runat="server">
  <script type="text/javascript" language="javascript">
    function OpenDialog(){
        $("#dialog").dialog({
            width: 500,
            height: 550,
            modal: true,
            dialogClass: "myTitleClass"
        });
  }
  </script>
  <body style=" margin-top:1px; text-align:center;" id="body_master" runat="server">
    <form id="form1" runat="server">
       <!-- All kinds of unrelated content -->
      <div id="dialog" style="display: none;" title="Contact Us">
        <web:ContactUs runat="server" ></webrg:ContactUs>  <!-- This is my user control --> 
      </div>
    </form>
  </body>
</head>

更新了用戶控制 ascx 代碼

<asp:UpdatePanel ID="contactPanelID" runat="server"> 
<ContentTemplate>
    <div>
        <p type="Name:"><asp:TextBox id="nameText" runat="server" cssclass="contactInput" placeholder="Write your name here.."/></p>             
        <p type="Email:"><asp:TextBox id="emailText" runat="server" cssclass="contactInput" placeholder="Let us know how to contact you back.."/></p>
        <p type="Message:"><asp:TextBox id="messageText" runat="server" cssclass="contactInput" placeholder="What would you like to tell us.."/></p>
        <asp:LinkButton id="ContactSubmit" cssclass="contactBtn" runat="server" Text="Send Message" />
        <asp:label runat="server" id="responseLabel" cssclass="contactInput"></asp:label>
    </div>
</ContentTemplate>
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="ContactSubmit" />
</Triggers>

</asp:UpdatePanel>

uj5u.com熱心網友回復：

在絕大多數情況下，來自更新面板的回發會導致對話框崩潰。但是，我發現如果您將 div 放在更新面板的 OUT 側，并讓 jquery.ui 彈出該 div，并且 div 內部就是您的更新面板，那么 jquery.ui 對話框可以繼續存在并具有回發。請記住，雖然更新面板只回發更新面板中的部分？它實際上是我們所說的“部分”回發，甚至網頁加載甚至會觸發，并且每次您從該更新面板內部回發時都會觸發。移動你彈出的 div 以包圍向上。

如果UP里面的按鈕有事件，那么就不需要觸發設定了。您也沒有顯示#Dialog div，但如前所述，您希望此 div 圍繞 up，而不是將 UP 嵌套在 pop div 內。

接下來：

是的，您經常會發現，當您在 UP 中進行回發時，看不到這些值，或者沒有正確地將其放回頁面 DOM 中。

因此，將其添加到您的 jquery.UI 對話框中：

    <script>
        function PopEdit() {
            var myDialog = $("#EditRecord");
            myDialog.dialog({
                title: "Edit Hotel Information",
                modal: true,
                width: 860,
                appendTo: "form"
            });
        }
    </script>

注意上面非常小心。appendTo：“表格”。對于彈出的大多數對話框，您通常不需要這個，但如果該對話框是為了編輯資料，并且您要查看后面代碼中的更改，那么您需要 appendTo。

因此，請記住，雖然 UP 執行部分回發，但您確實會在此處獲得并看到并擁有標準的頁面生命周期回發。

當您單擊按鈕時，視圖狀態也會在 UP 中回發。所以，它不像你不會得到零回傳。使用 UP 面板時，您會獲得回發、頁面加載和完整的頁面周期。

通常，由于回發確實會折疊 UP，因此這可能是您設計的一部分。如果我彈出一個視窗，并有一個保存按鈕（即回發），那就太好了，因為回發將為我折疊（關閉）面板（這就是我想要的）。

所以，我經常在 UP 中使用回發??的事實來關閉面板，因為作為一般規則，任何回發都會折疊 UP。但是，如果您將“div”移到外面并包圍 UP，那么面板可以在后背中幸存下來，而不會崩潰。

因此，采用這個簡單的網格 - 使用彈出 jquery.UI dailog 來編輯一行。

我們有這個簡單的網格：

    <div style="width:40%">
        <asp:GridView ID="GHotels" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="ID" CssClass="table">
            <Columns>
                <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
                <asp:BoundField DataField="LastName" HeaderText="LastName"    />
                <asp:BoundField DataField="HotelName" HeaderText="HotelName"  />
                <asp:BoundField DataField="Description" HeaderText="Description"  />
                <asp:TemplateField HeaderText="Edit">
                    <ItemTemplate>
                        <asp:Button ID="cmdEdit" runat="server" Text="Edit" CssClass="btn" OnClick="cmdEdit_Click" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

以及加載網格的代碼：

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadGrid
    End If

End Sub

Sub LoadGrid()

    Dim cmdSQL As New SqlCommand("SELECT * FROM tblHotelsA ORDER BY HotelName")
    GHotels.DataSource = MyrstP(cmdSQL)
    GHotels.DataBind()

End Sub

現在我們有了這個：

從 AsyncPostBackTrigger 上的 ASP UpdatePanel 中的文本框中檢索值

另外，為什么要使用鏈接按鈕？？？？（我想沒問題，但是應該有充分的理由來選擇常規按鈕）。

所以，在上面，我們有觀點。那只是一個平面簡按鈕。

我們點擊時的代碼是這樣的：

Protected Sub cmdEdit_Click(sender As Object, e As EventArgs)

    Dim btn As Button = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim pkID = GHotels.DataKeys(gRow.RowIndex).Item("ID")

    Dim cmdSQL As New SqlCommand("SELECT * from tblHotelsA where ID = @ID")
    cmdSQL.Parameters.Add("@ID", SqlDbType.Int).Value = pkID
    Dim rstData As DataTable = MyrstP(cmdSQL)

    Call fLoader(Me.EditRecord, rstData.Rows(0)) ' load up hidden div with data
    ViewState("rstData") = rstData
    ' lets call the js routine to pop our hidden edit div
    ClientScript.RegisterStartupScript(Page.GetType(), "PopEditKey", "PopEdit()", True)

End Sub

gv 的那個簡單按鈕單擊事件獲取 PK，加載隱藏的 div（jquery.ui 將彈出）。

客戶端，我有一個簡單的 jquery.ui 對話框來彈出我們的編輯 div。

該代碼是這樣的：

    <script>
        function PopEdit() {
            var myDialog = $("#EditRecord");
            myDialog.dialog({
                title: "Edit Hotel Information",
                modal: true,
                width: 860,
                appendTo: "form"
            });
        }
    </script>

所以，現在，當我點擊一行時，我得到了這個：

從 AsyncPostBackTrigger 上的 ASP UpdatePanel 中的文本框中檢索值

現在，在上面，我有一個取消按鈕。（我使用了 html 按鈕，因為我想要按鈕的圖示。但是，使用 id 和 runat=server，它的作業原理與標準的 asp.net 按鈕完全相同。

對于上面的 3 個按鈕，我有這個：

        <button id="cmdSave" runat="server" class="btn" onserverclick="cmdSave_ServerClick" >
            <span aria-hidden="true" class="glyphicon glyphicon-floppy-saved"> Save</span> 
        </button>

        <button id="cmdCancel" runat="server" class="btn" style="margin-left:15px">
            <span aria-hidden="true" class="glyphicon glyphicon-arrow-left"> Back/Cancel</span>
        </button>

        <button id="cmdDelete" runat="server" class="btn" style="margin-left:15px">
            <span aria-hidden="true" class="glyphicon glyphicon-trash"> Delete</span>
        </button>

請注意取消按鈕如何具有零代碼。我只是讓它回發，事件背后沒有代碼，但正如我所指出的，任何回發都會折疊對話框，我對此感到高興和滿意。

保存按鈕？當然，它在存根后面有一個代碼，并且有：

Protected Sub cmdSave_ServerClick(sender As Object, e As EventArgs)

    Dim rstData As DataTable = ViewState("rstData")
    Call fWriterW(EditRecord, rstData.Rows(0))
    Call SaveTable(rstData, "tblHotelsA")
    LoadGrid()   ' re-display grid with changes

End Sub

再一次，不需要關閉對話框的代碼。

和洗掉按鈕 - 理論上可以彈出另一個 jquery.ui 對話框向用戶詢問是或否。

但是，由于我確實允許編輯該彈出 div，所以再次注意 appendTo: 設定 - 這會將對話框推回“dom”，因此您后面的代碼將看到更改。

而且，我想為了更好的衡量標準，我可以發布 pop div 標記（但并不是那么重要）。但是，是這樣的：

    <div id="EditRecord" runat="server" style="float:left;display: none">
        <style>
            .iForm label {display:inline-block;width:90px}
            .iForm input {border-radius:8px;border-width:1px;margin-bottom:10px}                
            .iForm textarea {border-radius:8px;border-width:1px;margin-bottom:10px}     
            .iForm input[type=checkbox] {margin-right:8px}
        </style>

        <div style="float:left" class="iForm">
                <label>HotelName</label><asp:TextBox ID="txtHotel" runat="server" f="HOtelName" width="280"></asp:TextBox> <br />
                <label>First Name</label><asp:TextBox ID="tFN" runat="server" f="FirstName" Width="140"></asp:TextBox> <br />
                <label>Last Name</label><asp:TextBox ID="tLN" runat="server" f="LastName" Width="140"></asp:TextBox> <br />
                <label>City</label><asp:TextBox ID="tCity" runat="server" f="City" Width="140"></asp:TextBox> <br />
                <label>Province</label><asp:TextBox ID="tProvince" runat="server" f="Province" Width="75"></asp:TextBox> <br />
        </div>
        <div style="float:left;margin-left:20px" class="iForm">
            <label>Description</label> <br />
            <asp:TextBox ID="txtNotes" runat="server" Width="400" TextMode="MultiLine" 
                Height="150px" f="Description" ></asp:TextBox> <br />
            <asp:CheckBox ID="chkActive" f="Active" Text=" Active" runat="server" TextAlign="Right" />
            <asp:CheckBox ID="chkBalcony" f="Balcony" Text=" Has Balcony" runat="server" TextAlign="Right" />
        </div>
        <div style="clear:both"></div>
        <button id="cmdSave" runat="server" class="btn" onserverclick="cmdSave_ServerClick" >
            <span aria-hidden="true" class="glyphicon glyphicon-floppy-saved"> Save</span> 
        </button>

        <button id="cmdCancel" runat="server" class="btn" style="margin-left:15px">
            <span aria-hidden="true" class="glyphicon glyphicon-arrow-left"> Back/Cancel</span>
        </button>

        <button id="cmdDelete" runat="server" class="btn" style="margin-left:15px">
            <span aria-hidden="true" class="glyphicon glyphicon-trash"> Delete</span>
        </button>
   </div>

所以，這就是我們彈出的 div。現在，我可以將內容放在 UP 中，因此面板中沒有回發不會導致它關閉。（但這意味著取消按鈕、保存按鈕，甚至洗掉按鈕代碼都將負責關閉對話框。

編輯：帶有 runat=server 的 div

不清楚您是否使用 div 背后的代碼。您可以洗掉 div 的“id”和 runat=server。但是，我經常需要（并且想要）后面的代碼才能使用該 div。

因此，要讓 jquery 作業，然后將其添加到 div：

 <div id="EditRecord" runat="server" 
    style="float:left;display: none" clientidmode="Static"  >

但是，話又說回來，如果您的代碼后面不需要那個 div 作為代碼后面的控制元件，那么就不需要 runat=server。

但是，如果您在 jquery.UI 中選擇的 div 確實有一個 runat=server 標簽，您可以使用 clientIDmode="static"，或者您可以將 jQuery 更改為：

var MyDialog = $('#<%= EditRecord.ClientID %>').dialog

因此，我不建議或建議為 div 添加 runat=server，但前提是您需要它（在我的示例中，我確實需要它）。

Edit2：母版頁示例：

所以，說我有這個：

            <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
            <asp:ScriptReference Name="WebFormsBundle" />
            <%--Site Scripts--%>
        </Scripts>
    </asp:ScriptManager>

            <script src="Scripts/jquery-ui.js"></script>
            <link href="Scripts/jquery-ui-1.12.1.css" rel="stylesheet" />

（我最喜歡 - 所以我為 jQuery.ui 添加了 jquery.ui 和 .css

然后再往下看，選單（同樣是最刪減的）。

我們有這個：

                    <li><a runat="server" href="~/About">About</a></li>
                    <li><a runat="server" href="~/Contact">Contact</a></li>
                    <li><a onclick="HotelEdit();">Edit Hotel</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div id="HotelDialog" style="display:none">
        <uc1:HotelEd1 runat="server" id="HotelEd1" />
    </div>

    <script>
        function HotelEdit() {
                $("#HotelDialog").dialog({
                    width: 740,
                    height: 340,
                    modal: true,
                    title: "Edit Hotel",
                    appendTo: "form"
                });
            } 
    </script>

請注意我是如何將附加添加回的。

所以，當我們運行時，我們得到：

從 AsyncPostBackTrigger 上的 ASP UpdatePanel 中的文本框中檢索值

所以，我的用戶控制元件確實彈出。并注意我是如何重新引入 appendTo: "form" 的。由于站點主機實際上是“表單”頁面，因此可能需要 appendTo 才能使彈出視窗內的按鈕正常作業。

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484751.html

標籤：jQuery 网阿贾克斯 VB.net

上一篇：為什么發布與發布后我的表單看起來如此不同？

下一篇：使用.Contains和List(OfStructures

從AsyncPostBackTrigger上的ASPUpdatePanel中的文本框中檢索值

編輯：帶有 runat=server 的 div

Edit2：母版頁示例：