MVC Close Modal when DataTable Row is clicked

Question

I am rather new Asp.net mvc. I am trying to have a dropdownlist selected based on a large list of values. When the dropdown is clicked a modal is brought up with a jquery DataTable in side. I am trying to implement when a row from the DataTable is clicked the modal is closed and the two values(data: "Name" and data: "Company") from the row are passed back to parent window so i can populate the dropdownlist. any help would be well appreciated.

Dropdown:

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

modal:

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

js to bring up modal:

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

partial view(when a row in #t1 in clicked i would like to populate the dropdown "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" width="100%">
        <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>
    }

Update: I was able to get the values from the DataTable with this javascript:

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

I just need help with getting var ddValue and var ddText from the partial view back to the parent view.

and what error are you getting? is ajax call returning data? — Daniel Manta
no error i just was not sure how to get the data from the dataTable, but i accomplished that with this code: <script> $('#exampless').on('click', 'tr', function () { var ddText = $('td', this).eq(0).text(); var ddValue = $('td', this).eq(1).text(); $("#closeMod").click() }); </script> i just need to get these values from the partial view to parent view. Any ideas? — J.W.S

Dugggie Dugggie · Accepted Answer · 2017-12-08T10:11:23

You should just be able to assign it as the Modal is not a separate window, once you load it it becomes part of the View.

Something like

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

MVC Close Modal when DataTable Row is clicked

1 Answers