yoda77ni yoda77ni - 7 months ago 39
Javascript Question

How would i inject a partial view on a toggle button

I am using a bootstrap admin theme which is using a checkbox style toggle what I want to be able to do uppon this toggle being pressed to on. I want to load a partial view of more address ie there partner information into the screen. What is my best approach in doing this. I am using mvc 5 and c# btw.

I am used to webforms so forgive me if this basic question annoys people usually i would have created a panel and loaded the controls inside that how is the same done in mvc world ?

<section class="col col-3">
<label class="toggle">
<input type="checkbox" name="checkbox-toggle" checked>
<i></i>Is this a Joint Application
</label>
</section>


enter image description here

Edit 1

I have tried the above method but as of yet its not loading the element in there is no error in the render of the jquery either

I used a div to store my element but to no avaial.

[HttpGet]
public PartialViewResult GetPartialView()
{
//Add model if any and send it through partialview
return PartialView("_PartnerNameDetails");
}


And i used the following element to store in

<div id="element"></div>

Answer

You need to write a change event to your checkbox and possibly call the partialview through ajax/load and append it to your col-3 section. Below is just a sample how you could achieve it.

$('input[name="checkbox-toggle"]').on('change',function(){
    if(this.checked)
    { 
       //loading partial view
       $('#element').load('/Controller/GetPartialView',function(){
              alert("Partial View Loaded");
       });
    }
    else
       $("#element").html(''); //clearing the innerHTML if checkbox is unchecked
});

In your controller add below PartialViewResult Method.

[HttpGet]
public PartialViewResult GetPartialView()
{
     //Add model if any and send it through partialview
     return PartialView("_PartialViewName");
}

Note - #element is the id of the DOM element on which you want to load the partialview

Personal Suggestion


Its better to load partialview on initial load so that it wont be requested everytime or if you are following above approach instead of clearing it on else part just hide it and when it satisfies checked condition, see whether partialview is already present, if yes, show the partialview else make the ajax call to get the partialview