我有以下控制器:knockout.js AJAX结果在ASP.Net MVC
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个项目,则第二次点击返回20个项目中的每一个。我需要以某种方式清除我的viewmodel,并在每次点击搜索按钮时重新填充。
哇。我认为这也是答案,因为正如你所说的,它更接近于面向对象的原则,而且它非常完美。我将使用此方法,因为viewmodel将更接近地匹配视图。谢谢! – steveareeno
顺便说一句,我喜欢你投掷的“搜索”消息。 – steveareeno