时间戳

首页 > 解决方案 > 从弹出表单返回字符串值

jquery - 从弹出表单返回字符串值

问题描述

我想从弹出表单中返回一个字符串值，以放置在我的基本表单中。但我无法以我的基本形式获得价值。

我这样称呼弹出窗口。

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

当我在弹出表单中按下按钮时，我想将一些字符串值返回到TextAreaFor字段中的主表单。但我似乎无法找到一种方法来完成这个简单的请求。

标签： jqueryajaxasp.net-mvc-4

解决方案

对于迟到的回复，我真的很抱歉。这是一个解决方案。希望能帮到你，我的朋友：））

1) 控制器

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

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

2) 示例视图

<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)局部视图

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

推荐阅读