0

現在、MVC3 と Bootstrap を使用しています。

いくつかの Bootstrap タブを含むビューがあります。また、コントローラーでCreate()関数を呼び出す[作成]ボタンがあります。

[作成]ボタンをクリックすると、次のものが必要になります。

1.- コントローラーに渡すために、アクティブなタブ ID を取得します。

2.- ユーザーがデータを投稿し、ページがリロードされたときに、現在の (アクティブな) タブに留まる

アクティブなタブを取得するには Javascript を使用し、コントローラーに ID を渡すには 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>

どんな助けでも大歓迎です。

前もって感謝します！

4

1 に答える 1

1

これを行うには多くの方法がありますが、使用するテクノロジー/フレームワークによって異なります。通常の MVC に固執したい場合は、AjaxHelpersを参照してください。@Ajax.BeginForm(...)これらはやのようなマークアップ ヘルパーを提供@Ajax.ActionLink(...)し、フォーム データを自動的に送信したり、AJAX 呼び出しを介してリンクからコントローラー アクションを呼び出したりします。

AJAX 呼び出しがどのように行われるかをより詳細に制御したい場合は、Backbone.jsやKnockout.jsなどのクライアント側フレームワークを見ることができます。MVC で MVVM 設計パターンを簡単に採用できるため、実際には Knockout を好みます。たとえば、単純な 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 に答える