从模态中的分部获取数据元素,用Javascript设置父级中文本框的值
本文关键字:设置 Javascript 文本 中文 模态 获取 元素 数据 | 更新日期: 2023-09-27 17:57:44
我使用的是带有C#的ASP.Net MVC 5。我有一个视图,它带有一个调用模态的按钮,它由一个局部视图填充。部分视图运行foreach循环,以显示联系人数据库中的姓名、电子邮件和"选择"按钮。我希望这个选择按钮可以设置父视图中不可编辑文本框的值。单击该模态中的"选择"按钮后,我希望模态关闭,并且"数据联系人"中的ID应填充父视图中的文本框。我对Javascript或Jquery不是很有经验。
部分视图
<table class="table table-striped table-hover table-responsive table-condensed">
<tr>
<th>
@Html.Label("First Name")
</th>
<th>
@Html.Label("Last Name")
</th>
<th>
@Html.Label("Email")
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.F_name)
</td>
<td>
@Html.DisplayFor(modelItem => item.L_name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Email_1)
</td>
<td>
<button data-contact="@item.Scholarship_contactID" class="btn btn-default" data-dismiss="modal" onclick="javascript:onButtonClick(); return false;">Select</button>
</td>
</tr>
}
</table>
Javascript
<script type="text/javascript">
$(document).ready(function () {
function onButtonClick() {
var contact_id = document.getAttribute.data('contact');
$('#copyto').val(contact_id);
}
});
</script>
父视图中的模式代码看起来像
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Select a Contact:
</div>
<div class="modal-body">
@Html.Partial("ContactPartial", Model.partialModel)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
我想用@item.Scholarship_contactID填充的文本框有以下代码
<div class="form-group">
@Html.LabelFor(model => model.Scholarship_contactID, new { @class = "control-label col-md-2" })
<div class="col-md-2">
@Html.TextBoxFor(model => model.Scholarship_contactID, "", new { @class = "form-control", @placeholder = "Please select a contact", @id = "copyto", @readonly="readonly" })
@Html.ValidationMessageFor(model => model.Scholarship_contactID, null, new { @class = "help-inline" })
</div>
</div>
模态显示部分视图(有一些格式错误,但我稍后会单独处理),但单击"选择"只会关闭模态,而不会填充我需要的文本框。有人能帮我在这里使用Javascript吗?再说一遍,我不是一个长期使用Javascript的用户,所以如果我错过了一些简单的东西或使用了错误的方法,我很抱歉。
谢谢。
onButtonClick
函数应该在要访问的$(document).ready(...)
之外。因为onButtonClick
函数的作用域,所以只能在$(document).ready(...)
函数创建的作用域中访问。