We Keep Coding

CodeMirror with UpdatePanel in asp.net

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();
});

How to Maintain FileUpload Control’s State after PostBack

I have got multiple Update Panels(asp:UpdatePanel) and in each of those update panels data is inserted and shown in the corresponding grids(grids too include in update panels).
I have the problem that I have a asp:FileUpload Control which is reset when data is inserted in those update panels since few controls have AutoPostBack="true".
I have found one of the closer solution at:-
http://www.codeproject.com/Tips/101834/How-to-Maintain-FileUpload-Control-s-State-after-P
if (Session["FileUpload1"] == null && theFile.HasFile)
{
Session["FileUpload1"] = theFile;
lblStatus.Text = theFile.FileName;
}
else if (Session["FileUpload1"] != null && (!theFile.HasFile))
{
theFile = (FileUpload)Session["FileUpload1"];
lblStatus.Text = theFile.FileName;
}
else if (theFile.HasFile)
{
Session["FileUpload1"] = theFile;
lblStatus.Text = theFile.FileName;
}
But this solution is not resolving my problem. Unfortunately all these three if-else checks are not passing the condition.
I guess that there is some issue related to the UpdatePanel used in parallel with FileUpload control.
I have searched a lot of articles, but it could not find the resolution. Kindly help me in this regards at earliest.

You are right!
FileUpLoad does not work in UpdatePanel.
You must force full postback to make it works.
you have to add an asp button in the updatePanel to save the selected file.
in the click event save the fileName in the session..
but also to force full post back you have to add trigger to the UpdatePanel. the UpdatePanel should look like this:
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<asp:FileUpload ID="FileUpload1" runat="server"/>
<asp:Button ID="Button3" runat="server" onclick="Button3_Click" Text="Button" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Button3" />
</Triggers>
</asp:UpdatePanel>
for more info you can read in the following URL:
http://www.codeproject.com/Articles/16945/Simple-AJAX-File-Upload
Hope it was helpful...

I had same problem and resolved by adding below line in page load event:
Page.Form.Attributes.Add("enctype", "multipart/form-data");

How do you use an UpdatePanel properly?

I have an UpdatePanel with some checkboxes in it. I check them, and hit my Save button, but that causes the UpdatePanel to postback (refresh) and sets them all back to blank. The re-drawing method runs before the button code.
What is the correct way to have an UpdatePanel with checkboxes in that you can manipulate?

Example of code:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="updatePanel1">
<ContentTemplate>
<asp:CheckBox runat="server" ID="myCheckBox" Caption="CheckBox"/>
<asp:Button runat="server" ID="saveButton"
Caption="Save" OnClick="SaveButtonClick"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="saveButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Make sure that:
UpdateMode of UpdatePanel is Conditional
SaveButton contained in Triggers-section as ControlID of AsyncPostBackTrigger

Your code behind should look like:
if(!page.ispostback)
{
re-drawing();
}
As when you hit Save button your re-drawing() method is called and it again refreshes your checkboxes. Asynchronous postback behaves and hit to page method the same as full postback, but refreshes the values in any updatepanels.
Also check this URL
http://ajax.net-tutorials.com/controls/updatepanel-control/

Make sure the Save button is inside the Update Panel, for a start, and if not, that is designated as a Trigger for the Update Panel, in the <Triggers> section of the Update Panel.
<asp:UpdatePanel ID="MyControlPanel" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="SaveButton" />
</Triggers>
<ContentTemplate> ...
Can you show some code for your UpdatePanel?

If you use server controls to render checkboxes you should add EnableViewState="true" attribute to these controls and update panel.
If you have checkboxes that are not server controls, then remove them from update panel, include only server controls inside. This leads to keeping several updates panel on a page that's usually not a big issue.

Add a ScriptManager object to your page if you do not have one. Set EnablePartialRendering="true". Put your UpdatePanel anywhere else on the page and place the content you want ajaxified within a tag within your UpdatePanel.

ASP.NET: Manually updating an UpdatePanel using jQuery

I'm having trouble with updating an ASP:UpdatePanel using javascript (jQuery). Here're what I have.
I'm using the hidden button trick as I seem not the be able to get the ClientID of the update panel for a __doPostBack trick).
<asp:UpdatePanel runat="server" ID="pnlUpdate">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" />
</Triggers>
<ContentTemplate>
<asp:UpdateProgress runat="server" AssociatedUpdatePanelID="pnlUpdate" DynamicLayout="false" DisplayAfter="100">
<ProgressTemplate>
<img alt="Laddar..." src="img/loader.gif" width="16" height="11"/>
</ProgressTemplate>
</asp:UpdateProgress>
<div style="display:none;">
<asp:Button runat="server" ID="btnUpdate" CommandName="Refresh" CommandArgument='<%# Eval("Id") %>'/>
</div>
<asp:Repeater runat="server" Id="rptrEnquiry">
...
</asp:Repeater>
<%= DateTime.Now.ToString() %>
Fire!
</ContentTemplate>
</asp:UpdatePanel>
In the codebehind that handles the btnUpdate (in a GridView RowCommand) the rptrEnquiry is rebound when btnUpdate is pressed.
If I press the button directly (while not hidden) everything works perfectly (updateprogess is shown and date updated and repeater updated.
But if I click the fire link and trigger the button through javascript only the date is updated but the updateprogress isn't shown and the repeater isn't rebound. While debugging I can see that the rebound code is executed but it's effect isn't in the update.

Ok, so I mangaged to solve my problems by totally rebuilding the whole thing. A few lessons learned that might help someone else:
I'm having the updatepanel in a gridview, when I sepparated the updatepanel part into a control of it's own most of my problems was solved, such as not beeing able to reference pnlUpdate.
http://encosia.com/2007/10/24/are-you-making-these-3-common-aspnet-ajax-mistakes/ was very helpful.
Updates in the update panel is controlled in it's PreRender. By using __EVENTTARGET only the panel we're interested in, is updated.
protected void pnlUpdate_PreRender(object sender, EventArgs args)
{
if (Request["__EVENTTARGET"] == pnlUpdate.ClientID)
{
PreBind();
switch(Request["__EVENTARGUMENT"])
{
case "toggle":
Toggle();
break;
case "purchase":
Purchase();
break;
case "update":
/* nop */
break;
}
Bind();
}
}
To get the __EVENTTARGET to have the proper clientId (it's empty string if using a button) I needed to fire of the panel update using javascript:
<a href="javascript:__doPostBack('<%= pnlUpdate.ClientID %>','toggle');">
<img runat="server" ID="imgToggle" src="~/img/grid_plus.gif" title="Expandera" alt="" width="14" height="14"/>
</a>

Have you tried something like this? (Taken from Easily refresh an UpdatePanel, using JavaScript).
there’s an easy method for triggering
a postback targeted at the
UpdatePanel: __doPostBack().
As long as the event target of a
__doPostBack() call is an async trigger of an UpdatePanel, the ASP.NET
AJAX framework will intercept the
postback and fire a partial postback
instead.
<a href="#" onclick="__doPostBack('<%= pnlUpdate.ClientID %>', '');"/>

How to display hidden placeholder without refreshing the page?

I have two placeholders in one page and basically my requirement is that I want to show other placeholder on click of button which is in first placeholder without refreshing the page.
But when I m clicking on the button in 1st placeholder it is refreshing the page and then showing me second placeholder.I m open to hear any other suggestions also if it is not possible through placeholder.
Can anyone tell me how to achieve this?
Thanks,

You could, as suggested, use an UpdatePanel. As long as you ensure that both PlaceHolders exist within the ContentTemplate element, you will be able to switch between the PlaceHolders without the whole page being refreshed.
However, such convenience comes at the cost of control. This isn't a knock on Microsoft. The same problems exist for most ready-rolled solutions.
Whatever route you choose, you're going to need something to refresh part of the current page's DOM. And really, this means Javascript.
Do the actions in PlaceHolder 1 change the content of PlaceHolder 2? If not, you could render both, and simply use CSS to make PlaceHolder 2 invisible on load. You could then use Javascript events to make it visible as desired.
If actions on PlaceHolder 1 do affect PlaceHolder 2, then the above solution won't work, as you'll need to work out what PlaceHolder 2 is going to contain before displaying it.
The real question is whether you employ your own Javascript ( possibly in conjunction with a mature js library like mootools or jQuery ), and maybe learn something in the process, or run with the ASP .NET AJAX stuff for the quick solution, and hope you don't run into any problems.

You could wrap an updatepanel around you PlaceHolder:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<ContentTemplate>
<asp:PlaceHolder runat="server" ID="placeholder">hello</asp:PlaceHolder>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" />
</Triggers>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
Codebehind:
protected void Page_Load(object sender, EventArgs e)
{
placeholder.Visible = false;
}
protected void Button1_Click(object sender, EventArgs e)
{
placeholder.Visible = true;
}
This wil generate a partial postback (via AJAX), so only the content inside my updatepanel gets updated. In the <Triggers>-section, I specify that my Button will trigger the postback.

Either use an UpdatePanel control (part of the MS ajax framework) or use JavaScript. Placeholder would have to render an HTML element, and I'm not sure that it does. If it doesn't, you can use a panel instead, and then in JS do:
function show() {
var panel = document.getElementById("<%= panel2.ClientID %>");
panel.style.display = "true";
}
<asp:Button id="btn1" runat="server" OnClientClick="show();return false;" />
HTH.