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

Question

我目前正在使用 MVC3 和 Bootstrap。

我有几个 Bootstrap 选项卡的视图。我还有一个按钮 [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>

我们将不胜感激。

提前致谢！

Answer 1

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

如果您想更好地控制如何进行 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'));
    };
}

还有标记：

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