使用javascript调用C#controller的Bootstrap navpanel和日期选择器

时间:2015-11-17 20:10:48

标签: javascript c# jquery twitter-bootstrap

我有一些代码允许用户将数据输入到引导日期选择器中,然后单击提交按钮,日期显示在导航面板中。单击按钮我有一个javascript函数,将确定用户所在的选项卡,并将在MVC控制器中运行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 });
   }       

});

2 个答案:

答案 0 :(得分:1)

如果您希望根据点击的标签找到错误的商品,请将其作为“吸气剂”:

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

答案 1 :(得分:0)

此时更改您的代码,FormGet中的第二个参数错误,将其从delayedspiff更改为instantspiff

<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', 'instantspiff')">Instant Spiff</a>
    </li>
</ul>