Question

我有一个包含以下代码的视图

...
<div class="editor-field">              
            @Html.DropDownList("TypeSelector", new List<SelectListItem> { new SelectListItem { Text = "Calendar", Value = "Calendar" }, new SelectListItem { Text = "Email", Value = "Email" } }, new { id = "TypeSelector" })
            @Html.ValidationMessageFor(model => model.Type)               
</div>
...
<div id="partialPlaceHolder" style="display:none;"> </div>
...
@section Scripts {
        @Scripts.Render("~/bundles/jqueryval")
       <script>
               $('#TypeSelector').change(function () {

                   /* Get the selected value of dropdownlist */
                   var selectedID = $(this).val();

                   /* Request the partial view with .get request. */
                   $.get('/Step/Render/' + selectedID, function (data) {

                       /* data is the pure html returned from action method, load it to your page */
                       $('#partialPlaceHolder').html(data);
                       /* little fade in effect */
                       $('#partialPlaceHolder').fadeIn('fast');
                   });

               });
       </script>

在我的StepController中我有一个名为＆＃34; Render＆＃34;从下拉列表中获取ID并返回基于该ID的部分视图。如果电子邮件然后返回电子邮件模板部分视图，如果日历它返回日历模板部分视图。

这不起作用，对于我的生活，我无法弄清楚原因。

我对网络开发相当新鲜（我估计已经晚了10年）。

编辑：如果我只是浏览它就行动。 - ＆GT;对于那些想要真正看到动作代码的人 - ＆gt;我对ajax

有些不对劲

Answer 1

主要布局文件末尾的@renderSection("scripts",...)是？如果它位于顶部，则需要将任何jQuery包装在DOM就绪处理程序中（它们目前缺少这些处理程序）。

<script>
     $(function(){
           $('#TypeSelector').change(function () {

               /* Get the selected value of dropdownlist */
               var selectedID = $(this).val();

               /* Request the partial view with .get request. */
               $.get('/Step/Render/' + selectedID, function (data) {

                   /* data is the pure html returned from action method, load it to your page */
                   $('#partialPlaceHolder').html(data);
                   /* little fade in effect */
                   $('#partialPlaceHolder').fadeIn('fast');
               });

           });
       });
 </script>

替代方法是使用附加到不变的祖先元素的委托事件处理程序（文档是默认值）：

<script>
       $(document).on('change', '#TypeSelector', function () {

          /* Get the selected value of dropdownlist */
           var selectedID = $(this).val();

           /* Request the partial view with .get request. */
           $.get('/Step/Render/' + selectedID, function (data) {

               /* data is the pure html returned from action method, load it to your page */
               $('#partialPlaceHolder').html(data);
               /* little fade in effect */
               $('#partialPlaceHolder').fadeIn('fast');
           });
        });
 </script>

这允许冒泡的事件被已经存在的元素捕获，jQuery选择器（'#TypeSelector'）仅在事件时间（而不是事件注册时间）运行。

基于DropdownList的动态部分

1 个答案: