获取按钮上的活动标签并将其传递给控制器​​

Question

我目前正在使用MVC3和Bootstrap。

我有几个Bootstrap选项卡的视图。此外，我有一个按钮[创建]调用控制器中的Create（）函数。

当点击[创建]按钮，我需要以下条件：

1.-获取活动标签ID，以便将它传递给控制器​​。

2：留守当前（活动）选项卡上，当用户已张贴数据和页面重新加载

我知道，我需要使用Javascript功能来获取活动标签和AJAX的ID传递给控制器。我试图以不同的方式混合成功。其实我在新手AJAX，但我注意到，我的思念调用按钮单击事件的行动，但我不知道如何编纂它:(

我的JS：

$(function() { 
    var activeTab = null; 
    $('a[data-toggle="tab"]').on('shown', function (e) { 
     activeTab = e.target; 
     //save the latest tab 
     localStorage.setItem('lastTab', $(e.target).attr('id')); 

     $.ajax({ 
       url: '@Url.Action("Create")', 
       type: 'GET', 
       data: postData, 
       success: function(result) { 

       } 
      }); 

    }); 

     //go to the latest tab, if it exists: 
     var lastTab = localStorage.getItem('lastTab'); 
     if (lastTab) { 
     $('#'+lastTab).tab('show'); 
     } 
}); 

事先[创建]按钮......

<button type="submit" class = "btn btn-success"> 
    <i class="icon-plus icon-white"></i> Create 
</button> 

任何帮助将不胜感激。

谢谢！

Answer 1

有很多方法可以做到这一点，它只取决于你想使用什么技术/框架。如果你想坚持使用vanilla MVC，你可以看看AjaxHelpers。这些提供标记帮助程序，如@Ajax.BeginForm(...)和@Ajax.ActionLink(...)，它们自动提交表单数据或通过AJAX调用从链接调用控制器操作。

如果您想更好地控制AJAX调用的方式，您可以查看Backbone.js或Knockout.js等客户端框架。我更喜欢Knockout，因为它允许您轻松采用MVC中的MVVM设计模式。例如，这里有一个简单的淘汰赛视图模型：

var ViewModel = function() { 
    var self = this; 

    self.tabs = ko.observableArray([ 
     { id: 1, name: 'Tab 1' }, 
     { id: 2, name: 'Tab 2' }, 
     { id: 3, name: 'Tab 3' } 
    ]); 

    self.saveChanges = function() { 

     // Here's where you can get the id of the selected tab 
     // and make your ajax call 

     var tab = $('.tab-content > .active').get(0);   
     alert('Hello from Tab ' + $(tab).attr('id')); 
    }; 
} 

而且标记：

<ul class="nav nav-tabs" data-bind="foreach: tabs"> 
    <li data-bind="css: { 'active': $index() === 0 }"> 
     <a data-bind="attr: { href: '#' + $data.id }, text: $data.name" data-toggle="tab"></a> 
    </li> 
</ul> 

<div class="tab-content"> 
    <!-- ko foreach: tabs --> 
    <div class="tab-pane" data-bind="attr: { id: $data.id }, css: { 'active': $index() === 0 }"> 
     <p data-bind="text: $data.name + ' content...'"></p> 

     <button class="btn" data-bind="click: $parent.saveChanges">Save</button> 
    </div> 
    <!-- /ko --> 
</div> 

在这个例子中，视图模型决定了哪些栏目显示，哪些行为可以在客户端调用。要看到这个实际工作，请参阅此小提琴：http://jsfiddle.net/5qx29/