How would i inject a partial view on a toggle button
<p>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.</p>

<p>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 ?</p>

<pre><code>&lt;section class="col col-3"&gt;
  &lt;label class="toggle"&gt;
      &lt;input type="checkbox" name="checkbox-toggle" checked&gt;
      &lt;i&gt;&lt;/i&gt;Is this a Joint Application
      &lt;/label&gt;
&lt;/section&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/0L3KQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0L3KQ.png" alt="enter image description here"></a></p>

<p><strong>Edit 1</strong></p>

<p>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</p>

<p>I used a div to store my element but to no avaial.</p>

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

<p>And i used the following element to store in </p>

<pre><code>&lt;div id="element"&gt;&lt;/div&gt;
</code></pre>

<p><strong>Edit 2</strong> 
So I do a bit more investgating in my jquery its gets to before the selector for the check box but not after it as if tis not firing the change event help plz</p>

<pre><code>(function ($) {
   "use strict";
   $(document).ready(function () {    

  inbox();
    $('input[name="checkbox-toggle"]').on('change', function () {
        console.info("I got here ok");


        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
    });
</code></pre>

<p><strong>Edit 3</strong></p>

<p>So I have got a bit futher with this and still no dice I should state I am using a partial view within a shared view using @RenderBody But the page refused to load and I dont see the messagebox on the page.</p>

<pre><code>$('#joint input[type="checkbox"]')).on('change', function () {
        if (this.checked) {
            //loading partial view
            $('#element').load('/FormsController/GetPartialView', function () {
                alert("Partial View Loaded");
            });
        }
        else
            $("#element").html(''); //clearing the innerHTML if checkbox is unchecked
    });
</code></pre>

<p>New html markup with the help of Guru below </p>

<pre><code>&lt;section id="joint" class="col col-3"&gt;
  &lt;label class="toggle"&gt;
      &lt;input type="checkbox" id="chkisJointApplication" name="chkisJointApplication"&gt;
         &lt;i&gt;&lt;/i&gt;Is this a Joint Application
  &lt;/label&gt;
&lt;/section&gt;
</code></pre>

<p>Html of MainLayout File with @RenderBody command</p>

<pre><code>&lt;!-- Widget Row Start grid --&gt;
&lt;div class="row" id="powerwidgets"&gt;
   &lt;div class="col-md-12 bootstrap-grid"&gt;
      &lt;div class="panel-body"&gt;@RenderBody() &lt;/div&gt;
                   &lt;!-- End Widget --&gt;
      &lt;/div&gt;
   &lt;!-- /Inner Row Col-md-12 --&gt;
   &lt;/div&gt;
&lt;!-- /Widgets Row End Grid--&gt;
</code></pre>

<p><strong>Note 1</strong>
Well finally after all that I have the messagebox appearing but no partiaview is being rendered</p>

<pre><code>[HttpGet]
public PartialViewResult GetPartialView()
{
        //Add model if any and send it through partialview
        return PartialView("_PartnetNameDetails");
 }
 &lt;div id="partnerForm"&gt;&lt;/div&gt;
</code></pre>

<p><strong>Edit 4</strong><br>
This is the following partial file which i am using above.</p>

<pre><code>     &lt;div class="row"&gt;

      &lt;section class="col col-6"&gt;

        &lt;label class="input"&gt;

            &lt;i class="icon-prepend fa fa-user"&gt;&lt;/i&gt;
            &lt;input type="text" name="fname" placeholder="First name"&gt;
        &lt;/label&gt;
    &lt;/section&gt;
    &lt;section class="col col-6"&gt;
        &lt;label class="input"&gt;
            &lt;i class="icon-prepend fa fa-user"&gt;&lt;/i&gt;
            &lt;input type="text" name="lname" placeholder="Last name"&gt;
        &lt;/label&gt;
    &lt;/section&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
    &lt;section class="col col-6"&gt;
        &lt;label class="input"&gt;
            &lt;i class="icon-prepend fa fa-envelope"&gt;&lt;/i&gt;
            &lt;input type="email" name="email" placeholder="E-mail"&gt;
        &lt;/label&gt;
    &lt;/section&gt;
    &lt;section class="col col-6"&gt;
        &lt;label class="input"&gt;
            &lt;i class="icon-prepend fa fa-phone"&gt;&lt;/i&gt;
            &lt;input type="tel" name="phone" placeholder="Phone"&gt;
        &lt;/label&gt;
    &lt;/section&gt;
      &lt;/div&gt;
</code></pre>

<p><strong>Edit 5</strong> 
I have changed to this method of using ajax to load the query but now i am getting a 404 not found error </p>

<blockquote>
  <p>GET XHR <a href="http://localhost:50093/FormsController/GetPartialView" rel="nofollow noreferrer">http://localhost:50093/FormsController/GetPartialView</a> [HTTP/1.1 404 Not Found 43ms]</p>
</blockquote>

<p><a href="https://i.stack.imgur.com/9cBfr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9cBfr.png" alt="enter image description here"></a></p>

<pre><code>    $(document).on('change', '#chkisJointApplication', function () {
        if (this.checked) {
            $.ajax({
                url: '@Url.Action("GetPartialView", "FormsController")',
                type: "Get",
                success: function (data) {
                    $("#partnerForm").html(data);
                }
            });

        }
        else
            $("#partnerForm").html(''); //clearing the innerHTML if checkbox is unchecked
    });
</code></pre>

<p>Screen to show correct partial view name</p>

<p><a href="https://i.stack.imgur.com/bB7Rx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bB7Rx.png" alt="enter image description here"></a></p>