Return string value from popup form

Question

I want to return a string value from a popup form to be placed in my base form. but I'm not able to get the value in my base form.

I call the popup like this.

<div class="row">
    <div class="col-sm">
        <div class="form-group">
            @Html.LabelFor(model => model.Aandachtspunten, htmlAttributes: new { @class = "control-label col-md-12" })
            <div class="col-md-12">
                @Html.TextAreaFor(model => model.Aandachtspunten, 10, 2, htmlAttributes: new { @class = "boxsizingBorder" });
                <a href="javascript:void(0);" class="btn btn-success btn-sm anchorDetail">Aandachtspunten toevoegen</a>
                @*<button type="button" class="btn btn-success btn-sm  modal-link" data-targeturl="@Url.Action("Select","Aandachtspunt", null)">Aandachtspunten toevoegen</button>*@
            </div>
        </div>
    </div>
</div>

<div id='myModal' class='modal'>  
    <div class="modal-dialog">  
        <div class="modal-content">  
            <div id='myModalContent'></div>  
        </div>  
    </div>   

</div>  

var AandachtspuntPostBackUrl = '/Aandachtspunt/Select';  
    $(function () {  
        $(".anchorDetail").click(function () {  
            debugger;  
            var $buttonClicked = $(this);  
            var id = $buttonClicked.attr('data-id');  
            var options = { "backdrop": "static", keyboard: true };  
            $.ajax({  
                type: "GET",  
                url: AandachtspuntPostBackUrl,  
                contentType: "application/json; charset=utf-8",  
                data: { "Id": id },  
                datatype: "json",  
                success: function (data) {  
                    debugger;  
                    $('#myModalContent').html(data);  
                    $('#myModal').modal(options);  
                    $('#myModal').modal('show');                    

                },  
                error: function () {  
                    alert("Dynamic content load failed.");  
                }  
            });  
        });  

When I push a button in my popup form I want to return some string value to the main form in the TextAreaFor field. But I can't seem to find an way of doing this easy request.

Answer 1

I'm really sorry for the late response. Here is a solution. Hope to help, my friend :))

1) Controller

    public IActionResult Sample()
    {
        return View();
    }

    public IActionResult PartialSample()
    {
        return PartialView("_PartialSample");
    }

2) Sample view

<div class="row">
    <div class="col-sm">
        <div class="form-group">
            <div class="col-md-12">
                @Html.TextBox("ParentName")
                <a href="javascript:void(0);" class="btn btn-success btn-sm anchorDetail">Aandachtspunten toevoegen</a>
            </div>
        </div>
    </div>
</div>

<div id="result">   
</div>

@section Scripts{

    <script>
        $(document).ready(function () {
            var options = { "backdrop": "static", keyboard: true };
            $('.anchorDetail').on('click', function () {

                $.ajax({
                    type: "GET",
                    url: '@Url.Action("PartialSample","Home")',
                    contentType: "application/json; charset=utf-8",
                    datatype: "json",
                    success: function (data) {
                        $('#result').html(data);
                        $('#myModal').modal(options);
                        $('#myModal').modal('show');
                    },
                    error: function () {
                        alert("Content load failed.");
                    }
                });
            });           

        });
    </script>
}

3)Partial View

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="myModalContent">
                <div class="modal-header">
                    <h4 class="modal-title">Modal Header</h4>
                </div>
                <div class="modal-body">
                    <form id="myForm">
                        <div>
                            @Html.Label("Name")
                            @Html.TextBox("Name")
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" id="btnClose" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        function getName() {
            let name = $('#Name').val();
            $('#ParentName').val(name);
        }

        //Hide the modal using Close button
        $('#btnClose').on('click', function () {
            $('#myModal').modal('hide');            
            getName();
        });

        //Hide the modal using Esc
        $("#myModal").on('hide.bs.modal', function () {
            getName();
        });
    });
</script>