How can I set TragetContriID to a HyperLink that is inside a GridView?
I tried this :
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="Panel1"
CancelControlID="btnCancel"
OnCancelScript="HideModalPopup()"
TargetControlID="GridView1$HyperLink1">
</asp:ModalPopupExtender>
But I have an error: that there is no GridView1$HyperLink1
Setting the TargetControlID of the ModalPopupExtender basically trigger the client side Show function of that ModalPopup when the control is clicked. So you need to wire up the controls yourself.
First, since the ModalPopupExtender need a TargetControlID, you should add a dummy control to link the modal popup to :
<asp:Button runat="server"
ID="HiddenTargetControlForModalPopup"
style="display:none"/>
And link the ModalPopupExtender TargetControlID to it
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="Panel1"
CancelControlID="btnCancel"
OnCancelScript="HideModalPopup()"
TargetControlID="HiddenTargetControlForModalPopup">
</asp:ModalPopupExtender>
So the ModalPopupExtender now has a target that do nothing. Now we now need to do the target's job. You need a javascript function to show the ModalPopup from client side.
<script type="text/javascript">
var ModalPopup='<%= ModalPopupExtender1.ClientID %>';
function ShowModalPopup() {
// show the Popup
$find(ModalPopup).show();
}
</script>
Then you should map the OnClientClick event of the control in your gridview to this javascript function. From your code, I see that you use a asp:HyperLink, I don't think it support the OnClientClick event, so you probably need to switch it to a asp:LinkButton.
<asp:LinkButton ID="LinkButton1" runat="server"
OnClientClick="ShowModalPopup()" />
Related
In ASP.NET when using validation controls (i.e. RequiredFieldValidator) the client sided framework will execute the JS function Page_ClientValidate. This function will validate all controls on the page (of the given ValidationGroup) and call the JS function ValidatorUpdateDisplay with a parameter of the DOM element of the span tag of the validator control.
ValidatorUpdateDisplay toggles the visibility of the span tag depending on the result of the validation.
In my web application I've overridden the ValidatorUpdateDisplay JS function to provide more functionality on the validation scenario (i.e. red borders around the controls, showing popover on the first failed control and scrolling to it).
Now this works very well until my controls (incl. submit button) are shown the first time after a postback in an UpdatePanel.
<asp:ScriptManager runat="server" />
<asp:UpdatePanel ID="upTest" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button ID="bShow" runat="server" UseSubmitBehavior="false" Text="SHOW" OnClick="bShow_Click" />
<asp:Panel ID="pContent" runat="server" Visible="false">
<asp:TextBox ID="tbTest" runat="server" />
<asp:RequiredFieldValidator ID="rfvTest" runat="server" ControlToValidate="tbTest" Text="Not valid" />
<asp:Button ID="bTest" runat="server" UseSubmitBehavior="false" Text="TEST" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
function ValidatorUpdateDisplay(val) {
debugger; // this will not be reached
}
</script>
protected void bShow_Click(object sender, EventArgs e)
{
this.pContent.Visible = true;
}
After initial load press bShow to display pContent.
Now, if you leave tbTest.Text empty and press on bTest it should enter the overridden ValidatorUpdateDisplay function, however it enters the function of the framework and displays "Not valid" from rfvTest.
If you change pContent.Visible to true and press bTest after initial load the desired effect will happen: It will enter the custom ValidatorUpdateDisplay function and not display "Not valid".
If you move the button bTest out of the UpdatePanel the problem persists.
How can I make it work inside an UpdatePanel?
ASP.NET uses a lazy loading approach to insert the ValidatorUpdateDisplay function when it needs it the first time, hence in my example it will load the function after the postback of the UpdatePanel.
This will override my own implementation of the ValidatorUpdateDisplay function, because it's inserting the function at the end of the page.
There is a dirty workaround, I just inserted an empty CustomValidator on initial load that is always valid:
<asp:CustomValidator runat="server" />
I wish there was a cleaner solution.
There is a textbox on a ContentPage. When the user presses Enter in that textbox I am trying to fire a 'Submit' button on this ContentPage. I'd like to fire off that particular button's event.
Instead, there is a search textbox & button on the top of the page from a MasterPage, and this search button's event fires off.
How do I control to fire off this ContentPage's submit button, instead of the MasterPage's search button?
I am using Ektron CMS for my content management.
The easiest way is to put the fields and button inside of a Panel and set the default button to the button you want to be activated on enter.
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
if you need to do it from code, use
Me.Form.DefaultButton = Me.btn.UniqueID
Where btn is your button control.
You can use the DefaultButton property on either a server-side form control or Panel control. In your case, group the controls together in a Panel that should fire off the same button:
<asp:Panel ID="SearchBox" runat="server" DefaultButton="BtnSearch">
...
<asp:Button ID="BtnSearch" runat="server" Text="Search!" />
</asp:Panel>
....
<asp:Panel ID="UserPanel" runat="server" DefaultButton="BtnUserSubmit">
...
<asp:Button ID="BtnUserSubmit" runat="server" Text="Submit" />
</asp:Panel>
You can now use UseSubmitBehavior property to disable all the buttons you don't want to fire when hitting submit (check out the documentation for more info)
<asp:Button ID="BtnNotToFIre" runat="server" Text="Search" UseSubmitBehavior="false" />
Microsoft say:
<form id="Form1"
defaultbutton="SubmitButton"
defaultfocus="TextBox1"
runat="server">
enter link description here
$(document).ready(function(){
document.getElementById("text_box_id")
.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("button_id").click();
}
});
});
I am trying to use AJAXControlToolkit’s Modelpopu with ConfirmDialog.I am using VS2008. Following is my code
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
<asp:ConfirmButtonExtender ID="btnSave_ConfirmButtonExtender" runat="server"
ConfirmText="Want to Save?" Enabled="True" TargetControlID="btnSave">
</asp:ConfirmButtonExtender>
<asp:ModalPopupExtender ID="btnSave_ModalPopupExtender" runat="server"
DynamicServicePath="" Enabled="True" TargetControlID="btnSave">
</asp:ModalPopupExtender>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
Please guide me what should I do to make it run.
From the AJAX Control Toolkit documentation for the ConfirmButtonExtender:
http://www.asp.net/ajax/ajaxcontroltoolkit/samples/ConfirmButton/ConfirmButton.aspx
DisplayModalPopupID - Optionally specifies the ID of a ModalPopup control to use for displaying the confirmation dialog (instead of window.confirm). When using DisplayModalPopupID, the following conditions must be met:
The ModalPopup must be configured to work against the same TargetControlID as the ConfirmButton (and should work properly if the ConfirmButton is disabled).
The ModalPopup must specify OkControlID and/or CancelControlID to identify the buttons corresponding to window.confirm's OK/Cancel buttons.
The ModalPopup must not specify OnOkScript or OnCancelScript.
Example of using the AJAX controls together in your page:
<asp:ConfirmButtonExtender ID="btnSave_ConfirmButtonExtender" runat="server"
ConfirmText="Want to Save?" TargetControlID="btnSave"
DisplayModalPopupID="btnSave_ModalPopupExtender"></asp:ConfirmButtonExtender>
<asp:ModalPopupExtender ID="btnSave_ModalPopupExtender" runat="server"
TargetControlID="btnSave" PopupControlID="Panel1"
OkControlID="btnOK" CancelControlID="btnCancel"></asp:ModalPopupExtender>
Where Panel1 is an <asp:Panel> that gets displayed as the modal dialog, and btnOK and btnCancel are the OK and Cancel buttons on that panel.
Hi I found code similiar to the following online. It's seems really great for getting a button buried in a repeater control to trigger a full cycle back to the server.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="HiddenButton" />
</Triggers>
</asp:UpdatePanel>
<!--Make a hidden button to treat as the postback trigger-->
<asp:Button ID="HiddenButton" runat="server" Style="display: none" Text="HiddenButton" />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<ItemTemplate>
<!--when cick the button1, it will fire the hiddenButton-->
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>' OnClientClick="$get('HiddenButton').click();return false;"
runat="server" />
</ItemTemplate>
</asp:Repeater>
It uses a hiddenButton to achieve this by hooking the click event of the original button to this one. However my addition to this was the setting of the CommandArgument for the button. I would also need it to be set for the HiddenButton.
Does anyone know a way of going about this?
First I will like to explain the Disadvantage of using the Update Panel using the very same example posted by you.
Below is the Original Code
Output
To display the 22 character string you can check how much data is being received and sent to server. Just imagine following
If you would consider send each request to Database using Update Panel and your GridView is in Update Panel!!!!!!
Suppose you would use ViewState data for each request and with GridView Inside the Update Panel.
Both the above techniques are worst as per my understanding.
Now I will describe you Page Methods
Page Method over Update panel
Page Methods allow ASP.NET AJAX pages to directly execute a Page’s Static Methods, using JSON (JavaScript Object Notation). Instead of posting back and then receiving HTML markup to completely replace our UpdatePanel’s contents, we can use a Web Method to request only the information that we’re interested.
Sample Code
Output
Hope this clearly explains the difference of usage.
Answer to the original Query
You have to register the ItemDataBound event of the below Repeater and use below code for it.
Code Behind
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
Button btn = (Button)e.Item.FindControl("Button1");
btn.OnClientClick = string.Format("SubmitButton('{0}');return false;"
, HiddenButton.ClientID);
}
}
JavaScript
<script type="text/javascript">
function SubmitButton(btn)
{
$("#" + btn).click();
}
</script>
//Alternative
<script type="text/javascript">
function SubmitButton(btn)
{
document.getElementById(btn).click();
}
</script>
Reference & Here
Your HiddenButton control is a server control but you are trying to access it in JQuery using it's ASP.Net ID,
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>' OnClientClick="$get('**HiddenButton**').click();return false;"
runat="server" />
A quick way to fix it is to make a separate function,
<script type="text/javascript">
function SubmitButton(btn)
{
$get("#" . btn).click();
}
</script>
and change your button code to ,
<asp:Button ID="Button1" Text="Trigger" CommandArgument='<%# Eval("Id") %>'
runat="server" />
In code behind, in repeater's ItemDataBound event, find the button and HiddenControl and set Button1's OnClientClick property,
Button1.OnClientClick= string.Format("SubmitButton('{0}');return false;",HiddenButton.ClientID);
I am creating a ModalPopupExtender inside a Web User Control.
When i click on the OK Button in the panel, which is showing as model popup, the Event Handeler of the button is not executing.
This problen does not occure when i do not use the Web User Control.
Here is the user control (.ascx) file code.
<script type="text/javascript" language="javascript">
function OkClicked(sender, e) {
__doPostBack('Button1', e);
}
</script>
<asp:Button ID="Button2" runat="server" Text="Show" />
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
DropShadow="True" OkControlID="Button1" PopupControlID="Panel1"
TargetControlID="Button2" onokscript="OkClicked()">
</asp:ModalPopupExtender>
<p>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</p>
And the Event Handeler for the click event of the 'Button1' is
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
}
In the javascript you shouldn't put 'Button1' as the name of the control. Instead, on the PreRender event of your control, fill that out with this.Button1.ClientID .
ClientID is the unique identifier across the entire generated page of your button control, allowing the server to pinpoint exactly what control triggered the postback.
If this wasn't like that, you wouldn't be able to place multiple instances of a same control on one page.
In code:
<script type="text/javascript" language="javascript">
function OkClicked(sender, e) {
__doPostBack('<%= this.Button1.ClientID %>', e);
}
Couple of suggestions:
Do you have any kind of validation on this page. If so, then it's possible that when you click the ok button, that validation is failing. When you click the button, likely the ModalPopup Extender will close, and if validation fails it may cancel the event happening. If this is the case, add an attribute: CausesValidation="false"
If that doesn't work, you may add an attribute to MAKE it post back, I believe there's an attribute -> AutoPostBack="true".
#Joachim is correct that you'll need to use the clientID, but at the same time, I don't think you'll need to call javascript to run the backend code.
Also, you may consider putting this into an UpdatePanel so that you do an AJAX postback without sending the entire page back and forth when the page is posted back.