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);
}

What do you mean by "*is getting rendered on a different page*"? — Justin Helgerson, May 29 '14 at 18:59
can you post the code in the view? Are you using AJAX to load up the 3rd view? — Jonesopolis, May 29 '14 at 19:03
Justin, it peforms a full page post and it puts my partialview on a new page. — Seth, May 29 '14 at 19:47

Moby's Stunt Double · Accepted Answer · 2014-05-29T20:29:30.817

2

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.

edited May 29 '14 at 20:29

answered May 29 '14 at 19:42

Moby's Stunt Double

2,540
1
16
32

I have been trying Ajax.BeginForm as well. Seems to always go to my ActionResult in my controller and perform the same way. – Seth May 29 '14 at 19:45
1

return a PartialView from your controller – Jonesopolis May 29 '14 at 19:46
Jonesy is correct, Seth. Please post some code if you need more help. – Moby's Stunt Double May 29 '14 at 19:50
I am returning a partialview from my controller. Sorry about not posting code. Our development is done in a completely isolated network. I'll try to get an example on here for you. – Seth May 29 '14 at 19:58
1

Another thing might be that you've not specified an UpdateTargetId in your AjaxOptions of the form, that would also replace the whole page with the partial, IIRC. – Moby's Stunt Double May 29 '14 at 20:00
Your attributes aren't closed. – Moby's Stunt Double May 29 '14 at 20:29
That was just an error from me rewriting it on Stackoverflow. Like i said i work on a isolated network and had to rewrite my code. – Seth May 29 '14 at 22:11

score 2 · Answer 2 · edited May 23 '17 at 10:26

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

edited May 23 '17 at 10:26

Community

1
1

answered May 30 '14 at 08:28

Cosmin

2,184
21
38

I think i tried this too. Would i have an on form submit event in javascript? How do i pass my model data to my action in my controller from here? Do i still use Ajax.BeginForm? – Seth May 30 '14 at 20:50
You can have a normal button on your form ( input type='button' ). If you do it like this, you should make a click handler in jquery. On that click handler you can send your form stringified and serialized JSON.stringify($('form').serialize) in a data variable. Btw : I've updated my question – Cosmin Jun 01 '14 at 06:40

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?

2 Answers2