How to pass information from pop-up window / modal window to base window in ASP.NET MVC

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

Why is Ajax such an issue? If you use Ajax then you can post back details, return with a fully rendered PartialView and display that on the page.

In that way you never leave your base page and all will be well with the world and you can post back all the data to your base page controller.

So to recapitulate. Each step in your wizard can be a partial view and as you progress through the steps you can render the partial view in the same location.

The alternative is that all three steps be on the base page to begin with and you can show/hide tham as required.

Also don't forget the REST principle. If you want your wizard to be individual views then each view needs to be responsible for itself. You can of course call a controller with an id or you can pass across a full model.

In that way your view can load the model, render itself, update model properties and pass the model onto the next view.

Just a couple of ideas. It is up to you to choose the best flavour I guess.

I'd choose my last option. I think passing across the views model to each controller gives you the best result.

I hope this helps.

Answer 2

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.

Answer 3

Hi, I am facing an issue with MVC, Can you please suggest a work-around?

I have a partial view that is rendered at ...mysite/Home/Index and there is another button on the page which opens a pop up(modal) that contains this control again... now in this pop I modify the view model of this partial view and on close it is updated, the view model has been updated but the HTML on the page has not, I have tried JQuery and Ajax approaches to avoid page refresh/reload as I have unsaved data on the page but niether updated the HTML(seen on view page source as I need to perform edit operation on the appended HTML).

Thanks in advance

Best Regards

KK