Append Selected Text from Partial View Modal to Text Box in Parent View - .NET Core MVC

Question

I am using ASP.NET Core 3.1 MVC to build my application. I have a view which has a partial view in the form of a modal that adds data to the parent view. My modal has a table and select buttons. My goal is to append the selected text from the modal to a text box in the parent view.

I am using jQuery to capture and add this information, but I am open to other suggestions (no added plugins please).

[Index]Parent View:

@model MyApp.Models.Users

@{ 
    ViewData["Title"] = "Index";
}

<div class="container">
    <div class="row">
        <form asp-action="Index" method="post">
            <label asp-for="Qualifications"></label>
            <input id="txtQualifications" asp-for="Qualifications" />
        </form>

        <!--Button trigger for Qualifications Modal-->
        <button type="button" class="btn btn-primary" id="btnQualifications">Add Qualification</button>
        <!--Div that displays the Qualifications Modal-->
        <div class="modal fade" id="divQualifications" role="dialog" data-url="@Url.Action("_Qualifications", "Parent")"
    </div>
</div>

@section Scripts{ 
    <script type="text/javascript">
        $(document).ready(function () {
            //first I click the btn to open the Qualifications modal
            $('#btnQualifications').click(function () {
                var url = $('#divQualifications').data('url');
                //using get to display the modal in the parent view div
                $.get(url, function (data) {
                    $('#divQualifications').html(data);
                    $('#divQualifications').modal('show');
                    //At this point the modal is open and I want to select values from the table
                    //to append to the text box on the parent view
                    $('table button').on('click', function () {
                        //here I want to use my 'Select' button in my Partial View modal to append the text to the txtQualifications
                        //text box in the Parent View
                    });
                });
            });
        });
    </script>

}

[ParentController] Controller (Handles both parent view & partial view):

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Index()
        {
            //there's a query here that loads the view with data
            return View(data)
        }

        //GET: Qualifications Modal (partial view)
        public ActionResult _Qualifications()
        {
            //there's a query here that loads the view with data
            return PartialView(data);
        }

[_Qualifications]Partial View:

@model IEnumerable<MyApp.Models.Qualifications>
<div class="container">
    <div class="row">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Add Qualifications</h4>
                </div>
                <div class="modal-body">
                    <table>
                        <thead>
                            <tr>
                                <td>Select</td>
                                <td>
                                    @Html.DisplayNameFor(model => model.Qualifications)
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(var item in Model)
                            {
                                <tr>
                                    <td>
                                        <button class="btn btn-success">
                                            @Html.HiddenFor(modelItem => item.Qualifications, new { id = item.Id})
                                        </button>
                                    </td>
                                    <td id="tdQualification">
                                        @Html.DisplayFor(modelItem => item.Qualifications)
                                    </td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button>Close</button>
                    <button id="btnQualSave" type="button">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

Parent Model

namespace MyApp.Models
{
    public partial class Users
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Qualifications { get; set; }
    }
}

Partial View Model

namespace MyApp.Models
{
    public partial class Qualifications
    {
        public int Id { get; set; }
        public string Qualifications { get; set; }
    }
}

As the user gets more skills they are added qualifications to their record from the qualifications table. My goal is to append the selected text from the modal to a text box in the parent view. So far I get undefined when I try to select the value from the modal.

Edit: just to clarify, I want the text to append to the text box as soon as the 'Select' button is clicked. Disregard the save button for now. Thanks for your help!

Answer 1

Here is a demo worked:

Qualifications(I change string Qualifications to string Qualification):

public class Qualifications
    {
        public int Id { get; set; }
        public string Qualification { get; set; }
    }

_Qualifications.cshtml:

<div class="container">
    <div class="row">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>Add Qualifications</h4>
                </div>
                <div class="modal-body">
                    <table>
                        <thead>
                            <tr>
                                <td>Select</td>
                                <td>
                                    @Html.DisplayNameFor(model => model.Qualification)
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                                @foreach (var item in Model)
                                {
                                    <tr>
                                        <td>
                                            <button class="btn btn-success" id="@item.Id">
                                            </button>
                                        </td>
                                        <td id="tdQualification">
                                            @Html.DisplayFor(modelItem => item.Qualification)
                                        </td>
                                    </tr>
                                }
                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button id="btnClose">Close</button>
                    <button id="btnQualSave">Save Changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

Index.cshtml:

<div class="row">
    <form asp-action="Index" method="post">
        <label asp-for="Qualifications"></label>
        <input id="txtQualifications" asp-for="Qualifications" />
    </form>

    <!--Button trigger for Qualifications Modal-->
    <button type="button" class="btn btn-primary" id="btnQualifications">Add Qualification</button>
    <!--Div that displays the Qualifications Modal-->
    <div class="modal fade" id="divQualifications" role="dialog" data-url="@Url.Action("_Qualifications", "Parent")">
</div>
</div>

@section Scripts{
    <script type="text/javascript">
    $(document).ready(function () {
        //first I click the btn to open the Qualifications modal
        $('#btnQualifications').click(function () {
            var url = $('#divQualifications').data('url');
            //using get to display the modal in the parent view div
            $.get(url, function (data) {
                $('#divQualifications').html(data);
                $('#divQualifications').modal('show');
                //At this point the modal is open and I want to select values from the table
                //to append to the text box on the parent view
                $('#btnClose').on('click', function () {
                    $('#divQualifications').modal('toggle');
                });
                $('button.btn-success').click(function () {
                    var s = $("#txtQualifications").val();
                    s += "," + $(this).attr('id');
                    $("#txtQualifications").attr("value", s);
                })
                
                

            });
        });
    });
       
    </script>

}

ParentController:

[HttpGet]
        public IActionResult Index()
        {
            Users user = new Users { Id = 1, Qualifications = "q1", Name = "user1" };
            return View(user);
        }
       
        public ActionResult _Qualifications()
        {
            //there's a query here that loads the view with data
            List<Qualifications> list = new List<Qualifications> { new Qualifications { Id = 1, Qualification = "q01" }, new Qualifications { Id = 2, Qualification = "q02" } };
            return PartialView(list);
        }

result: