Question

I’m writing a contact form in ASP.NET MVC. The user will have the ability to attach regular files (using normal file / browse functions) as well as the ability to search for a particular person and attach files related to that person. The first part is simple enough, but the second part is what’s giving me headaches.

For the second part I will be using a 2-3 page wizard. The user will be greeted with a search field, type the user’s name, hit search, and be presented with a list of results. After clicking a name, they are presented with a list of related records of which they can check some or none. The user will then click attach and the files will show up in the contact form.

I’m worried that if I navigate away from the contact page or bypass the Controllers in the modal window (can modal windows navigate between pages?) or the pop-up window, I’ll somehow screw up the whole MVC architecture.

I don’t want to go messing around with AJAX calls so how do I go about popping up a window, running through this quick 2-3 page search wizard, and then write the contents back to the base window? Is it just a matter of basic JavaScript and HTML or do you think this will be more involved or is AJAX just an inevitability?

Answer 1

Rendering PartialViews through jQuery is an effective way of updating only parts of a View.

Without getting into jQuery and how to use it let’s just dive in.

In your View, PartialView or MasterPage, link to the jQuery script file.

<script src="../../Scripts/ jquery-1.3.2.min.js"></script>

First of all we’re going to create an ActionResult that the jQuery function will call. It’s exactly the same as any other ActionResult only it won’t return a View, instead it’ll return a PartialView.

public ActionResult getFilteredData(string filter)
{
  //do something interesting with filter like
  //returning a list of items from a db

  //once we have our data we can return
  //a partial view giving to it the data as its model
  return PartialView("MyPartialView", returnedDataList);
}

That’s pretty much it for the ActionResult.

As I hope you can see, the method simply takes a parameter, filters data into a list and then returns a PartialView that has the data list as its defined model.

The Html looks like this;

<div id="myPartialView">
</div>

Notice I’ve named the div the same as the partial view. These two are in no way related I just think it keeps things simple to read.

Now for the jQuery.

$.post("/MyController/getFilteredData", { filter: “dogs” },  
  function(newHTML) { 
document.getElementById("myPartialView").innerHTML = newHTML;
});

So all the jQuery is doing is posting back to the action, passing in a filter of “dogs”. The response from the ActionResult is captured in newHTML which is then placed inside of the div named myPartialView.