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

我目前正在使用MVC3和引导

我有一个带有几个引导选项卡的视图。我还有一个按钮[Create]，它调用控制器中的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>

创造

我们将非常感谢您的帮助

---

提前感谢！

有很多方法可以做到这一点，这取决于你想使用什么技术/框架。如果你想坚持使用香草MVC，你可以看看。这些提供了标记帮助程序，如

@Ajax.BeginForm（…）

和

@Ajax.ActionLink（…）

通过AJAX调用自动提交表单数据或从链接调用控制器操作

如果您想更好地控制AJAX调用的方式，可以查看客户端框架，如或。实际上，我更喜欢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'));
    };
}

以及标记：

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

拯救

---

在本例中，视图模型确定了要显示哪些选项卡以及可以在客户端调用哪些操作。要查看此操作是否实际有效，请参阅此提琴：

谢谢您的回答。实际上，我在MVC3项目上使用jQuery和Bootstrap。您的提琴工作起来很有魅力，这正是我所寻找的，但看起来非常有趣对我来说很复杂。问题是我想避免使用其他库。我想我已经接近解决方案了，但正如我所说，我是jQuery和AJAX的新手，我知道我的代码缺少按钮上的onClick事件以及控制器调用时的参数。没有“缺点”就其本身而言，我坚持使用jQuery，但我仍然强烈建议学习如何使用我链接到的AjaxHelper。因为我没有真正使用它们，所以我没有提供任何示例。谢谢@sellmeadog，我将按照您的建议了解这些帮助器，并尝试使用它们。