[Assign a Textbox Value to the modal-box on the same page
has been answered]
[将文本框值分配给同一页面上的模式框已被回答]
NEW QUESTION: Why the button on the modal-box didn't get fired while I've clicked the button? Am I missing something?
新问题:当我点击按钮时,为什么模态框上的按钮没有被触发?我错过了什么吗?
I've added the code to handle the click event on the server side:
我添加了代码来处理服务器端的click事件:
Protected Sub Save_Button_Click(sender As Object, e As System.EventArgs) Handles Save_Button.Click
//The code goes here
End Sub
Pls see the code below with the marked line.
请使用标记的行查看下面的代码。
I have the code below to show the modal-box after a LinkButton clicked. And, what I want to do is how to assign the Textbox value with the.
我在下面的代码中显示了点击LinkButton后的模态框。而且,我想要做的是如何分配文本框值。
I have a gridview:
我有一个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>
And on the same page (this is a div as modal-box to be showed after the Linkbutton on the Gridview clicked):
并在同一页面上(这是一个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>
And then I attach a Javascript function to the LinkButton through code-behind:
然后我通过代码隐藏将一个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)
is the first column on the Gridview, it is "ID
".
行(i)。细胞(0)是Gridview上的第一列,它是“ID”。
The Javascript code is on the same page as the Gridview code:
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>
The code above do open the modal-box but not assign the value to the Textbox1 on the modal-box.
上面的代码确实打开了模态框,但没有将值赋给模态框上的Textbox1。
What I am gonna ask is how to assign the Id
value to the Textbox1
on the modal-box? I have try to search any relevant article but they do separate the modal-box onto the other page. But in this case, the modal-box is on the same page as the Linkbutton clicked. How can I do that? Thank you very much.
我要问的是如何将Id值分配给模态框上的Textbox1?我试图搜索任何相关的文章,但他们确实将模态框分开到另一页。但在这种情况下,模态框与点击链接按钮位于同一页面上。我怎样才能做到这一点?非常感谢你。
3 个解决方案
#1
1
not tested but should work.
没有测试但应该工作。
i think you can also avoid to use inline js and just bind the click event of the buttonLink
我认为你也可以避免使用内联js,只需绑定buttonLink的click事件
#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>
#2
1
You can bind javascript event like this...
你可以像这样绑定javascript事件......
<asp:LinkButton ID="LinkButton" runat="server" OnClientClick="SomeMethod();" />
other way you can bind javascript method in code behind where you have more control an example is here
另一种方法是你可以在代码后面绑定javascript方法,你可以在这里控制一个例子
If you are passing arguments into your javascript function, for instance you are passing to arguments in javascript then you should define you function like
如果你将参数传递给你的javascript函数,例如你在javascript中传递参数,那么你应该定义你的函数
function SomeFunction(arg1, arg2)
{
//your statements
}
#3
1
If you're post back is not firing it is likely that your modal is not within your form with runat=server
. I've run into this before when using the jQuery UI Dialog. You'll need to move the modal back inside the <form></form>
tags.
如果您的回发没有解雇,那么您的模态很可能不在您的表单中,而是使用runat = server。我在使用jQuery UI Dialog之前遇到过这种情况。您需要将模式移回
Try this after you've initialized your modal:
在初始化模态后尝试这个:
$("#dialog-form").parent().appendTo('form:first');
。$( “#对话框的形式”)父()appendTo( '形式:第一');
#1
1
not tested but should work.
没有测试但应该工作。
i think you can also avoid to use inline js and just bind the click event of the buttonLink
我认为你也可以避免使用内联js,只需绑定buttonLink的click事件
#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>
#2
1
You can bind javascript event like this...
你可以像这样绑定javascript事件......
<asp:LinkButton ID="LinkButton" runat="server" OnClientClick="SomeMethod();" />
other way you can bind javascript method in code behind where you have more control an example is here
另一种方法是你可以在代码后面绑定javascript方法,你可以在这里控制一个例子
If you are passing arguments into your javascript function, for instance you are passing to arguments in javascript then you should define you function like
如果你将参数传递给你的javascript函数,例如你在javascript中传递参数,那么你应该定义你的函数
function SomeFunction(arg1, arg2)
{
//your statements
}
#3
1
If you're post back is not firing it is likely that your modal is not within your form with runat=server
. I've run into this before when using the jQuery UI Dialog. You'll need to move the modal back inside the <form></form>
tags.
如果您的回发没有解雇,那么您的模态很可能不在您的表单中,而是使用runat = server。我在使用jQuery UI Dialog之前遇到过这种情况。您需要将模式移回
Try this after you've initialized your modal:
在初始化模态后尝试这个:
$("#dialog-form").parent().appendTo('form:first');
。$( “#对话框的形式”)父()appendTo( '形式:第一');