How to post only a specific ASCX partial instead of the whole page

Question

I've got an ASPX page rendering a search ascx page which in turn will fill a grid on the main ASPX page. Aside that, I've also got an ascx page which uploads files, like this:

 <form method="post" action="<%= Url.Action("UploadFile") %>"  enctype="multipart/form-data">
         <fieldset>
          <input type="file" name="file" id="file" />
          <%=Html.ButtonSubmit("Upload") %>
          </fieldset></form>

Here's the problem: imagine I have searched for a single entry to be displayed on the grid. The grid displays this single entry and after wards, I upload a file and press the button "Upload". The whole page gets posted and the content in the grid is lost, now displaying all the results available. What could I do to prevent this from happening, maintaining the grid state (we're not using ViewState) or otherwise not posting back the whole page but only the ascx with the file upload?

Note: I'm new to MVC.

Answer 1

Your partial view is rendered inside your HTML... this results in a single "static" HTML-file without the option to submit and reload only parts of it.

I can imagine two ways to solve your problem:

1) Place your upload-formular inside an HTML-iFrame... now only this iFrame will reload on submit. Problem: Communication between parent and child-frame to have the uploaded data available, depending on what kind of action you would like to have after uploading.

2) Use jQuery/AJAX to make a javascript-based submit (http://api.jquery.com/jQuery.post/) and refresh your page content dynamically with jQuery/JavaScript. This would be my prefered way but needs some more knowledge about jQuery/JavaScript.

BTW: jQuery is nearly a must-have for any asp.net mvc application ;-)

Welcome to MVC :-)