0

我目前正在使用 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>

任何帮助将不胜感激。

提前致谢！

4

1 回答 1

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/

于 2013-03-21T21:09:27.667 回答