獲取按鈕上的活動標籤並將其傳遞給控制器​​

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/