I have multiple user controls on the page that are used primarily for data entry purposes. When a product is loaded, I need to load the product data into all those user controls and retrieve data when I need to save the product. The user controls are not visible to the user directly, instead user would click on a link and the user control will open up in a modal popup.
Currently the way I'm doing this is, I've loaded all the user controls on the page in separate div controls, and showing the modal popup when the link is clicked. I'm sure loading all the user controls on the page is not a good idea. Is there a better way to handle this? I think we can show the markup using JSON with jQuery - but how can I load and retrieve the data using that? Can someone help please?
Thanks.
Sounds like a case for AJAX. You could use an UpdatePanel within the div that defines the modal dialog. From the click handler for whatever control brings up a particular modal, you can dynamically replace one usercontrol with another in that UpdatePanel, pre-populate the usercontrol's data, then show a single modal that could be anything. Doesn't have to be a modal either; you could set up the UI with tab-like controls that switch between these UserControls in an always-visible div.
For a simpler approach, you could keep your Usercontrols in a div that is initially hidden by JQuery.
On postback, ie. when the user clicks the button/link for a particular product you can populate all your controls in a standard ASP.Net way so they're ready to display and then call a bit of JS/JQuery to show the div as a modal dialog.
Related
I have a page(C#-asp.net application) with more than 5 ajax tabs that gets data on page load. Since it takes a long time, i want to populate the tab contents only when the user clicks on the tab.not able to find any event in tab panel. BTW i'm using an AJAX Tab container Please Advice me ASAP.
Thanks in Advance. :)
You need to set AutoPostBack="true" add ActiveTabChanged to tab control. For details go here
Consider to extract tabs content to user controls and load them into active tab in Page_Load method depending on ActiveTabIndex property
I am using a ajaxToolkit:AsyncFileUpload that allows the user to upload a excel file. In the AsyncFileUpload1_UploadComplete() event, I am reading the excel data and creating excel structure using div and adding to the page. But these dynamically created controls are not being added to the page. I added a button in the updatepanel and checked. On button click event, I created same above controls. In this case, the controls are rendering to the page. The controls are not rendering in case of ajaxToolkit:AsyncFileUpload only. Can anybody please tell me what is the fix for this.
Add Button into UpdatePanel where you want to show new controls and make it invisible with css style.
In the AsyncFileUpload1_UploadComplete server-side method, save your data to Session state.
In the client-side OnClientUploadComplete event handler call __doPostBack function with hidden button's UniqueID first parameter value. Then make all stuff required to render dynamic content in that button's click handler.
I want to disable the main page while showing a DIV control. For example, One main form having a DataGrid and a Add Item button, while click on the Add Item button, I want to show a DIV control for new item entry, at the same time the main page control should be in disable mode. After close or hide the DIV, then I want to enable the main page. How is this possible? Please guide me.
How is this possible without a third party component?
You can do this by creating a div that falls over the main div and beneath the div you're showing.
both the visible divs should have a higher z-index then the main div.
because it has a higher z-index it disables the main div. the dimensions of this disabled div are the same as the main div.
Take a look at this page, here you have a perfect example of how to do it with JQuery and ASP .NET.
http://www.clientsideasp.deynu.com/alerts/Asp-net-jquery-confirm-gridview.aspx
All you should do is change the confirm panel by another inserting one or whatever you want.
Regards
Use jquery modal dialog to achive it:
http://jqueryui.com/demos/dialog/#modal
From your requirement, you can better look into modal form:
http://jqueryui.com/demos/dialog/#modal-form
Not the answer, but a recommendation (#LFMF):
You may want to refresh the main page after closing the modal/DIV - especially if the modal affects the data on it (updates, inserts, deletes).
How to load a user control dynamically in a page?
I have a page that contains radioButtons. Each click on a radio button loads a user control (.ascx) in the page.
What I am doing is loading all controls at the same time, but set their visibility to false. When a user clicks a radiobutton I set the visibility of the specific user control to true.
As a result I am loading all the user controls on each postback.
Is there any other possible way of doing this?
Add a div with runat server on the page with an id "divControls" for example.
Asp allow you to load a user control ".ascx" dynamically.
The below code should solve your problem.
Control ctrl = Page.LoadControl("UserControlPath");
divControls.Controls.Clear();
divControls.Controls.Add(ctrl);
If you don't keep them in a List, and that list in session, you'll have lots of trouble.
Ghyath's way is the right way but you should also add them to a List.
List<Object> Usercontrols = new List<Objects>{};
Control ctrl = Page.LoadControl("UserControlPath");
Usercontrols.Add(ctrl);
Session["Usercontrols"] = Usercontrols;
On each postback, you need to reload your div with the controls in your List.
Edit: I've corrected the last line.
Is there any specific reasons to hold the usercontrols in a single page?
Think about the page view state as you are loading all the controls and setting it's visibility.
I think there are two possible solutions:
Either create seprate page hosting different user control and when user click on the certain radio button, redirect to the respective page.
Load on demand i.e. when user request a user control, only then load it but removing all other loaded user controls and hence page will have only one user control at any time.
Could someone help me out in getting a popup with a gridview(with 2 columns) inside when a link is clicked. I need some help badly. Can someone please tel me how to start and the procedure. I will be thankful.
2 columns in the gridview include checkbox and Text. This should get populated from database and after modifying that. it should save it in the database!!
I really appreciate all your help!! Thanks!
If you have no time, and you want things to work "magically"; go download Ajax Control Toolkit;
Drop a link in your markup that would open the grid; name it MyLink
Define the two column'ed GridView inside a Panel.
<asp:Panel runat="server" ID="pnlGrid"><asp:GridView ...></asp:Panel>
Drop ModalPopupExtender control from Ajax Control Toolkit in your markup.
Add Panel's id in ModalPopupExtender's markup
<act:ModalPopupExtender ID="MyModalPopupExtender1" runat="server" TargetControlID="MyLink" PopupControlID="pnlGrid" style="display:none" OkControlID="MyOkButton"/>
Now clicking on the MyLink would open the Popup with GridView inside; dont forget to add GridView.EmptyDataText property, so that you'd know when there are no records to show.
Last, but not least, upon your page load, load the data from your database, and assign it your GridView.DataSource
This article is a good start.
Enjoy!
Assuming you are using asp.net webforms, the easiest way to do this is to use the Microsoft Ajax Toolkit. With it you can create your panel control with the gridview and extend it with the modal popup extender. You will then hook up the link's click event to show the modal popup control (and any other databinding you need to do).
Thus when you click on the link, the panel will be displayed with the gridview.
If you are using Web Forms, an option would be to use the Ajax Control Toolkit's ModalPopup control. This control is very easy to add to a web forms page. It will allow you to extend the link with the modal and load the gridview in a panel that the modal popup will then display.