单击按钮上的活动选项卡并将其传递给控制器

I'm currently working with MVC3 and Bootstrap.

我目前正在使用MVC3和Bootstrap。

I have a view with several Bootstrap tabs. Also I have a button [Create] that calls to Create() function in controller.

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

When clicking on [Create] button I need the following:

单击[创建]按钮时，我需要以下内容：

1.- Get the active tab id in order to pass it to the controller.

1.-获取活动选项卡ID以将其传递给控制器。

2.- Remain on the current (active) tab when the user has posted data and the page reloads

2.-当用户发布数据并重新加载页面时，保留在当前（活动）选项卡上

I know that i need to use Javascript to get the active tab and AJAX to pass the ID to the controller. I tried to mix them unsuccessfully in different ways. Actually I'm newbie in AJAX but i noticed that I'm missing to call the actions on button click event, but i don´t know how to codify it :(

我知道我需要使用Javascript来获取活动选项卡和AJAX以将ID传递给控制器。我尝试以不同的方式将它们混合不成功。其实我是AJAX的新手，但我注意到我错过了按钮点击事件上的操作，但我不知道如何编纂它:(

My JS:

我的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');
      }
});

[Create] button...

[创建]按钮......

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

Any help will be highly appreciated.

任何帮助将受到高度赞赏。

Thanks in advance!

提前致谢！

1 个解决方案

#1

There are many ways you can do this, it just depends on what technologies/frameworks you want to use. If you want to stick with vanilla MVC, you can look at the AjaxHelpers. These offer markup helpers like @Ajax.BeginForm(...) and @Ajax.ActionLink(...) which automagically submit form data or invoke a controller action from a link via an AJAX call.

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

If you want more control over how AJAX calls are made, you can look at client side frameworks like Backbone.js or Knockout.js. I actually prefer Knockout as it allows you to easily adopt the MVVM design pattern in MVC. For example, here's a simple Knockout view model:

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

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'));
    };
}

And the markup:

和标记：

<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>

In this example, the view model determines which tabs to display and what actions can be invoked on the client. To see this actually working, refer to this fiddle: http://jsfiddle.net/5qx29/

在此示例中，视图模型确定要显示哪些选项卡以及可以在客户端上调用哪些操作。要看到这个实际工作，请参考这个小提琴：http：//jsfiddle.net/5qx29/

#1

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'));
    };
}