如何在切换按钮上插入部分视图？

Question

我正在使用一个引导管理主题，它使用复选框样式，切换我想要做的事情，这个按钮被按上。我想要加载一个更多地址的部分视图(即有合作伙伴信息到屏幕上)。我做这件事的最佳方法是什么。我正在使用mvc 5和c#。

我习惯于使用webforms，所以请原谅我，如果这个基本的问题让人们感到烦恼，通常我会创建一个面板并在其中加载控件，在mvc世界中是如何做到的呢？

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

​

​

编辑1

我尝试过上述方法，但到目前为止它还没有加载jquery中的元素，jquery的呈现中也没有错误。

我用div存储我的元素，但没有保存。

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

我使用了以下元素来存储

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

编辑2，所以我在jquery获取到复选框的选择器之前进行了更多的投资，而不是在它之后，就好像它没有触发更改事件帮助plz一样。

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

编辑3

因此，我在这个问题上做了更多的工作，而且仍然没有骰子，我应该声明我使用的是共享视图中的部分视图，使用@RenderBody，但是页面拒绝加载，并且没有看到页面上的消息框。

$('#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
    });

在下面Guru的帮助下，新的html标记

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

带有@RenderBody命令的MainLayout文件的Html

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

最后，我看到消息框出现了，但没有显示分区视图。

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

编辑4

这是下面的部分文件，我使用上面。

     <div class="row">

      <section class="col col-6">

        <label class="input">

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

编辑5我已经更改为使用ajax加载查询的方法，但是现在我得到了一个404未找到的错误

获取XHR http://localhost:50093/FormsController/GetPartialView HTTP/1.1 404未找到43 Not

​

​

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

屏幕显示正确的部分视图名称。

​

​

Answer 1

您需要将change event写入您的checkbox，并可能通过ajax/load调用partialview并将其附加到col-3 section中。下面只是一个你如何实现它的例子。

$('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
});

在控制器中添加下面的PartialViewResult方法。

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

Note - #element是要加载partialview的DOM element的id

个人建议

最好是在初始加载时加载partialview，这样就不会被请求everytime，或者如果您遵循上述方法，而不是在else部件上清除它，只在hide上清除它，并且当它满足checked条件时，查看partialview是否已经存在，如果是，则显示partialview进行ajax调用以获得partialview。

编辑- 1

将其附加到document以委托event

$(document).on('change','#chkisJointApplication',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
})