javascript - Bootstrap 导航面板和日期选择器，带有对 C# Controller 的 javascript 调用

Question

我有一些代码，允许用户将数据输入 Bootstrap 日期选择器，然后单击提交按钮，日期显示在导航面板内。单击按钮时，我有一个 javascript 函数，它将确定用户所在的选项卡，并将在 MVC Controller 中运行 C# 函数。我目前有两个函数DelayedSpiffDate、InstantSpiffDate。由于某种原因，即使选择了 instantspiff 选项卡，它也只会加载 DelayedSpiffDate 函数。我不确定我做错了什么？这是我的 html:

<div class="row-fluid 1">
    <div class="col-lg-12 delayed_spiff_body">

        <div class="row spiff-datepicksection">
            <div class="col-lg-6 pull-right">
                <div class="col-sm-5 col-lg-offset-4">
                    <div class="form-group">
                        <div class="input-group date">
                            <input type="text" id="startDate" class="form-control" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3">
                    <input class="spiffdate-btn" type="button" value="Submit" />
                </div>
            </div>
        </div>


        <div class="row spiff_tabs_body">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs spiff_tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-id="delayedspiff" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-id="instantspiff" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
            </div>
        </div>
    </div>
</div>

这是我的 JavaScript:

 $(".spiffdate-btn").click(function(){
var correctid = $(".tab-content .active").attr("id");
var startDate = $("#startDate").val();
if (correctid == "delayedspiff")
    $.get("@Url.Action("DelayedSpiffDate", "Dashboard")", { startDate: startDate });
else
    $.get("@Url.Action("InstantSpiffDate", "Dashboard")", { startDate: startDate });
});

更新了 JavaScript:

$(".spiffdate-btn").click(function(){
   var correctId = $("ul.spiff_tabs li.active a").attr('data-id');
   console.log(correctId);

   var startDate = $("#startDate").val();

   if (correctId == "delayedspiff")
   {          
       $.get("@Url.Action("DelayedSpiffDate", "Dashboard")", { startDate: startDate });

   } else if (correctId == "instantspiff") {

       $.get("@Url.Action("InstantSpiffDate", "Dashboard")", { startDate: startDate });
   }       

});

Answer 1

如果您根据单击的选项卡想要它，那么您的目标是错误的项目...尝试将此作为您的“getter”:

var correctId = $("ul.spiff_tabs li.active a").attr('data-id');