In MVC 3 I have a View with 3 Partial Views. How do i get the 3rd partial view to display on the same page?

Question

I have a view with 3 partial views. The first partial view has a dropdown list. You select something from the dropdown then the 2nd partial view will load right under it on the same page.

Then I have a search form (html.BeginForm) in my second partial view and when I submit the form I want to open up the 3rd partial view under the 2nd one.

The 3rd partial view has a kendo ui grid that takes a model.

The problem right now is that the 3rd partial view is getting rendered on a different page.

View:

 <section>
      <div id="searchpanel">
          @html.Partial("_1stPartial")
          <div id="2ndPartialDiv"></div>
          <div id="3rdPartialDiv"></div>
      </div>
 </section>

Partial View2:

<section>
  <div id="searchblock">
     <table>
       <tr>
         <td>
            @using (Ajax.BeginForm("Search", "ControllerName", new AjaxOptions {  updateTargetId = "3rdPartialDiv"}))
          <fieldset>
          <ol>
            <li></li>
            <li>
             <input type="submit" value="Search" id="btnSearch"/>
            </li>
          </ol>
          </fieldset>
        </td>
       </tr>
      </table>
  </div>
</section>

Controller:

public ActionResult Search(model)
{
   //fill searchresults

   return PartialView("_3rdPartial", searchresults);
}

Answer 1

Html.BeginForm will perform a full page post. I believe what you are after is Ajax.BeginForm.

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.beginform(v=vs.118).aspx

Example:

    @using (Ajax.BeginForm("TheActionResultYouWantToInvokeThatWillReturnTheThirdView", "YourController", null, new AjaxOptions { UpdateTargetId = "theIdOfTheDivForTheThirdView", OnSuccess = "doFunctionIfYouNeedTo", OnFailure = "ShowPopUpErrorIfYouWant" }))
     {

     }

Post code added edit:

This markup was invalid, and probably why UpdateTargetId is not finding the Div.

<section>
      <div id="searchpanel">
          @html.Partial("_1stPartial")
          <div id="2ndPartialDiv"></div>
          <div id="3rdPartialDiv"></div>
      </div>
 </section>

See closing speech marks on attributes.

Answer 2

What I understood from you question is that you're making a submit from the first PartialView and, if this was successfully, you'll show the 2nd one. Same for this one. If a successfully POST was made from the second PartialView , you want to show the 3rd one.

Why don't you do it with Ajax , from the client side?

 $.ajax ({
   type:'POST'
   data: {},
   success: function(response){
       $('.specific_div_container_for_previous_partial').hide();
       $('.specific_div_container_for_partial').html(response.Html);
       $('.specific_div_container_for_partial').show();
   },
   error: function(){
       // whatever
   }
 });

On the server side you'll return the rendered html with your PartialView . To render a PartialView in variable and send it the client side as a json object, please check out THIS

Update - How to serialize form in jquery :

Please follow THIS