Make a condition to display a partial view MVC 4

Question

I want to display a PartialView inside a View with a shared layout, the thing is that I want to render this partial from a select value.

So, I want to know how to trigger the view from Controller depending of the selected value in the select element.

Here's the code:

EDIT

Administrador.cshtml

  <table border="0" cellspacing="0" cellpadding="0"> 
     <tr>
        <td>Seleccione Cartera:</td>
        <td>
            <select id="SeleccionCartera" name="SeleccionCartera">
                <option value="">Seleccione Cartera</option>
                <option value="0">Activa</option>
                <option value="1">Conservadora</option>
                <option value="2">Moderada</option>
                <option value="3">Nueva</option>
            </select>
        </td>
        <td>
            <button name="btnBuscarRegistros" class="btnExportar">Buscar</button>
        </td>
    </tr>
</table>

<div id="prueba" name="prueba">
    //Here is where my partial displays info.
</div>

Functions.js

$("#SeleccionCartera").change(function () {
   var val = $("#SeleccionCartera").val(); 
   $("#prueba").load('Admin/SeleccionCartera/?value =' + val);
});

AdminController.cs

public ActionResult SeleccionCartera(int id)
    {
        string partial = "";
        if(id==3)
        {
            partial = "_NuevaCartera";
        }
        return PartialView(partial); 
    }

If the user select "Nueva", I want to display a PartialView, if the user choose "Activa" I want to display another PartialView (or the same) from Controller.

Thanks for the help!

PD: Sorry for my English, I'm Chilean.

Do you want this to submit the page and then return back the same page rendered with a selected partial view, or do you want to submit request using Ajax and insert the partial view's html into the current page? — Floremin, Nov 18 '14 at 14:31
http://stackoverflow.com/questions/11947540/load-partialview-with-using-jquery-ajax you want to use an ajax call and pass back the partial based on the value you pass to it — Matt Bodily, Nov 18 '14 at 14:49

score 2 · Accepted Answer · answered Nov 18 '14 at 19:01

There's numerous ways to do this, Here is one of them:

Set up an empty Div, and use JQuery's load function

<div id="MyPartial">
</div>

$("#MyDDL").change(function () {

    var val = $("#MyDDL").val(); // this should be an int

    $("#MyPartial").load('Home/ViewPartial/?value =' + val);        
});

Controller

  public ActionResult ViewPartial(int value)
    {
        // do stuff          

        return PartialView("_MyPartial",model);    

        // if you want to have a "dynamic" partial view this should work
        //string partialViewName = "name";
        // return PartialView(partialViewName,model);        
    }

User, i will edit my question to paste the code, because the function is not working and i don't know why! Thanks for the answer! — Maurinostroza, Nov 19 '14 at 13:49

score 1 · Answer 2 · answered Nov 18 '14 at 17:56

an idea:

you could put your partial view within a div and give it an Id.
also, give your select control an Id.
Then create a javascript function which triggered by the onselect event of the select element.
in that js function check the selected value if it's Nueva? then make the partial view div visible if not hide the div
set the partial view div by default hidden.

please check this similar example: http://www.rajeeshcv.com/post/details/27/asp-net-mvc-conditional-rendering-partial-views

Make a condition to display a partial view MVC 4

2 Answers2