从模态中的分部获取数据元素,用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的用户,所以如果我错过了一些简单的东西或使用了错误的方法,我很抱歉。

谢谢。

从模态中的分部获取数据元素,用Javascript设置父级中文本框的值

onButtonClick函数应该在要访问的$(document).ready(...)之外。因为onButtonClick函数的作用域,所以只能在$(document).ready(...)函数创建的作用域中访问。