0

I have a page (aka PAGE1) that has a complex grid (like jqgrid) that you can filter/sort/page through results. When you click on a row on the grid, I would like to load/get a form that I have in a different view (aka PAGE2) and load it into a DIV container on PAGE1. I want to do this instead of redirecting to PAGE2 because i want to keep PAGE1's state (ie: sorted & paged results).

PAGE2 has a model that loads the page, allows user to edit the fields and submit the changes. I really like MVC's out-of-the-box functionality that validates the fields and highlights the field that has a problem (amongst other things), but MVC (out of the box) does a postback. This reloads the whole page, so now the broswer is on PAGE2 and PAGE1 is gone (along with it's state).

Is there a way to load PAGE2 in such a way (without iframes!) that a postback would only refresh the DIV on PAGE1 it's loaded in?

Also, when I .get() PAGE2 into a DIV on PAGE1 - if PAGE2 has any plugins in it, it seems to break PAGE1 when i close PAGE2....not sure if the two are related.

I hope this makes sense - thanks in advance SO!

Losbear
  • 3,255
  • 1
  • 32
  • 28
  • have you read about backbone.js or angular.js ? – Mandeep Jain Jan 31 '13 at 15:45
  • I've seen the angular.js VS2012 auto adds to the project, but haven't played with it. Haven't heard of backbone. What exactly am i looking for with those scripts? Have any sample code? – Losbear Jan 31 '13 at 16:15
  • These both are based on MVC approach and loads content on the web pages/part of a web page dynamically without refreshing the page. You can read about backbone.js at http://backbonejs.org/ – Mandeep Jain Feb 01 '13 at 06:11

1 Answers1

0

When I need to do something like this, I do a Html.RenderPartial on the page using an Ajax.BeginForm - the Razor helper for ajax handles a lot, but since you're getting into the weeds, I'm not sure why you couldn't just set up the ajax calls (onSuccess, onFailure)yourself.

da7rutrak
  • 548
  • 3
  • 13
  • RenderPartial won't help because it's not loading "PAGE2" dynamically, which i need because PAGE2 could be one of two pages depending on what row the user clicks on the grid. I tried using AJAX to load PAGE2, and that works fine - but as mentioned above, when you submit the form, the postback rerenders the page as itself, discarding page1. not sure how to limit the postback to just the PAGE2 container (located on PAGE1). I wonder if that's what "Angular" does - suggested by Mandeep Jain above. – Losbear Jan 31 '13 at 16:22
  • If your ajax form is causing a page refresh, there's something wrong. You should be able to very clearly define what parts of your page get updated and when if you're digging into the javascript. Check out http://stackoverflow.com/questions/1570127/render-partial-view-using-jquery-in-asp-net-mvc - you can see where the top answer is replacing the contents of a div with the results from a PartialViewResult from a specific action in the controller. – da7rutrak Jan 31 '13 at 16:25
  • 1
    Thanks for the link - it gave me some direction. I ended up using .get() to load the partialview in a div on PAGE1 and then on PAGE2, used AJAX to get the partialview's HTML and replace itself. Works great. Thanks! – Losbear Feb 01 '13 at 01:20
  • Sounds like a perfect approach to solve your problem. Glad it worked for you! – da7rutrak Feb 01 '13 at 04:58