ASP.NET AJAX popup a page as a modal window

Question

i want to add data to a DB using a modal pop-up of a .aspx page.

so i have a grid with some SQL table data on employees. i want to have a button or link somewhere on this page to enable users to add records to the DB and then have the grid refresh to show the new data.

i have a addEmployee.aspx that i want to pop-up in a modal window (and dark out the underlying page like i see on some sites) that lets users enter data and save to the db within addEmployee.aspx. this page has all the sql and validation logic encapsulated in it for this work. when the add is done i want to alert the user it went (probably best after closing the pop-up and displaying a message on the main page, also i want to refresh the data grid info from the DB so that it will reflect the new record added.

can someone point me in a direction to get this type of functionality without having to code fro weeks to get it.

if you have a better solution, i am all ears !!!

thanks

Answer 1

If you can encapsulate your addEmployee.aspx functionality into a user control instead, then you can add this user control (addEmployee.ascx) to the page with the grid (say viewEmployee.aspx)

Then using a modal popup extender (in case you are using the ajax control toolkit), you can show this addEmployee.ascx control wherein the user has a save button with the corresponding logic for adding the employee.

Also if you are using updatepanels (again in case of ajax control toolkit), you do an listofEmployeeUpdatePanel.Update() which refreshes the list of items in the grid.

This is how I am currently implementing a very similar use case in my current application.

One drawback of this approach is : The addEmployee.ascx user control is a part of the original page and adds to the size irrespective of whether it is used or not.

Answer 2

in your case you can use jquery facebox plugin to show the modal pop up or you can also refer to prototype javascript which is very much flexible and easy to use.

For facebox, facebox allows to show iframe as modal pop up. so you can put your link in iframe. Alternative, to "facebox" is "fancybox" which has nice gui. It works fantastic because i have used it before.

Hope this will help you.

Answer 3

You can put an IFrame in your modal pointing to addEmployee.aspx. Then, add a hidden button to the main page, like:

<div style="visibility: hidden; display: none;">
    <asp:Button ID="btnHidden" runat="server" />
</div>

Add a Cick even to the hidden button, which should contain the code to update your grid:

protected void btnHidden_Click(object sender, EventArgs e)
{
  //Hidden button was clicked.  Update grid.
}

Then, on the "Add" click event within addEmployee.aspx, add code to tell the main page to submit and update the grid:

  private void SubmitParentPage()
    {
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "submitHiddenButton", "window.parent.submitHiddenButton();", true);
    }

Here's the javascript function that is called on the main page:

function submitHiddenButton() {
    var btn = $get('<%= btnHidden.ClientID %>');
    btn.click();
}