Coding Razor and JavaScript

Coding Razor and JavaScript

本文关键字:JavaScript and Razor Coding      更新时间:2023-09-26

我有一个ASP。NET MVC应用程序和问题是,如何用JavaScript正确地编码我在Razor中所做的事情。在下面的例子中,我在Razor中有三个按钮,脚本运行正常。在下一个例子中,我在JavaScript中使用了一个需要做同样事情的助手,(脚本中的脚本)不起作用。它还显示引导程序布局容器已被识别。如何正确执行此操作?

剃刀(工作良好)

panelbar.Add().Text("Third Person")
          .Content(@<div style="padding: 10px;">
              <div id="cont5_container" class="container">
                          <span class="label label-primary">Age</span>
                          <br />
                          <br />
                          <div class="btn-group" id=ageID2>
                      <button type="button" style="width:120px" class="btnMyAge5 btn-default" id="3">Under 10</button>
                      <button type="button" style="width:120px" class="btnMyAge5 btn-default" id="1">Under 50</button>
                      <button type="button" style="width:120px" class="btnMyAge5 btn-default" id="2">Over 50</button>
                      @Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge5", Value = "", style = "width: 50px;" })
                  </div>
                  <script>
                      $(".btn-group > .btnMyAge5").click(function () {
                          $(this).addClass("active").siblings().removeClass("active");
                          document.getElementById('MyAge5').value = $(this).attr("id");
                      })
                  </script>
               </div>
           </div>);

JavaScript(不能正确)

<script type="text/javascript">
function OnClickAdd() {
    $("#panelbar").kendoPanelBar();
    var panelBar = $("#panelbar").data("kendoPanelBar");
    panelBar.append(
        {
            text: "New Person",
            encoded: true,
            content: [
                         '<div id="cont6_container" class="container">',
                                '<span class="label label-primary">Age</span>',
                                '<br /><br />',
                                  '<div class="btn-group" id=ageID>',
                                     '<button type="button" style="width:120px" class="btnMyAge3 btn-default" id="3">Under 10</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="1">Under 50</button><button type="button" style="width:120px" class="btnMyAge3 btn-default" id="2">Over 50</button>',
                                     '@Html.TextBoxFor(m => m.ageID, new { @class = "input k-textbox", id = "MyAge3", Value = "", style = "width: 50px;" })',
                                 '</div>',
                           '</div>'
                    ]
           }
                  )
                        }

<script>
$(".btn-group > .btnMyAge3").click(function () {
    $(this).addClass("active").siblings().removeClass("active");
    document.getElementById('MyAge3').value = $(this).attr("id");
})

在第二个脚本标记中的点击处理程序分配启动时,第一个脚本标记所附加的内容似乎尚未添加到DOM中。您应该在将按钮添加到HTML的同一函数中注册单击处理程序。