Question

I use this in my Index.aspx:

<%= Html.StandardOverlayCreateButton() %>
<div class="apple_overlay" id="overlay">
    <div class="contentWrap">
    </div>
</div>

Which is translating into this:

<a href="Employee/Create" rel="#overlay"><button type="button">Create</button></a>
<div class="apple_overlay" id="overlay">
    <div class="contentWrap">
    </div>
</div>

When you press the button the popup with the Create.aspx occurs. Look at this -> Loading external pages into overlay

For me it seems that the overlay performance is slow.

And there is some strange behaviour, because I can nearly everytime see the old values in the popup. If I click the edit button and then close the popup and click another edit button, I can see the old values for a short time.

Is there a better approach of doing a popup using ASP.NET MVC and jQuery?

Are there tutorials?

Answer 1

Everything is being done client-side so the performance is purely down to JavaScript and jQuery code and nothing to do with any server-side code such as ASP.NET MVC.

You’re using quite a few sophisticated effects with that popup, I see <div /> resizing animations, transparency, drop-shadows, the works. JavaScript performance has come on leaps and bounds with recent browsers, but it’s performance but still be slow for doing very extravagant visual effects. Have you tried tuning down the visual effects with whatever modal popup JavaScript library you’re using.

“And there is some strange behaviour,
because I can nearly everytime see the
old values in the popup. If I click
the edit button and then close the
popup and click another edit button, I
can see the old values for a short
time.”

I assume the pop-up is actually loading an iframe which points to the ‘Employee/Create’ page. My guess is that when the pop-up is closed and then re-opened again with a different page, the previous page will still be sitting in the pop-up’s iframe, and the “load-new-page/url” event isn’t fired until the pop-up re-appears, hence why you’re seeing the old page very briefly.

I had a similar problem to this, you need to tune the modal pop-up behaviour slightly so that it first loads the new page then opens the pop-up, rather than the other way around which is what it’s currently doing. My solution to this was a bit hacky in that the page inside the iframe has an $(document).ready({}); event that called some JavaScript function the the iframe’s parent to load the pop-up. eg. put this in your page that sits inside the iframe:

<script type="text/javascript">

    $(document).ready(function()
    {
        window.parent.openPopup();
    });

</script>

Then you need to define the ‘openPopup()’ JavaScript method in the iframe’s parent (ie. the main page the lists your records).