使用 Javascript 追加不起作用，这是 ASP.NET CORE

问题描述 投票：0回答：1

我的问题是联系人字段没有附加在模式上。根据 console.log 我有 2 个联系人值。 javascript 有什么问题为什么字段没有显示？

我想显示用户的联系人详细信息。

过程是我有一个包含用户列表的表，然后有每个用户的“查看”按钮来查看该用户的所有详细信息。现在，当用户单击视图按钮时，它会在模式中显示详细信息。现在模式中的问题是联系方式没有附加联系方式 用户.js

$(document).ready(function () {
    $('#usersModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var users = button.data('users');

        $('.view-users-btn').click(function () {
            var usersData = $(this).data('users');
            console.log(usersData);

            // Set resident information
            $('#modalUserID').val(usersData.UserID);
            $('#modalFirstName').val(usersData.FirstName);
            $('#modalMiddleName').val(usersData.MiddleName);
            $('#modalLastName').val(usersData.LastName);
            $('#modalEmail').val(usersData.Email);
            $('#modalPassword').val(usersData.Password);

            // Set dropdown value based on Status
            $('#modalStatus').val(usersData.Status);

            // Handle contacts
            var contacts = usersData.Contacts || [];
            var contactList = $('#modalContacts');
            contactList.empty(); // Clear previous contact inputs

            contacts.forEach(function (contact, index) {
                // Create input fields for each contact

                var contactInput = '<div class="row">';

                // Create dropdown options from ViewBag.AddressTypes
                var contactTypeDropdown = $('#contactType' + index); // This line might not be necessary

                contactInput += '<div class="col-md-6 mb-3">';
                contactInput += '<label for="contactType' + index + '">Contact Type:</label>';
                contactInput += '<select id="contactType' + index + '" class="form-control">';
                ViewBag.ContactTypes.forEach(function (contactType) {
                    var option = $('<option>');
                    option.val(contactType.CODE_VALUE);
                    option.text(contactType.Description);
                    $('#contactType' + index).append(option);
                });
                contactInput += '</select>'; // Added closing tag
                contactInput += '</div>';
                contactInput += '<div class="address-group col-md-6 mb-3">';
                contactInput += '<label for="contactNumber' + index + '">Contact Number:</label>';
                contactInput += '<input id="contactNumber' + index + '" class="form-control" type="text" value="' + contact.ContactNumber + '" readonly>';
                contactInput += '</div>';
                contactInput += '</div>';
                contactList.append(contactInput);
                $('#modalContacts').append(contactInput);

            });
        });
    });
});

这是Modal设计中的形式

<div class="modal fade" id="usersModal" tabindex="-1" role="dialog" aria-labelledby="usersModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="usersModalLabel">User Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container mt-5">
                    <form id="residentForm" asp-controller="User" asp-action="Update" method="post">
                        @Html.AntiForgeryToken()
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                        <div class="row">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="form-group col-md-2 mb-3">
                                        <label for="modalUserID">User ID:</label>
                                        <input for="modalUserID" type="text" id="modalUserID" class="form-control" readonly>
                                    </div>
                                    </div>
                                <div class="row">
                                   
                                    <div class="form-group col-md-4 mb-3">
                                        <label for="modalFirstName">First Name:</label>
                                        <input for="modalFirstName" type="text" id="modalFirstName" class="form-control" readonly>
                                    </div>
                                    <div class="form-group col-md-4 mb-3">
                                        <label for="modalMiddleName">Middle Name:</label>
                                        <input for="modalMiddleName" type="text" id="modalMiddleName" class="form-control" readonly>
                                    </div>
                                    <div class="form-group col-md-4 mb-3">
                                        <label for="modalLastName">Last Name:</label>
                                        <input for="modalLastName" type="text" id="modalLastName" class="form-control" readonly>
                                    </div>
                                </div>
                                <div class="row">
                                
                                <div class="form-group col-md-4 mb-3">
                                    <label for="modalEmail">Email:</label>
                                    <input for="modalEmail" type="text" id="modalEmail" class="form-control" readonly>
                                </div>
                                <div class="form-group col-md-4 mb-3">
                                    <label for="modalPassword">Password :</label>
                                    <input for="modalPassword" type="text" id="modalPassword" class="form-control" readonly>
                                </div>
                                    <div class="form-group col-md-4 mb-3">
                                        <label for="modalStatus">Status:</label>
                                        <select id="modalStatus" class="form-control">
                                            <option value="1">Unlocked</option>
                                            <option value="2">Locked</option>
                                        </select>
                                    </div>
                                </div>
                               
                            </div>
                        </div>
                        <!-- Contacts -->
                        <h5>Contacts</h5>
                        <div id="modalContacts"></div>
                        <button type="submit" class="btn btn-success" id="submitButton" disabled>Submit</button>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>

用户控制器

public async Task<IActionResult> Manage()
{
    //DataTable users =  sqldb.SPCreateTable(allSP.spGetUsers);

    var getAccountStatus = sqldb.SPCreateTable(allSP.sp_GetAccountStatus);
    var additional = new Additional();
    var getContactType = sqldb.SPCreateTable(allSP.sp_getContactType);
    var additionalType = new Additional();

    foreach (DataRow row in getContactType.Rows)
    {
        var contactTypeModel = new ContactTypeModel
        {
            CODE_VALUE = Convert.ToInt32(row.Field<string>("CODE_VALUE")),
            Description = row.Field<string>("Description")
        };

        additionalType.ContactTypes.Add(contactTypeModel);
    }

    // Pass the Additional instance to the view
    ViewBag.ContactTypes = additionalType;

    foreach (DataRow row in getAccountStatus.Rows)
    {
        var accountStatusTypeModel = new AccountStatusTypeModel
        {
            CODE_VALUE = Convert.ToInt32(row.Field<string>("CODE_VALUE")),
            Description = row.Field<string>("Description"),
            IsLockedOut = row.Field<string>("CODE_VALUE") == "2"
        };

        additional.AccountStatus.Add(accountStatusTypeModel);
    }

    // Pass the Additional instance to the view
    ViewBag.AccountStatus = additional;
    var users = await _context.WMS_User
                        .Include(r => r.Contacts)
                        .Include(r => r.UserDetails)
                        .ToListAsync();

    //var viewUserModel = new UserViewModel
    //{
    //    Users = SQLDB.ConvertDataTableToList<UserView>(users)
    //};
    var viewUserModel = users.Select(r => new UserView
    {
        UserID = r.UserID,
        FirstName = r.UserDetails.FirstName,
        MiddleName = r.UserDetails.MiddleName,
        LastName = r.UserDetails.LastName,
        Password = r.Password,
        Role = r.Role,
        Status = r.Status,
        Email = r.UserDetails.Email,
        CreatedDate = r.CreatedDate,
        ModifiedBy = r.ModifiedBy,
        ModifiedDate = r.ModifiedDate,
        Contacts = r.Contacts.Select(c => new UserContact
        {
            UserContactID = c.UserContactID,
            UserID = c.UserID,
            ContactType = c.ContactType,
            ContactNumber = c.ContactNumber,
            CreationDate = c.CreationDate,
            ModifiedBy = c.ModifiedBy,
            ModifiedDate = c.ModifiedDate
        }).ToList()
    }).ToList();

    return View(viewUserModel);
}

enter image description here

javascript asp.net asp.net-mvc asp.net-core asp.net-mvc-4
1个回答
0
投票

1. ViewBag在javascript中使用有一些错误。我们应该使用 Newtonsoft.Json.JsonConvert.SerializeObject 方法转换 将数据转换为 JSON 字符串并将其存储在 ViewBag 中。联系人类型。在 视图中，我们使用 @Html.Raw() 输出 JSON 字符串以确保 它不会逃脱。这样，您就可以在中使用 JSON 字符串 你的 JavaScript 代码。

2。 javascript 中也有一个错误。我们应该创建 select dom，然后向其附加选项。

3. 我给你写了一个例子，希望对你有帮助。

1）。在controller.cs中添加ContactTypes

var _ContactTypes = new List<ContactTypeModel>{
    new(){CODE_VALUE = "1", Description = "type1" },
    new(){CODE_VALUE = "2", Description = "type2" }
};
ViewBag.ContactTypes = Newtonsoft.Json.JsonConvert.SerializeObject(_ContactTypes);

2).在cshtml中显示

<div id="selectBox">
</div>
 
@section Scripts
{
    <script type="text/javascript">
        $(document).ready(function () {
            var contactInput = '<select id="contactType" class="form-control"></select>';//create select dom
            $('#selectBox').append(contactInput)//append to selectBox
            let ContactTypes = @Html.Raw(ViewBag.ContactTypes)//get viewBag data
                ContactTypes.forEach(function (contactType) {
                    var option = $('<option>');
                    option.val(contactType.CODE_VALUE);
                    option.text(contactType.Description);
                    $('#contactType' ).append(option); )//append to select
 
                })
        })
    </script>
   
}

3）。结果是：

enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.