We Keep Coding

Setting ModalPopupExtender TargetControlID to LIstView Button

I am wondering how I am able to set the TargetControlID of my ModalPopupExtender to the Button on my ListView.
The button that I am trying to set the TargetControlID to is in the Alternating and Item template on the ListView. So I believe I would need to set the TargetControlID to either two buttons, or have two different ModalPopupExtenders.
Here is my ModalPopupExtender:
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background" OnLoad="mp1_Load">
</cc1:ModalPopupExtender>
And here is the alternating template for my listview:
<AlternatingItemTemplate>
<!--Input fields that do not apply to the question-->
..
..
..
<asp:Button ID="Button1" runat="server" Text="Show Popup" />
</AlternatingItemTemplate>
This will be the exact same setup for the ItemTemplate.

You could use java-script to do the job instead:
<a id="showModalPopupClientButton" href="#">Open pop-up</a>
<a id="hideModalPopupViaClientButton" href="#">Close pop-up</a>
<script type="text/javascript">
// Add click handlers for buttons to show and hide modal popup on pageLoad
function pageLoad() {
$addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);
$addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);
}
function showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hideModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
UPDATE (using server side)
You need to set a fake server button(display: none) as a target control id to your popup extender first:
<asp:Button ID="Button1" runat="server" Style="display: none;" />
<cc1:ModalPopupExtender ID="mp1" runat="server"
PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background"
OnLoad="mp1_Load">
</cc1:ModalPopupExtender>
on your code behind whenever you want to display or close the popup, you just need to call the following functions:
mp1.Show(); //to display popup
mp1.Hide() //to close popup

How do I execute javascript from code behind where the button inside an updatepanel

How do I execute javascript from code behind where the button inside an updatepanel
I want to open a div inside a fancybox and I am opening it from code behind
and It is working
but I want to put the button inside an updatepanel
but after that the javascript is not triggering
maybe because I am putting it inside document.ready
what else we can put the trigger in to work
html
<a id="various" runat="server" href="#inline" style="visibility: hidden"></a>
<asp:Literal ID="fancyLtr" runat="server"></asp:Literal>
<asp:UpdatePanel ID="UpdatePanel6" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
javascript
$(document).ready(function () {
$("#ContentPlaceHolder1_various").fancybox();
});
code behind
protected void Button1_Click(object sender, EventArgs e)
{
various.Attributes["href"] = "#inline";
fancyLtr.Text = "<script>jQuery(document).ready(function() {$(\"#ContentPlaceHolder1_various\").trigger('click');});</script>";
}
Thanks in advanced

My button opens my modal popup window, but the c# codebehind connected to the button does not fire

I have a button that opens a modal popup, but before I open the modal popup, I want my "OnClick" event for the "btnSaveAndScheduleTask" button to fire. I am using ASP.NET 4.5 / Visual Studio 2012 / HTML5 / CSS3
My aspx (snipet):
How do I get the codebehind OnClick event for my "btnSaveAndScheduleTask" button to fire? If the entire code would help figure it out, let me know, but I'm probably missing something simple (bear in mind that I want to be able to view all my asp controls from the C# codebehind):
<asp:Button ID="btnSaveAndScheduleTask" runat="server" CausesValidation="true"
OnClientClick="javascript:return validatePage();" OnClick="btnSaveAndScheduleTask_Click"
Font-Bold="true" Text="Schedule Task" />
<ajaxToolkit:ModalPopupExtender ID="mpeScheduleTask" runat="server" ValidateRequestMode="Enabled"
BackgroundCssClass="modalBackground" CancelControlID="btnCancSchedule"
PopupControlID="pnlScheduleTask" TargetControlID="btnSaveAndScheduleTask" DropShadow="true" >
</ajaxToolkit:ModalPopupExtender>
<div id="divScheduleTask" runat="server">
<asp:Panel ID="pnlScheduleTask" Height="310" Width="690" BackColor="#ece4e1" ForeColor="Black" runat="server" >
<asp:UpdatePanel runat="server" ID="udpScheduleTask" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label ID="lblTaskSch" Visible="false" Font-Bold="true" Text="Task Scheduling: " runat="server" />
<asp:Button ID="btnSaveSchedule" runat="server" OnClick="btnSaveSchedule_Click" Text="Save Schedule" />
</div><asp:Button ID="btnCancSchedule" runat="server" Text="Canc" />
</ContentTemplate></asp:UpdatePanel></asp:Panel></div>
I've left out most of the panel as it's huge... here is my validatePage() Javascript:
<script type="text/javascript">
function validatePage() {
//Executes all the validation controls associated with group1 validaiton Group1.
var flag = window.Page_ClientValidate('vTask');
if (flag)
//Executes all the validation controls which are not associated with any validation group.
flag = window.Page_ClientValidate();
if (!Page_IsValid) {
$find('mpeScheduleTask').hide();
}
return flag;
}
</script>
My aspx.cs code behind:
protected void btnSaveAndScheduleTask_Click(object sender, EventArgs e)
{
//do stuff
}

Remove TargetControlID="btnSaveAndScheduleTask" , give other dummy control's ID
So when button clicks, click will take user to server , in code behind you need to manually open popup.
This is given here...!!!!
http://www.codeproject.com/Tips/215040/ModalPopupExtender-from-Server-Side-Code

I would put the javascript to be called in the behind code in your button click..
protected void btnSaveAndScheduleTask_Click(object sender, EventArgs e)
{
// do stuff.
Page.ClientScript.RegisterStartupScript(this.GetType(), "Call my function", "validatePage();", true);
}
this is how I do most of mine. Hope this helps.
And your ASP should look like..
<asp:Button ID="btnSaveAndScheduleTask" runat="server" CausesValidation="true" OnClick="btnSaveAndScheduleTask_Click" Font-Bold="true" Text="Schedule Task" />

Show and hide div in C# don't work

I'm working on a web application in C# .net, using twitter bootstrap in frontoffice.
In onClick button I need to show a div that contains a progressBar div and when the process finish, hide the div. I'm using this code:
web.aspx:
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="btnProcess_Click" />
// on load web, this div is invisible
<div class="progress progress-striped active invisible" id="progressBar" runat="server">
<div class="bar" style="width: 90%;" id="percentProgresBar"></div>
</div>
And my web.aspx.cs:
protected void btnProcess_Click(object sender, EventArgs e){
// here change class to "visible"
progressBar.Attributes["class"] = "progress progress-striped active visible";
//--- all my process ----
//--- all my process ----
//when my process finish, hide the div again, change the css class to "invisible"
progressBar.Attributes["class"] = "progress progress-striped active invisible";
}
My problem is the div is visible when my process ends, not at the beginning. How can I resolve this? tTo make visible the div before --- all my process ---- and when finish that part of my code, to make the div invisible again.
Thanks for your help!!

You can try changing/converting your div to a server-side control by giving it an ID and add runat="server" , then use it in your code.

instead of using those classes, give the attribute Style="display:none" to hide and Style="display:" to make it visible but that wont serve your purpose. But for displaying the progress bar you can simply use Update Progress
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="upd" onclick="updButton_Click"
text="click to update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
In code behind updButton_Click takes a long time to update, during the period you will see Loading... on the page, you can change the text to a to make it more like a ProgressBar(such as a GIF moving-bar image)

Jqueryui Dialog form problem

I'm using jqueryui dialog function to display my registration form. I have no problem with opening the dialog and displaying register.aspx file in the div. However I have a register button which I would like to use to save the form data into the database. But when I click to that button, it closes the dialog box and redirects the page to the register.aspx. I tried to disable usesubmitbehavior but that didn't help it completely blocks the function of the button.
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" UseSubmitBehavior="False" />
protected void Button1_Click(object sender, EventArgs e)
{
firstName.Disabled = true; // this will be replaced for db data entry. It was just to see if the function is working or not.
}

Use OnClientClick to prevent the default behaviour of form submission upon click. If you do this you will need perform an ajax request to your server yourself.
<asp:Button ID="Button1" OnClientClick="handleRegistrationClientSide(); return false;" runat="server" Text="Button" UseSubmitBehavior="False" />
Otherwise wrap your dialog's inner content in an update panel, and trigger it on the button to cause an async postback.
<div id="myDialog">
<asp:UpdatePanel runat="server">
<ContentTemplate>
...
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
</div>