Question

我正在使用一个bootstrap管理主题，它使用一个复选框样式来切换我希望能够执行此按钮的按钮。我想加载更多地址的部分视图，即将合作伙伴信息添加到屏幕中。这样做的最佳方法是什么？我使用的是mvc 5和c＃btw。

我已经习惯了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的渲染中没有错误

我用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-->

注1 好吧，毕竟我已经出现了消息框，但没有正在呈现的部分视图

[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毫秒]

    $(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，并可能通过partialview致电ajax/load并将其附加到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");
}

注意 - #element是您要加载id

的DOM element的{{1}}

个人建议

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

修改 - 1

将其附加到partialview以委派document

event

如何在切换按钮

1 个答案: