模态框中点击按钮未触发。

Question

[在同一页面上将文本框的值分配给模态框已得到答复]

新问题： 为什么我点击按钮时模态框上的按钮没有被触发？我有遗漏什么吗？

我已经在服务器端添加了处理点击事件的代码：

Protected Sub Save_Button_Click(sender As Object, e As System.EventArgs) Handles Save_Button.Click
    //The code goes here
End Sub

请看下面标有线的代码。

---

我有以下代码用于在单击LinkButton后显示模态框。我想要做的是如何将Textbox的值与之关联。

我有一个GridView：

<asp:GridView ID="GV1" runat="server" DataSourceID="DS1" >
  <Columns>
    <asp:BoundField HeaderText="ID" DataField="ID"/>
    <asp:TemplateField ShowHeader="False">
      <ItemTemplate>
        <asp:LinkButton ID="Edit_Linkbutton" runat="server" CausesValidation="False" >
          <asp:Image ID="Edit_Linkbutton_Image" runat="server" ImageUrl="~/edit.png"></asp:Image>
        </asp:LinkButton>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

在同一个页面上（这是一个div，作为模态框，在点击GridView上的LinkButton后显示）：

<div id="dialog-form" title="Modal Box">
    <input type="text" id="Textbox1" />

    #--------------------------------------------------------------------#
    #This button didn't get fired while clicked
    <asp:Button ID="Save_Button" runat="server" Text="Save"></asp:Button>
    #--------------------------------------------------------------------#

</div>

然后我通过代码绑定将一个Javascript函数附加到LinkButton：

Dim myLinkButton As LinkButton

For i As Integer = 0 To GV1.Rows.Count - 1
  myLinkButton = DirectCast(GV1.Rows(i).Cells(1).FindControl("LinkButton"), LinkButton)
  myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + .Rows(i).Cells(0).Text & "'); return false;")
Next

Rows(i).Cells(0) 是 Gridview 的第一列，它是 "ID"。

Javascript 代码与 Gridview 代码在同一页上：

<script>
function shopModalPopup(id){
//show the modal-box
    $("#dialog-form").dialog("open");
    // ---> How to assign the 'id' value to the Textbox1 on the modalbox?
} 

$(function () {
    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true
    });
});
</script>

上面的代码打开了模态框，但没有将值分配给模态框上的Textbox1。

我要问的是如何将Id值分配给模态框上的Textbox1？我已经尝试搜索相关文章，但它们将模态框分离到其他页面。但在这种情况下，模态框与单击的Linkbutton位于同一页上。我该怎么做？非常感谢。

- mrjimoy_05

---

查询字符串（“id”）的值是否与您的链接按钮ID相同？ - NiK

@NiK：不，这是不同的。查询字符串上发布的ID是通过数据源从GridView绑定的。 - mrjimoy_05

Answer 1

如果您的后台未触发，则很可能是因为您的模态框不在带有runat=server的表单内。当使用jQuery UI对话框时，我曾经遇到过这种情况。您需要将模态框移回<form></form>标签内。

在初始化模态框后，请尝试执行以下操作：

$("#dialog-form").parent().appendTo('form:first');

- Jeremy Smith

Answer 2

您可以像这样绑定JavaScript事件...

<asp:LinkButton ID="LinkButton" runat="server" OnClientClick="SomeMethod();" />

另一种方法是在代码后台绑定JavaScript方法，这样您就可以拥有更多的控制权，例如此处的示例。

如果您要将参数传递到JavaScript函数中，例如您正在JavaScript中传递两个参数，则应该像下面这样定义您的函数

function SomeFunction(arg1, arg2)
{

//your statements

}

- Adil

---

明白了，我已经编辑了代码。请看一下。但现在的问题是如何从JavaScript中获取传递的值并将其打印到模态框中？ - mrjimoy_05

假设你在JavaScript中传递两个参数，那么你应该像这样定义函数：function SomeFunction(arg1, arg2){//你的语句} - Adil

是的，但是如何将 'arg1' 分配给弹出框上的文本框？我尝试使用 document.getElementById(Textbox1).value = id; 但它重新加载了页面并使模态框消失了。 - mrjimoy_05

你需要将你的模态对话框页面传递给子窗口，请按照以下链接操作：http://www.codeproject.com/Articles/4980/Modal-popup-dialog-window-with-multiple-parameters - Adil

谢谢，但这不是我的意思。我想要它不在单独的窗口（子窗口），而是在同一个窗口中... - mrjimoy_05

我误解了，看这个链接：https://dev59.com/SXRC5IYBdhLWcg3wJNqf - Adil

Answer 3

没有测试但应该可以工作。

我认为你也可以避免使用内联JS，只需绑定buttonLink的点击事件即可。

#dialog-form { display:none } /* CSS */

<script>  /* JS */
/* Assuming all dialogs share the same default Settings in this grid scenario */
var grid_modal_options = {
        height: 300,
        width: 350,
        modal: true
};
function shopModalPopup(id){
    var DataField = id;
    grid_modal_options.open = function(){
        $('#dialog-form #Textbox1').val( DataField );
        // OR
        // $('#dialog-form').find('textarea').val( DataField );
    };

    $("#dialog-form").dialog(grid_modal_options);
} 
</script>

- Luca Filosofi

---

谢谢。但现在的问题是模态框出现在页面底部（即使我没有点击Linkbutton）。我尝试使用autoOpen: false，但这会导致模态框在我点击Linkbutton时不想出现。如何解决？ - mrjimoy_05

这是我的代码应该做的事情：只有在单击LinkButton时才显示。请按如下操作：删除 autoOpen: false 并为您的对话框添加CSS #dialog-form { display:none }。 - Luca Filosofi

嗨 aSeptik，我有一个问题。我知道这可能不太相关，但是为什么模态框上的按钮在点击时没有响应？这已经在服务器端代码中处理过了。 - mrjimoy_05

你的意思是什么？哪个按钮？ - Luca Filosofi

请查看上面的代码。我已经在对话框表单div上添加了一行。 - mrjimoy_05