Rendering partial views (modal windows) in asp.net MVC

Question

Sorry for the poorly-worded question.

I was hoping to get everyone's ideas on the best way to handle this.

I have a link on a master page that links to a contact form. If the user has javascript enabled, I want to open the form ion a modal window using jQuery. If not, the user will just be directed to the contact form page.

The issue is, when serving up the modal window, I only want to display the contact form - minus the surrounding template/master page. However, in the case that javascript is disabled, the contact form page should be displayed along with the template/master page.

What is the best way of implementing this? Currently, my only idea is to use javascript to append a value/querystring to the contact form link indicating that javascript is enabled. For example, http://www.mysite.com/contact/js or http://www.mysite.com/contact/?js=enabled . If javascript is enabled, I can partially render the contact form.

I welcome all ideas and links.

Thanks!

Answer 1

Use this in your controller instead:

if (Request.IsAjaxRequest())
{
    return PartialView("PartialViewWithYourForm");
}

return View("FullView");

FullView.aspx

...
<%= Html.RenderPartial("PartialViewWithYourForm") %>
...

Answer 2

you can indeed do this nicely with jQuery!

Let's say that your contact form on your contact page is wrapped in a div with id="myContactForm" . You can combine a selector (eg, '#myContactForm' ) with the URL from which you want content loaded. You can load your form (or whatever other content) directly into your current page in a number of different ways. I personally prefer jqModal for my modal-windowing needs, but you could do this with the jQuery.load method itself if you were using anything else.

So, if your first page is named "master.html" and your contact form is named "contact.html", here's what you could do inside of "master.html":

<div id="someDiv">
  Please <a id="contactLink" href="contact.html">contact us</a> with
  any questions!
</div>
<div id="myModalPlaceholder">
  Modal content would go in here; this div is initially hidden.
</div>

This of course will link to the contact form if no javascript. But you want to extract just a portion of "contact.html" and display that on your master page. Here's an idea of how you accomplish your goal on your master.html page:

<script type="text/javascript">
$(document).ready(function() {
    $('#contactLink').click(function() {
        $('#myModalPlaceholder').load('contact.html #myContactForm');
        return false; // cancel the native click event
    });
});
</script>

Notice how there is a space separating the URL in the "load" method from the region on the target page you only want to grab. You can read more about this here . This will grab the #myContactForm div from the contact.html page, and insert it into your master page's #myModalPlaceHolder div.

Best of luck!
-Mike