Form swapping with ASP.Net MVC 4, jQuery and Ajax

In this screen cast I will demonstrate how swap forms within in a section of your page using jQuery and AJAX.

This technique allows you to make your web sites faster and provide an easier (and better user experience).

Get the source code by clicking here.

Author: ricardocovo

Senior Software Architect/Developer with extensive experience in web related technologies.

9 thoughts on “Form swapping with ASP.Net MVC 4, jQuery and Ajax”

  1. Thanks for sharing your great demo! It was just the thing I’ve been looking for. I did, though, run into a small problem that I hope you’ll be able to resolve. If I click rapidly on the “Login” and/or “Register” button, eventually the application stalls and becomes unresponsive to any clicks on those buttons. Any help in this regard would be greatly appreciated….

    1. I received this comment on my youtube channel which I haven’t tried but sounds as it could solve your problem: “…You should just delegate the click handler rather than binding repeatedly…”

      Another thing would be to disable clicks on the div as it changes.

  2. Thanks for sharing! It was just the thing I was trying to do, so your screencast was very helpful. I did, though, run into a small problem which I hope you’ll help to resolve. If I click over and over on the Login and/or Register buttons, the application eventually becomes unresponsive. Any help in this regard would be greatly appreciated.

    Again: great job!

  3. I am trying to use this methodology for a demo application… The only difference is that I am using a JQuery UI Dialog as the “#membership-panel”. Everything works as expected with one exception. I would like the JQuery UI dialog “buttons” to handle the submit click for the forms… Can you tell me how to wire these up to the dialog buttons… I am having some trouble with this part.

    Thank you in advance,

    Stew Basterash

    1. My last post was just me doing late night stupid… I fixed the issue…

      I do however have one more problem/question… Can you tell me why this methodology would work intranet, but not extranet? I have a web server on the internet for testing… When I run the web app internally it works fine from all browsers on different platforms… but on my web server the ajax GET appears to be timing out…

      Thoughts?

      1. Stew, very hard to tell without knowing anything about the environments.

        Is the internet environment exactly the same? Are you going cross domains? Can you go to the view directly?

        Those are things I would consider… hth.

      2. Ricardo,

        Your post was excellent and it really helped me along. As for the other issue, I have solved the problem. It was actually very simple. I am building my site with Microsoft MVC 4 framework. The data model uses Entity framework for the “Account” Controller. By default IE uses IUser with Read-Only rights… When I deployed my solution for testing the Account Controller, using Entity Framework sees that the database does not exists and thus tries to create it on the fly. With read-only rights… it hung, then timed out… It only took a good nights sleep to figure this out in my head… I woke up with a revelation!

        Thanks for your post… my jquery skills are old and weak your code example helped refresh my memory…

        Thanks again,

        Stew Basterash

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: