我想使用Bootstrap Modal Dialog创建查找数据。当用户从模态对话框中的记录列表中单击“选择链接”时，所选的客户端名称将传递到主页面中的文本框。以下是代码
HTML文件（主页）
<script>
$(function () {
var viewModel = {
workorder: ko.observableArray(@Html.Raw(Model.WorkOrdersJSON)),
}
ko.applyBindings(viewModel);
});
</script>
@using (var form = Html.Bootstrap().BeginForm(new { @class = "form-horizontal", id = "myForm" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="form-group">
@Html.Partial("_ClientInfo")
</div>
}
Html.Partial文件（模态对话框）
<label for="inputClientName" class="col-lg-2 control-label" id="clientname" >Client Name</label>
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control input-sm" id="clientName">
<span class="input-group-btn">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-sm">Search Client</a>
</span>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">List of client</h4>
</div>
<div class="modal-body">
<!-- Modal body-->
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="tables">List of Work Order</h1>
</div>
<div class="bs-example">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Report Date</th>
<th>Category</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody >
<!-- ko foreach: workorder -->
<tr data-bind="click: $parent.selectTag">
<td>
<span id="test" data-bind="text: wO_Id"></span>
</td>
<td>
<span data-bind="text: wO_Date"></span>
</td>
<td>
<span data-bind="text: wO_Category"></span>
</td>
<td>
<span data-bind="text: problem_Subject"></span>
</td>
<td>
<span data-bind="text: problem_Description"></span>
</td>
<td>
<a href="#" class="tag-select">Select</a>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- /example -->
</div>
</div>
<!-- /model body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
答案 0 :(得分：1)
在这个问题上花了几个小时后，我终于明白了。以下是我的新代码
HTML文件（主页）
<script>
function ConfigsViewModel() {
var self = this;
this.clientinformation=ko.observableArray(@Html.Raw(Model.ClientInfoJSON));
this.Selected = ko.observable(this.clientinformation()[0]);
this.SelectConfig = function (Config) {
self.Selected(Config);
$("#clientName").val(this.clientName);
$("#hideclientId").val(this.clientId);
$('#myModal').modal('hide');
}
}
ko.applyBindings(new ConfigsViewModel());
</script>
Html.Partial文件（模态对话框）
<label for="inputClientName" class="col-lg-2 control-label">Client Name</label><input id="hideclientId" type="hidden" />
<div class="col-lg-4">
<div class="input-group">
<input type="text" class="form-control input-sm" id="clientName">
<span class="input-group-btn">
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-sm">Search Client</a>
</span>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">List of client</h4>
</div>
<div class="modal-body">
<!-- Modal body-->
<div class="row">
<div class="col-lg-12">
<div class="bs-example">
<table class="table table-striped table-bordered table-hover" id="tableClient">
<thead>
<tr>
<th>#</th>
<th>Client Name</th>
<th>Category</th>
<th>Subject</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: clientinformation -->
<tr data-bind="click: $parent.SelectConfig">
<td>
<span id="test" data-bind="text: clientId"></span>
</td>
<td>
<span data-bind="text: clientName"></span>
</td>
<td>
<span data-bind="text: wO_Category"></span>
</td>
<td>
<span data-bind="text: problem_Subject"></span>
</td>
<td>
<span data-bind="text: problem_Description"></span>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
<!-- /example -->
</div>
</div>
<!-- /model body -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->