I needed a tree view that has checkboxes, asynchronously gets data to populate the nodes when they are expanded, and automatically checks/unchecks child/parent nodes appropriately as checkboxes are clicked.
The only part that didn't work out of the box was the checking/unchecking of child/parent nodes when their children/parent nodes are clicked. While there is an event available for when a checkbox is clicked, it doesn't automatically post back so I added some javascript to make it do so.
It was working really well when I was getting data directly from the control, but when I decided to refactor the control so I could use it in other places I decided to create an event that consuming code would assign to in order to provide the control a way to get data from the right place.
I assign to my event on the Page_Load of the page the control is on, and this works for expanding nodes just fine because the event gets assigned to again at the beginning of each post back. However, when I click a checkbox the Page_Load event for the page the control is on doesn't get called and so the event doesn't get assigned to.
I've already planned to implement an alternate solution that will use jQuery to do the checking/unchecking on the client side without posting back, but I'd really like to know the proper design pattern for handling this kind of situation.
Below is the aspx that shows how I'm making it post back. I can post other code if needed or if my explanation wasn't clear.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="DepartmentTreeView.ascx.cs" Inherits="TrainUp.Web.Lms.Mtv.Controls.RequiredTraining.DepartmentTreeView" %>
<script type="text/javascript">
<%-- This is used to cause a postback when a checkbox is clicked,
which allows the DepartmentTree_TreeNodeCheckChanged event to get raised --%>
function postBackByObject() {
var o = window.event.srcElement;
if (o.tagName == "INPUT" && o.type == "checkbox") {
__doPostBack("", "");
}
}
</script>
<asp:TreeView ID="DepartmentTree" SkinId="Contacts" runat="server"
OnTreeNodePopulate ="DepartmentTree_TreeNodePopulate"
OnTreeNodeCheckChanged="DepartmentTree_TreeNodeCheckChanged"
OnClick="javascript:postBackByObject()" />
Can't add comments yet but it sounds as you aren't putting your code on the right state of the page life cycle to render your treeview again. You can reuse the treeview using a webcontrol or encapsulating all the logic on a js file and referencing it on every page you need to use it.
Actually I don´t see the problem and the code should work just fine. However, I recommend to change your javascript code though because it won´t work in Firefox (window.event.srcElement doesn't work for firefox?)
function postBackByObject(e) {
var evt = e || window.event;
var o = evt.target;
if (o.tagName == "INPUT" && o.type == "checkbox") {
__doPostBack("", "");
}
}
<asp:TreeView ID="DepartmentTree" runat="server" ShowCheckBoxes="All"
ShowExpandCollapse="true"
OnTreeNodePopulate="DepartmentTree_TreeNodePopulate"
OnTreeNodeCheckChanged="DepartmentTree_TreeNodeCheckChanged"
OnClick="postBackByObject(event);" />
Related
I encountered some weird behaviour today and I was hoping someone could shed some light on it for me because I'm perplexed.
I have a couple of methods I use to interact with the ui for the sole purpose of displaying error/success/warning messages to the user.
Here is one of them
public static void Confirm(string text)
{
var page = (Page)HttpContext.Current.Handler;
var uiConfirm = new HtmlGenericControl("div")
{
ID = "uiNotify",
InnerHtml = text
};
uiConfirm.Attributes.Add("class", "ui-confirm");
page.Master.FindControl("form1").Controls.AddAt(2, uiConfirm);
}
This works perfectly fine except for one nuance I encountered this morning and I was hoping someone could shed some light on it for me.
I am working on your run of the mill profile editing page. In this page, I am binding a couple of dropdownlists (country, province/state) on page load. I have a submit at the bottom and a click event that fires to update the information, then call the method above to notify the user that their information was successfully updated. This works the first time you click the submit button; the page posts back, the information gets updated in the database, the dynamically added div gets popped in, confirm message is displayed and all is good. However, if you then click the submit button again, it fails stating SelectedItem on the dropdowns I'm binding in the page load is null (Object reference not set to an instance of an object). The dropdown is actually wiped for some reason on the second postback, but not the first.
In sheer desperation after trying everything else, I decided to take out the call to the confirm method... and strangely enough the error disappears and I can update the information on the page as many times as I like.
If I add a generic control statically to the page I'm working on, and change my method slightly so that instead of adding a generic control to the form dynamically it just finds the generic control on the page, that does no produce the same error.
The problem also goes away if I remove the two dropdowns from the page or just stop interacting with them.
Why on earth would adding a dynamic control to the form wipe my dropdowns on postback?
I think you should consider using the PlaceHolder class in your MasterPage, the AddAt(2, uiConfirm) is going to bite you and probably is:
Markup:
.......
<asp:PlaceHolder id="PlaceHolder1"
runat="server"/>
......
Code-behind:
public static void Confirm(string text)
{
var page = (Page)HttpContext.Current.Handler;
var uiConfirm = new HtmlGenericControl("div")
{
ID = "uiNotify",
InnerHtml = text
};
uiConfirm.Attributes.Add("class", "ui-confirm");
//may need to change depending on where you put your placeholder
Control placeHolder = page.Master.FindControl("PlaceHolder1");
placeHolder.Controls.Clear();
placeHolder.Controls.Add(uiConfirm);
}
I've got a list of checkboxes and an ImageButton with an OnClick event in my page, clicking the ImageButton performs a postback and runs the OnClick event fine
The trouble is that I want to move the div to be the first child of the <form> so that I can make it appear in a modal window - I've done this using the prototype.js code...
document.observe("dom:loaded", function() {
if ($$('.CheckboxListContainer').length>0) {
var modalShadow = document.createElement('div');
modalShadow.setAttribute( "class", 'MyFormModalShadow' );
modalShadow.style.width = document.viewport.getWidth() + 'px';
modalShadow.style.height = document.viewport.getHeight() + 'px';
var modalDiv = document.createElement('div');
modalDiv.setAttribute( "class", 'MyFormModal' );
var checkboxesDiv = $$('.CheckboxListContainer')[0];
checkboxesDiv.remove();
modalDiv.appendChild( checkboxesDiv );
$$('form')[0].insert( {top: modalShadow} );
$$('form')[0].insert( {top: modalDiv} );
Event.observe(window, "resize", function() {
if ($$('.MyFormModalShadow').length>0) {
var modalShadow = $$('.MyFormModalShadow')[0]
modalShadow.style.width = document.viewport.getWidth() + 'px';
modalShadow.style.height = document.viewport.getHeight() + 'px';
}
});
}
});
... which works fine, but the ImageButton is no longer triggering my OnClick event on postback.
Is there a way to move my div around in the DOM and retain its postback abilities?
Quick answer, yes. Long answer below:
If you're talking ASP.NET WebForms, does your form have the runat="server" attribute and an id? If you're using standard HTML, are the method and action attributes set on the form?
When you look at the HTML source in your browser, if the form looks like: <form action="/your_post_back_page.html" method="post">, then that's all good. Inspect the form with FireBug after the modal dialog has been added, see if it is INSIDE the form tags. If so, that's good.
Do your check boxes <input type="checkbox" /> have a name attribute set? Is your image button <input type='submit' /> or is it a <button>?
If these conditions are met, then there is probably a JavaScript event (a function) wired to your button that is returning false and/or swallowing the postback. JavaScript onclick events generally need to return true to submit a form. Is there any output in your browser's error console?
Personally, I find more and more that pure HTML (by way of ASP.NET MVC) beats the pants off old school ASP.NET WebForms, and jQuery has, in my experience, a far nicer feel than prototype. Using jQuery templates to create a modal dialog would be easy. Can you swap libraries?
First of all, i am not very clear why you need to move the element to be the first child of the form to make it modal. You can make any div modal no matter where is the position in the form. The most important think is controlling the absolute positioning properly.
Each postback gets triggered by a __DoPostBack() javascript function, so you should not have any issues with moving the control around, unless you changed the id of the control.
One possible solution to your problem is calling the __DoPostBack() function from your client code in document.ready, and that way you have full control over the form submission.
iv'e got an asp button which performs another task besides postback
i have done this by adding javascript code to the button as follows
if( !IsPostBack )
btn1.Attributes.Add("onclick", "f();");
i'm not sure of 2 things
the first :
where in the cs code i should add the function f() , currently i'm doing it in page load
while ignoring postbacks because then the function would have already been added(i might be wrong)
the second :
is there any to make the function execute only if the page was validated ? (after postback)
thanks in advance
eran.
I would use OnClientClick instead of adding the click event throug the attributes. As for your JavaScript, I would add it in the ASPX part. Depending on what the function does, you might be able to avoid the code behind all together and do something like this:
<asp:Button ID="Button1" runat="server" Text="Hi" OnClientClick="javascript:return f();" OnClick="Button1_Click" />
From your f() function, kick off the validation, and return true if validation passes, otherwise return false. If OnClientClick returns true the page will post back, and if it returns false the page will not post back.
1st Question
You will need to add it each time.
btn1.Attributes.Add("onclick", "f();");
2nd Question
You can check the validity of a page by checking the Page.IsValid Property
Unobtrusive JavaScript
If you're serious about javascript then you don't want to write inline javascript.
You will want to create an event handler in javascript code inside the script tags or in a external file.
If you're using .NET 4 server control id:s will be good, else I would use jquery's
contains selector. Search for the given server control ID.
I'm trying to get the values of dynamically generated FileUpload controls that I add to a Panel:
<asp:Panel ID="pFileControls" runat="server">
</asp:Panel>
I create the controls during a loop through a record set:
foreach(DataRow dr in ds.Tables[0].Rows)
{
FileUpload fu = new FileUpload();
fu.ID = dr["SomeID"].ToString();
pFileControls.Controls.Add(fu);
}
Everything works fine up to the point where I submit the form with this button:
<asp:Button ID="btnImportFile" runat="server" Text="Save" OnClick="btnImportFile_Click" />
Which I register like this (Page_Load):
ScriptManager.GetCurrent(this).RegisterPostBackControl(btnImportFile);
I do this because I'm using a MasterPage/ContentPage setting in my website and mostly everything happens inside an UpdatePanel for AJAXification purposes. Bear in mind that if I explicity specify a FileUpload Control in the HTML view, it works 100%.
When the form is submitted I try to iterate the Panel like this:
foreach (Control ctrl in pFileControls.Controls)
{
if (ctrl.GetType() != typeof(FileUpload))
{
continue;
}
//Do the saving of the file here
}
Except, the Panel seems to only return one control: The Content Place Holder for the page and nothing else. Does anyone have some ideas about this?
What part of the life cycle are you adding the dynamic controls?
if you are putting them in the page_load it may be too late, try putting the generation of the dynamic controls into the page_init and see if that fixes the problem.
page lifecycle
http://msdn.microsoft.com/en-us/library/ms178472.aspx
dynamic controls
http://geekswithblogs.net/shahed/archive/2008/06/26/123391.aspx
Note:
"Its recommended to load the dynamic
controls during the Page_Init instead,
because we may want to hook up our
events with proper handler at an early
stage. ... Do not assigning
properties of a dynamic control
(viewstate enabled), during Page_Init,
it will not be reflected. "
I would expect that even with the update panel, you will need to be mindful of the page_load limitations with dynamic controls.
let me know if this helps or if I missed the mark!
Let's try a different course of action (I've gotten dynamic file upload to work, but it was a bear and I wish I had simply used this)
http://www.asp.net/ajaxlibrary/act_AsyncFileUpload.ashx
or
http://en.fileuploadajax.subgurim.net/
these may not create a 'loop' of elements, but you can simply keep loading docs on a as-needed basis.
I have specifically used
http://www.asp.net/ajaxlibrary/act_AsyncFileUpload.ashx
to great effect.
There also appear to be some limitations to the update:panel and the file upload, check out these sites.
(this one says it does not work in partial update status but does work in full postback)
http://forums.asp.net/p/1105208/1689084.aspx
do you know if the submit is triggering the full page or just the update:panel? (check out this: http://geekswithblogs.net/mmintoff/archive/2009/04/01/fileupload-within-updatepanel.aspx
I need to populate 4 GridViews on an aspx page, but I only bind a datatable to one of them on page load. I need to pupulate the other 3 after page load.
does anyone know the best way to do this using ajax ?
Currently I'm using javascript to __doPostBack on a button that pupulates the 3 GridViews but unfortunately this forces a full page load even when using an update panel. I need the page to load, and then populate the GridViews as the datatables are returned.
any suggestions would be much apreciated.
The way you are doing it should work ok, although using jquery to populate a div via the $("#targetDiv").load("contentUrl"); function may be a cleaner way to do it. Anyway, in order to get your current implementation working, there could be a few things you want to look at:
I assume EnablePartialRendering is true on your ScriptManager (always worth checking!).
Make sure the eventTarget for the __dopostback call is set up as an async trigger for your update panels or that it is inside the UpdatePanel if you are only using one UpdatePanel. (See here for details)
Try returning false from the javascript code that executes in the onclick event handler if you have attached this to a button, to make sure the form is not being submitted normally by your browser when you click the button.
If I understand the question properly, you want the data to load after the page is in the browser. If this is the case, then you can fire an event with JavaScript when the page loads on the client.
One method I've used is to put a hidden (with CSS, not any property) button on the page and 'clicking' it with javascript. The event of the button click event will need to be wired in the page's code. Also the button would have to be in an update panel that either contains the grids you want to be bound or has the appropriate triggers to cause them to reload.
You might look at JQuery to get manage when this code gets fired. The $(document).ready(function(){ /* Your code here... */ }); method will fire after the entire DOM is available, which is faster than waiting on the entire page to load (images and so forth).