Using Javascript the append didn't work this is ASP.NET CORE

Question

My problem on this the contact fields is not appending on the modal. Based on the console.log I have 2 values of contacts. What's wrong in the javascript why the fields is not showing up?

I want to show up the details of the contacts of the user.

The process is i have an table with the list of users then there is a View button of each users to view all the details of that user. Now when the user clicks the view button it displays the details in the modal. Now the problem in the modal the contact details is not appending the contactdetails User.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);

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

This is the form in Modal design

<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>

UserController

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);
}

first thing I noticed is the code ViewBag.ContactTypes.forEach tries to $('#contactType' + index).append(option) ... yet, that element won't exist in the DOM yet, as it only exists in a string you later add to the DOM - not sure why the rest of the Contact info isn't added, but it's probably a similar error — Jaromanda X
– Jaromanda X, Commented Jul 27, 2024 at 4:05

XieMan · Accepted Answer · 2024-07-29 06:58:05Z

1. ViewBag using in javascript have some mistakes.We should use the Newtonsoft.Json.JsonConvert.SerializeObject method to convert the data into a JSON string and store it in ViewBag. ContactTypes . In the view, we use @Html.Raw() to output the JSON string to make sure it doesn't get escaped. This way, you can use the JSON string in your JavaScript code.

2. there is a mistake in javascript also.We should create the select dom then append options to it.

3. I write an example for you .I hope this can help you.

1). Add ContactTypes in controller.cs

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).display in the 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). The results is:

Collectives™ on Stack Overflow

Using Javascript the append didn't work this is ASP.NET CORE

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related