Как активировать вкладку при нажатии кнопки и передать ее контроллеру

Question

В настоящее время я работаю с MVC3 и Bootstrap.

У меня есть вид с несколькими вкладками Bootstrap. Также у меня есть кнопка [Create], которая вызывает функцию Create() в контроллере.

При нажатии на кнопку, мне нужно следующее [Создать]:

1.- Получить активную вкладку идентификатор, чтобы передать его на контроллер.

2.- Оставайтесь на вкладке текущей (активной), когда пользователь отправил данные и страница перезагружается

Я знаю, что мне нужно использовать Javascript, чтобы получить активную вкладку и AJAX, чтобы передать идентификатор в контроллер. Я попытался смешать их безуспешно по-разному. На самом деле я новичок в 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

Существует много способов сделать это, это зависит от того, какие технологии/рамки вы хотите использовать. Если вы хотите придерживаться ванильного MVC, вы можете посмотреть на AjaxHelpers. Они предлагают помощники разметки, такие как @Ajax.BeginForm(...) и @Ajax.ActionLink(...), которые автоматически отправляют данные формы или вызывают действие контроллера по ссылке через вызов AJAX.

Если вы хотите получить больше контроля над вызовами AJAX, вы можете посмотреть на фреймворки на стороне клиента, такие как Backbone.js или Knockout.js. Я действительно предпочитаю Knockout, поскольку он позволяет вам легко принять шаблон MVVM в MVC. Например, вот простой вид Нокаут модель:

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/