基于DropdownList的动态部分

视觉豆

我有以下代码的看法

...
<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中,我有一个名为“ Render”的操作,该操作从下拉列表中获取ID,并根据该ID返回一个partialview。如果使用电子邮件,则返回电子邮件模板部分视图;如果使用日历,则返回日历模板部分视图。

这是行不通的,对于我的一生,我不知道为什么。

我是Web开发的新手(我想晚10年了)。

编辑:如果我只是浏览到该动作,则该动作有效。->对于想要实际查看操作代码的人->我很肯定ajax出了问题

编码消失了

@renderSection("scripts",...)在主布局文件的末尾吗?如果它在顶部,则需要将所有jQuery包装在DOM ready处理程序中(它们目前缺少)。

<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')仅在事件时间(而不是事件注册时间)运行。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章