在 cshtml 文件中加载函数

Question

我正在开发一个有 4 个导航选项卡的 Web 应用程序。

名为 index.cshtml 的主 cshtml 文件包含 4 个导航选项卡作为部分视图：

<div class="tab-content" id="mainTab" >
        <div class="tab-pane fade in active" id="@ViewData["Stamp"]" role="tabpanel" aria-labelledby="stempel-tab">
          @{ViewBag.Title = "Index";}
          @{Html.RenderAction("_Stempel", "Home");}
        </div>
        <div class="tab-pane fade" id="@ViewData["BackDated"]" role="tabpanel" aria-labelledby="backdated-tab">
          @{ViewBag.Title = "Index";}
           @{Html.RenderAction("_BackDated", "Home");}
        </div>
        <div class="tab-pane fade" id="@ViewData["History"]" role="tabpanel" aria-labelledby="historie-tab">
           @{ViewBag.Title = "Index";}
           @{Html.RenderAction("_Historie", "Home");}
        </div>
        <div class="tab-pane fade" id="@ViewData["ChangePin"]" role="tabpanel" aria-labelledby="changepin-tab">
           @{ViewBag.Title = "Index";}
           @{Html.RenderAction("_Pinaendern", "Home");}          
        </div>
    </div> 

Historie.cshtml 文件有 2 个函数：

ShowBookings();
CleanNoHistoryMessage();

如果我将函数放在 document.ready 中，我需要在每次 WebApp 执行函数时进行更新。

 $(document).ready(function () {
        ShowBookings();
        CleanNoHistoryMessage();
    });

Historie.cshtml

<script type="text/javascript">

        $(document).ready(function () {
            ShowBookings();
            CleanNoHistoryMessage();
        });

        function ShowBookings() {
             // Some Code
            }
        function CleanNoHistoryMessage() {
            // Some Code
            }

    </script>
    @{
        Layout = null;
    }
    <h3>@ViewData["TextLabel_BookingHistoryHeadline"]</h3>
    <ul data-role="listview">
        <div data-role="fieldcontain">
            <ul id="Liste">
                <li>@ViewData["TextLabel_BookingHistoryNoBookings"]</li>
            </ul>
        </div>
     </ul>

我想每次单击选项卡时都执行这些功能。我该怎么做？

Answer 1

使用 jQuery .on(( 事件处理程序附件

：

将一个或多个事件的事件处理程序函数附加到所选元素。

点击时要辣，所以你的代码会像：

$("#mainTab .tab-pane").on("click", function() {
  console.log($(this).text() + "Is clicked");
  /*    ShowBookings();
        CleanNoHistoryMessage(); */
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="tab-content" id="mainTab">
  <div class="tab-pane fade in active"  role="tabpanel" aria-labelledby="stempel-tab">
    tab1
  </div>
  <div class="tab-pane fade"  role="tabpanel" aria-labelledby="backdated-tab">
    tab2
  </div>
  <div class="tab-pane fade"  role="tabpanel" aria-labelledby="historie-tab">
    tab3
  </div>
  <div class="tab-pane fade"  role="tabpanel" aria-labelledby="changepin-tab">
    tab4
  </div>
</div>