0

私は次のコントローラーを持っています：

        public JsonResult EquipmentSelect(string term)
    {
        var equipmentSearchViewModel = new EquipmentSearchViewModel
        {
            EquipmentList = iEquipmentRepository.FindBy(t => t.equipment_name.Contains(term)
                || t.equipment_id.Contains(term)),
        };

        var filteredEquipment = equipmentSearchViewModel.EquipmentList.ToList();
        var sortableData = filteredEquipment.AsQueryable();
        var jsonData = new
        {
            rows = (
                     from m in filteredEquipment
                     select new
                     {
                         equipment_id = m.equipment_id,
                         equipment_name = m.equipment_name
                     }
                  ).ToArray()
        };

        return Json(jsonData, JsonRequestBehavior.AllowGet);
    }

および次の js ファイル:

$(function () {
    $('#search').click(function () {
        var searchText = $('#txtsearch').val();
        getEquipment(searchText);
    })
})

// View model declaration
var EquipmentViewModel = {
    Profiles: ko.observableArray([])
};

// Bind the equipment
bindData = function (equipment) {
    var EquipmentViewModel = {
        Profiles: ko.observableArray([])
    };
    EquipmentViewModel.Profiles(equipment);
    ko.applyBindings(EquipmentViewModel);
}

getEquipment = function (searchTerm) {
    var url = 'EquipmentSelect/Equipment';
    $.ajax({
        url: url,
        cache: false,
        contentType: 'application/json',
        data: '{"term": "' + searchTerm + '"}',
        type: "POST",
        success: function (result) {
            bindData(result.rows);
        },
        error: function (jqXHR) {
            $('#message').html(jqXHR.statusText);
        }
    });
}

そして最後に私の見解：

@{
    ViewBag.Title = "KnockoutExample";
}
<script src="~/Scripts/knockout-2.2.1.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/koViewModel.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<h2>Knockout Example</h2>
<div>
    <fieldset>
        <legend>Search</legend>
        <span>Search For</span>
        <input type="text" name="txtsearch" id="txtsearch" />
        <input type="button" value="Submit" id="search"/>
    </fieldset>
</div>
<table id="myTable" class="table table-striped table-bordered table-condensed">
    <tr> 
        <th>Equipment ID</th>
        <th>Equipment Name</th>
    </tr>
    <tbody data-bind="foreach: Profiles">
        <tr">
            <td data-bind="text: equipment_id"></td>
            <td data-bind="text: equipment_name"></td>
        </tr>
    </tbody>
</table>
<p id="message"></p>

検索ボタンをクリックすると、目的の結果が得られます。もう一度クリックすると、同じデータが取得されますが、元のカウントごとに複製されます。たとえば、最初の呼び出しで 20 個のアイテムが返された場合、2 回目のクリックでは 20 個のアイテムがそれぞれ 20 個ずつ返されます。ビューモデルを何らかの方法でクリアし、検索ボタンがクリックされるたびに再入力する必要があります。

4

3 に答える 3

6

ノックアウトを使用すると、ページのすべての状態と動作を含む、ページ自体の最上位のビュー モデルを簡単に作成できることがわかりました。

var PageViewModel = {
    Profiles: ko.observableArray([]),
    SearchTerm: '', // observable not needed, doesn't trigger any changes
    Message: ko.observable(''),
    GetEquipment: function () {
        var self = this; // Retain scope of view model
        self.Message('Searching...');
        $.ajax({
            url: 'EquipmentSelect/Equipment',
            cache: false,
            contentType: 'application/json',
            data: ko.toJSON({ term: self.SearchTerm }),
            type: "POST",
            success: function (result) {
                self.Profiles(result.rows); // Re-set entire observable array
                self.Message('');
            },
            error: function (jqXHR) {
                self.Message(jqXHR.statusText);
            }
        });
    }
}
$(function () {
    ko.applyBindings(PageViewModel);
})

そうすると、JavaScript コードでオブジェクト指向の原則に戻り始めるだけでなく、ビューもより単純にビュー モデルにバインドされます。単一の id 属性を定義する必要さえありません。

@{
    ViewBag.Title = "KnockoutExample";
}
<script src="@Url.Content("~/Scripts/knockout-2.2.1.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/koViewModel.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<h2>Knockout Example</h2>
<div>
    <fieldset>
        <legend>Search</legend>
        <span>Search For</span>
        <div class="input-append">
            <input type="text" data-bind="value: SearchTerm" />
            <input type="button" value="Submit" class="btn" data-bind="click: GetEquipment" />
        </div>
    </fieldset>
</div>
<table class="table table-striped table-bordered table-condensed">
    <tr> 
        <th>Equipment ID</th>
        <th>Equipment Name</th>
    </tr>
    <tbody data-bind="foreach: Profiles">
        <tr>
            <td data-bind="text: equipment_id"></td>
            <td data-bind="text: equipment_name"></td>
        </tr>
    </tbody>
</table>
<p data-bind="text: Message"></p>

removeAll() は必要ありません。すでにノックアウト バインディングを使用している場合は、jQuery スタイルのクリック イベントや ID ルックアップは必要ありません。また、ページ レベルのビュー モデルを複数回バインドする必要はありません。

于 2013-05-16T07:25:32.647 に答える
2

JavaScript はほぼ完成していますが、いくつか微調整が必​​要です。

$(function () {
    function onSearchClick() {
        var searchText = $('#txtsearch').val();
        getEquipment(searchText);
    }   

    // View model declaration
    var EquipmentViewModel = {
        Profiles: ko.observableArray([])
    };

    function getEquipment (searchTerm) {
        var url = 'EquipmentSelect/Equipment';
        $.ajax({
            url: url,
            cache: false,
            contentType: 'application/json',
            data: '{"term": "' + searchTerm + '"}',
            type: "POST",
            success: function (result) {
                EquipmentViewModel.Profiles(result.rows);
            },
            error: function (jqXHR) {
                $('#message').html(jqXHR.statusText);
            }
        });
    }

    $(document).ready(function(){       
        $('#search').click(onSearchClick);
        ko.applyBindings(EquipmentViewModel);
    });
})
于 2013-05-16T00:54:27.343 に答える
0

これを試して：

bindData.EquipmentViewModel.Profiles.removeAll() のように:

    getEquipment = function (searchTerm) {
    var url = 'EquipmentSelect/Equipment';
    bindData.EquipmentViewModel.Profiles.removeAll() 
    $.ajax({
        url: url,
        cache: false,
        contentType: 'application/json',
        data: '{"term": "' + searchTerm + '"}',
        type: "POST",
        success: function (result) {
            bindData(result.rows);
        },
        error: function (jqXHR) {
            $('#message').html(jqXHR.statusText);
        }
    });
}
于 2013-05-15T23:45:10.407 に答える