单击 DataTable Row 时 MVC 关闭模式

Posted 2023-03-30

【中文标题】单击 DataTable Row 时 MVC 关闭模式

【英文标题】：MVC Close Modal when DataTable Row is clicked

【发布时间】：2017-12-06 22:09:57

【问题描述】：

我是比较新的 Asp.net mvc。我正在尝试根据大量值选择一个下拉列表。单击下拉菜单时，会弹出一个带有 jquery DataTable 的模式。我正在尝试实现，当单击 DataTable 中的一行时，模式关闭并且该行中的两个值（数据：“名称”和数据：“公司”）被传递回父窗口，以便我可以填充下拉列表。任何帮助将不胜感激。

下拉菜单：

@html.DropDownListFor(model => model.Company,
Enumerable.Empty<SelectListItem>(), 
new @id="drop" )

模态：

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

js 调出模态：

<script>
    var TeamDetailPostBackURL = '/Home/Details';
    $(function () 
        $("#drop").click(function () 
            debugger;
            $("#drop").blur();
            var $buttonClicked = $(this);
            var id = $buttonClicked.attr('data-id');
            var options =  "backdrop": "static", keyboard: true ;
            $.ajax(
                type: "GET",
                url: TeamDetailPostBackURL,
                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.");
                
            );
        );
    );
</script>

部分视图（当点击#t1 中的一行时，我想填充下拉菜单“Drop”）：

@model MvcApplication1.Models.About
@
    ViewBag.Title = "Abouts";
    Layout = "~/Views/Shared/_Layout.cshtml";

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title" id="myModalLabel">FriendsInfo</h4>
</div>     
<div>
    <table id="exampless" class="display" >
        <thead>
            <tr>
                <th>Name</th>
                <th>Company</th>
            </tr>
        </thead>
    </table>
</div>
@section Scripts
    <script src="~/Scripts/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    @Scripts.Render("~/Content/themes/base/css")
    <script>
        $(document).ready(function () 
            $('#exampless').DataTable(
                "ajax": 
                    "url": "/home/loaddata",
                    "type": "GET",
                    "datatype": "json"
                ,
                "columns": [
                         "data": "Name", "autoWidth": true ,
                         "data": "Company", "autoWidth": true 
                ]
            );
        );
    </script>
    

更新：我能够使用这个 javascript 从 DataTable 中获取值：

<script>
        $('#exampless').on('click', 'tr', function () 
            var ddValue = $('td', this).eq(0).text();
            var ddText = $('td', this).eq(1).text();
            $("#closeMod").click()
        );
</script>

我只需要帮助将 var ddValue 和 var ddText 从局部视图返回到父视图。

【问题讨论】：

你遇到了什么错误？ ajax 调用是否返回数据？

没有错误，我只是不确定如何从 dataTable 中获取数据，但我使用以下代码实现了这一点： 我只需要将这些值从部分视图获取到父视图。有什么想法吗？

【参考方案1】：

您应该能够分配它，因为 Modal 不是一个单独的窗口，一旦您加载它，它就会成为 View 的一部分。

类似

$("#drop").val(ddValue);