I have created 2 modaldialogs. My problem is that I need to show them from server-side if a few conditions are met (after clicking a button). I've been googling around and there was a solution to add the extender to an invisible control and launch it from code.
But since there's nothing showing, I suppose I'm doing something wrong. I tried it with a click on the linkbutton, to see if that was working and this is showing the dialog.
Thanks in advance.
Markup:
<asp:LinkButton ID="lnkPrompts" runat="server">LinkButton</asp:LinkButton>
<asp:ModalPopupExtender ID="lnkPrompts_ModalPopupExtender" runat="server"
BackgroundCssClass="modalBackground" Enabled="True"
TargetControlID="lnkPrompts" PopupControlID="pnlPromptModal"
OkControlID="pnlPromptModal">
</asp:ModalPopupExtender>
<asp:Panel ID="pnlPromptModal" runat="server" Width="350px" Height="70px"
CssClass="modalPopup" Style="display: none;">
Some text
<div style="">
<asp:Button ID="btnModalPromptOk" runat="server" Text="OK" />
</div>
</asp:Panel>
On server-side:
protected void btnViewPrompts_Click(object sender, EventArgs e)
{
if (conditionMet)
{
Response.Redirect("IvrPrompts.aspx?Id=" + breakdownView.Id);
}
else
{
//ToDo: Show modaldialogbox
lnkPrompts_ModalPopupExtender.Show(); //This does nothing...
}
}
The times that I've used the ModalPopupExtender in the way you're describing, I've wrapped them in an UpdatePanel. This is the only way to have the server side "initiate" the action like you're describing.
Well, seems it does work. The only problem was that I had a Response.Redirect right after the line lnkPrompts_ModalPopupExtender.Show(); and that was the problem. The dialog was never shown. After commenting out the Redirect, it all works as it should.
Anyway, sorry for wasting your time. Should be more awake next time when trying something new...
You need to do this from javascript on the client side. The server can never initate actions on the client, but the client can ask the server if the condition is met and take actions based on that. The way you want to do this is probably by performing an Ajax background call from the client to the server when the button is pressed.
Related
In my web application I need a functionality so that when users click on textbox to input values, it should make the button and the other fields visible?
I am using the code provided below but, could not get it working.
C#:
protected void TextBox1_Click(object sender, EventArgs e)
{
ButtonSearch.Visible = true;
}
ASP.NET:
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" OnClick="TextBox1_Click"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" OnClick="ButtonSearch_Click" Text="Search" Visible="False" />
How to accomplish this?
Set AutoPostback="True". This way the event will be fired server-side, and the button will become visible.
<asp:TextBox ID="TextBox1" runat="server" OnTextChanged="TextBox1_TextChanged" OnClick="TextBox1_Click" AutoPostBack="true"></asp:TextBox>
However, if you only want to toogle visility of a button, you really should considerate javascript. This will save a trip back to the server.
<asp:TextBox onclick="txtBox1_ClientClicked()" ID="TextBox1" runat="server" OnClick="TextBox1_Click"></asp:TextBox>
<asp:Button ID="ButtonSearch" runat="server" OnClick="ButtonSearch_Click" Text="Search" style="display:none;" />
<script type="text/javascript">
function txtBox1_ClientClicked(){
var theButton = document.getElementById('<%=ButtonSearch.ClientID%>');
theButton.style.display = 'block';
}
</script>
You do not need to post back to the server to accomplish your job. You can use client side onFocus event and javascript/jquery, for example.
I know I used an input of type text, and you are using an ASP Control which posts on server, but here is a JSFiddle to get you on the right track: http://jsfiddle.net/Mmjtz/1/
$("<%= ButtonSearch.ClientID %>").click(function(){
$("#TextBox1").show():
});
In this code you need to pass fields ID which you want to visible on the click of button.
Put the textbox inside a div and use the div's onClick event from codebehind. It's not what you asked but it works for me without any errors. Here is a javascript function to implement requested event:
function toggleVisibility()
{
document.getElementById('TextBox1').disabled = true;
/*
...some other code...
*/
}
And of course, you have to define your onclick event at the div definition after implementing this JS function.
<div id="TBdiv" onClick="toggleVisibility()">
<asp:TextBox ID="TextBox1"..../>
</div>
IMPORTANT: Since you now disabled your TextBox from codebehind, you have to enable it in somewhere before you want to use it again. Otherwise you will not see it while the page is running.
jQuery is the perfect solution for your problem. The code would be something like this:
$("#TextBox1").on("click",function(){$("#ButtonSearch").css("visibility", "visible");})
You include the script by adding <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> to the page and then you can add the piece of code above to within <script></script> tags.
I'm using CodeMirror in an ASP.NET web application. The web app uses UpdatePanel (ajax).
In ajax postback, I'm not able to get updated text from the CodeMirror textbox on server side and after the postback, the text gets reset. This WORKS if I don't use an update panel. What am I missing?
Below is the code mirror code:
editor = CodeMirror.fromTextArea(document.getElementById("<%=txtLua.ClientID%>"), {
matchBrackets: true,
theme: "neat",
pollInterval: 100,
continuousScanning: 500
});
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtLua" Height="320" Width="600" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="btn" />
</ContentTemplate>
</asp:UpdatePanel>
Is there an asp.net/C# sample for using CodeMirror? Any help is appreciated.
The short answer is: create a javascript event hook that fires early (before the UpdatePanel begins to do its work) and manually calls CodeMirror's .save() function.
The problem seems to arise because the auto-magic form.submit override that CodeMirror supplies is triggered after the ScriptManager has already passed the ViewState of the panel back to the server. This means the server only receives the TextBox in its initial state (CodeMirror hasn't put what you've typed into it yet). I checked the DOM events in Chrome and ScriptManager's hook was consistently ahead of the form.submit override that CodeMirror added.
I got around this by adding an .onclick to the submit button right after CodeMirror loaded. Using your example:
var editor = CodeMirror.fromTextArea(document.getElementById("<%=txtLua.ClientID%>"), {
leaveSubmitMethodAlone: true, //since you don't need this anymore, no reason to complicate your DOM
matchBrackets: true,
theme: "neat",
pollInterval: 100,
continuousScanning: 500
});
window['cmLocalStateEvent'] = function () { editor.save(); };
//saveButton = document.getElementById("<%=btn.ClientID%>"); //grab the save button
//if (saveButton) {
// saveButton.onclick = function () { editor.save(); }; //make it do what the submit action was going to do
//}
<asp:UpdatePanel ID="upd" runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="txtLua" Height="320" Width="600" TextMode="MultiLine"></asp:TextBox>
<asp:Button ID="btn" runat="server" OnClientClick="if(window['cmLocalStateEvent'])window.cmLocalStateEvent();" OnClick="btn_Click" Text="btn" />
</ContentTemplate>
</asp:UpdatePanel>
Now the .onclick is ahead of the ScriptManager hook, and will fire first. Infact, if you put an OnTextChanged= and AutoPostBack= on the TextBox it'll fire even before the button that you just clicked does.
Essentially, the trick is to get CodeMirror's save to apply before ScriptManager submits the ViewState back to the server.
EDIT:
I've found since posting this, that you'll run into a troublesome issue if your submit button is also inside the UpdatePanel (which yours is). The .onclick will not persist after the initial submit and you'll be reset to a clean button with no event hooks. My current working solution to that scenario is adding a window['cmLocalSaveEvent'] function and adding the client .onclick to the ASP template (so the panel refresh puts it back for you). Updated code above to reflect this.
This is how I managed to make it work, just in case someone else needs it. After instantiating editor, I'm keeping the textbox aligned every time the blur event occurs.
editor.on('blur', function () {
arguments[0].save();
});
Perhaps I misunderstood the control, or very possibly am not implementing it correctly, but I've used a ModalPopupExtender much like I'd like to use a MessageBox in desktop development. The problem I'm running into is that once I call the Show() method of the ModalPopupExtender it continues to execute the server side code despite the fact that the user has not yet clicked the button set as the OkControlID. Is this the normal behavior, and or is there a way to hault code execution until the OkControlID has been clicked. To specify, I don't want to create another event in the button click handler as this popup is inline. Here is my code - any advice is appreciated.
My Control:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="ModalMessage.ascx.cs" Inherits="LB.ModalMessage" %>
<asp:Button ID="btnPopup" runat="server" style="display: none;"/>
<ajaxToolkit:ModalPopupExtender ID="ModalMessageExtender" runat="server"
OkControlID="btnOkay" PopupControlID="Panel1"
TargetControlID="btnPopup" BackgroundCssClass="modalPopupBG">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel CssClass="whitebubble" ID="Panel1" style="display: none; max-width:400px;" runat="server">
<div style="padding:5px 5px 35px 5px;">
<asp:Label ID="lblMessage" Font-Size="Medium" runat="server" ForeColor="Black"/>
<br />
<asp:Button runat="server" Text="Ok" Width="75px" Height="30px" ID="btnOkay" CssClass="modalButton gray modalButton"/>
</div>
</asp:Panel>
The control code behind:
public void ShowMessage(string message)
{
this.lblMessage.Text = message;
ModalMessageExtender.Show();
}
My content page:
<%# Register Src="~/ModalMessage.ascx" TagName="ModalMessage" TagPrefix="mm" %>
<mm:ModalMessage runat="server" ID="mpeMessage"/>
My content code behind:
mpeMessage.ShowMessage("Please enter a username before attempting to reset your password.");
UPDATE:
Sorry for the lack of clarity - let me make my question more clear. If I do the following:
mpeMessage.ShowMessage("Please enter a username before attempting to reset your password.");
Response.Redirect("Register.aspx");
The redirect occurs and the ModalPopupExtender never gets shown. I'm somewhat new to web development so please forgive me if I'm using incorrect terminology. But essentially, I want the execution of code in the code behinds to wait for the user to click "Ok". I'm trying to replace something like this:
ScriptManager.RegisterStartupScript(this, typeof(string), "Message", "alert('Your new account has been created!'); window.location='" + continueUrl + "';", true);
With something a little nicer looking, and since I'm already doing a postback anyway, I thought calling the ModalPopupExtender programmatically would be fine. Hopefully this clears up my question. Thank you all for your responses so far.
You can use validation controls , to check whether the fields are properly filled or not
for more details check the following links:
http://www.w3schools.com/aspnet/aspnet_refvalidationcontrols.asp
http://msdn.microsoft.com/en-us/library/aa479013.aspx
If i am understanding your query correctly then you want that until user does not click on "ok" button on modelpopup, user should not be able to click on page.
if you want this then add PopupDragHandleControlID="Panel1" in your modelpopup control.
<ajaxToolkit:ModalPopupExtender ID="ModalMessageExtender" runat="server"
OkControlID="btnOkay" PopupControlID="Panel1" PopupDragHandleControlID="Panel1"
TargetControlID="btnPopup" BackgroundCssClass="modalPopupBG">
</ajaxToolkit:ModalPopupExtender>
UPDATE
just replace Response.Redirect("Register.aspx"); to btnOkay click event.
on aspx page -
<asp:Button runat="server" Text="Ok" Width="75px" Height="30px" ID="btnOkay" OnClick="btnOkay_Click" CssClass="modalButton gray modalButton"/>
on aspx.cs page -
protected void btnOkay_Click(object sender, EventArgs e)
{
Response.Redirect("Register.aspx");
}
then until user will not click on "Ok" button. he/she can't redirect to Register Page.
I know there are a lot of threads about this error, but I've looked through all of them and haven't been able to make it work. It's probably something very small that I am overlooking.
This is the code I have now, in an asp:Button component
<asp:Button ID="btn_profile" runat="server" Text="Bekijk de wenslijst"
CssClass="wenslijst_preview_btn"
OnClick="btn_goToChild_Click(<%# Eval("pk_child_id") %>)"/>
I have tried multiple things, for example the following:
OnClick='btn_goToChild_Click(<%# Eval("pk_child_id") %>)'
But then I get the following error:
preprocessor directives must appear as the first non-whitespace character on a line
If you need to see more code, let me know!
OnClick is a server-side event, so should just be the name of a server-side event handler. OnClientClick (where available) is a client-side event handler, so would take a JavaScript expression to evaluate.
Try
<asp:Button ID="Button1" runat="server" Text="Button"
OnClientClick='btn_goToChild_Click(<%# Eval("pk_child_id") %>)' />
<asp:Button ID="btn_profile" runat="server" Text="Bekijk de wenslijst"
CssClass="wenslijst_preview_btn" CommandArgument='<%# Eval("pk_child_id") %>'
OnClick="btn_goToChild_Click"/>
protected void btn_goToChild_Click(object sender, EventArgs e)
{
Button btn= (Button) sender;
if (btn==null) return;
var id =btn.CommandArgument;
// Or int id=(int)btn.CommandArgument;
}
If you want to use Javascript expression, use OnClientClick not OnClick. These are different side events.
OnClick is used for server side methods only, for client side calls you should use "OnClientClick" attribute.
I'm having an annoying problem registering a javascript event from inside a user control within a formview in an Async panel. I go to my formview, and press a button to switch into insert mode. This doesn't do a full page postback. Within insert mode, my user control's page_load event should then register a javascript event using ScriptManager.RegisterStartupScript:
ScriptManager.RegisterStartupScript(base.Page, this.GetType(), ("dialogJavascript" + this.ID), "alert(\"Registered\");", true);
However when I look at my HTML source, the event isn't there. Hence the alert box is never shown. This is the setup of my actual aspx file:
<igmisc:WebAsyncRefreshPanel ID="WebAsyncRefreshPanel1" runat="server">
<asp:FormView ID="FormView1" runat="server" DataSourceID="odsCurrentIncident">
<EditItemTemplate>
<uc1:SearchSEDUsers ID="SearchSEDUsers1" runat="server" />
</EditItemTemplate>
<ItemTemplate>
Hello
<asp:Button ID="Button1" runat="server" CommandName="Edit" Text="Button" />
</ItemTemplate>
</asp:FormView>
</igmisc:WebAsyncRefreshPanel>
Does anyone have any idea what I might be missing here?
Have you tried using RegisterClientSideScript? You can always check the key for the script with IsClientSideScriptRegistered to ensure you don't register it multiple times.
I'm assuming the async panel is doing a partial page past back which doesn't trigger the mechansim to regenerate the startup scripts. Perhaps someone with a better understanding of the ASP.Net Page Life Cycle and the CLR can fill in those blanks.
For me that works fine. resizeChartMid() is a function name.
ScriptManager.RegisterStartupScript(this, typeof(string), "getchart48", "resizeChartMid();", true);
Try this, i got the same issue
ScriptManager.RegisterClientScriptBlock(MyBase.Page, Me.[GetType](),
("dialogJavascript" + this.ID), "alert(\"Registered\");", True)
This worked for me!