Javascript 使用Bootstrap 3模式对话框生成查找数据
我想使用引导模式对话框创建查找数据。当用户从模式对话框中的记录列表中单击“选择链接”时,所选客户端名称将传递到主页中的文本框。下面是代码 HTML文件(主页面)Javascript 使用Bootstrap 3模式对话框生成查找数据,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我想使用引导模式对话框创建查找数据。当用户从模式对话框中的记录列表中单击“选择链接”时,所选客户端名称将传递到主页中的文本框。下面是代码 HTML文件(主页面) $(函数(){ var viewModel={ workorder:ko.observearray(@Html.Raw(Model.WorkOrdersJSON)), } 应用绑定(视图模型); }); @使用(var form=Html.Bootstrap().BeginForm(新的{@class=“form horizontal
$(函数(){
var viewModel={
workorder:ko.observearray(@Html.Raw(Model.WorkOrdersJSON)),
}
应用绑定(视图模型);
});
@使用(var form=Html.Bootstrap().BeginForm(新的{@class=“form horizontal”,id=“myForm”}))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
@Html.Partial(“\u ClientInfo”)
}
Html.Partial文件(模式对话框)
客户端名称
&时代;
客户名单
工单清单
#
报告日期
类别
主题
描述
接近
保存更改
在这个问题上花了几个小时之后,我终于找到了答案。下面是我的新代码
HTML文件(主页)
函数ConfigsViewModel(){
var self=这个;
this.clientinformation=ko.observearray(@Html.Raw(Model.ClientInfoJSON));
this.Selected=ko.observable(this.clientinformation()[0]);
this.SelectConfig=函数(配置){
自我选择(配置);
$(“#clientName”).val(this.clientName);
$(“#hideclientId”).val(this.clientId);
$('#myModal').modal('hide');
}
}
applyBindings(新的ConfigsViewModel());
Html.Partial文件(模式对话框)
客户端名称
&时代;
客户名单
#
客户名称
类别
主题
描述
接近
<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>
}
<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 -->
<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>
<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 -->