Bom tarde,

A página que estou fazendo possui duas tabelas, porém uma tabela é aberta apenas na modal.

A primeira tabela está sem problemas quando não ouve algum click no botão corrigir, segue abaixo a tela.

A segunda tabela abre na modal após o clique do botão corrigir. Segue abaixo a tabela da modal.

O erro acontece quando abre a modal, a primeira tabela recebe a listagem que esta na modal.

Segue imagem abaixo.

Código Fonte

@{
    ViewBag.Title = "Importação Cidades";
    Layout = "~/Views/Shared/_Layout.cshtml";

    var List = TempData["list"] != null ? TempData["list"] as IEnumerable<dynamic> : null;
}
<script src="~/Public/js/bootbox.min.js"></script>
<div class="row">
    <div class="span12">
        <div class="widget ">
            <div class="widget-header">
                <i class="icon-user"></i>
                <h3>@ViewBag.title</h3>
            </div>
            <div class="action-table widget-content">
                @if (TempData["ReturnMessage"] != null)
                {
                    <div class="alert alert-info">@TempData["ReturnMessage"]</div>
                }
                <form class="form-horizontal" method="post" enctype="multipart/form-data" action="@Html.Raw("/importacao-planilha/processar-cities")">
                    <div class='control-group'>
                        <label class='control-label'>Nome</label><div class='controls'>
                            <input name="name" type='text' class='span6' id='form-name' required />
                        </div>
                    </div>
                    <div class='control-group'>
                        <label class='control-label'>Excel</label><div class='controls'>
                            <input name='excel' type='file' class='span6' id='excel' required />
                        </div>
                    </div>
                    <br />
                    <div class='form-actions'>
                        <a href='@Html.Raw("/painel")' class='btn'>Voltar</a>
                        <button type='submit' class='btn btn-primary' id="import">Importar</button>
                    </div>
                </form>
                @if (List != null)
                {
                    <div class="table-responsive" id="correcoes">
                        <div class="widget-header">
                            <i class="icon-user"></i>
                            <h3>Correções das Cidades</h3>
                        </div>
                        <div class="table-responsive" id="import-cities">
                            <table class="table-responsive table table-striped mytableCustom display" id="cities">
                                <thead>
                                    <tr>
                                        <th>Id External</th>
                                        <th>Cidade</th>
                                        <th>UF</th>
                                        <th>Ações</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var item in List)
                                    {
                                        <tr>
                                            <td>@item.IdExternal</td>
                                            <td>@item.CitieNameExcel</td>
                                            <td>@item.UF</td>
                                            <td id="import"><input type='button' class='btn btn-primary corrigir' data-city="@item.CitieNameExcel" data-state="@item.UF" data-id="@item.IdExternal" value="Corrigir" /></td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<div class="bs-modal-lg fade modal modal-img" id="modal-image" style="width:40%;height: 70%;" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Lista de Possíveis Cidades Encontradas</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <table style="display:none;" id="importCities">
                    <thead>
                        <tr>
                            <th>Cidades</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody id="tbody"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    function createModal(result, dataCitieVet) {
        $("#importCities").show();
        var obj = JSON.parse(result);
        var tbody = $('#tbody');

        obj.forEach(function (item, index) {
        var $tr = $("<tr>").append(
            $("<td>").text(item.Name),
            $("<td>").append($("<input></input>")
                                    .attr({ "type": "button",
                                            "class": "btn btn-primary insert",
                                            "data-citieName": item.Name,
                                            "data-cityId": item.Id
                                    })
                                    .val("Inserir"))
            ).appendTo("tbody");
        });

        $(".insert").on("click", function () {
            var cityid = $(this).data("cityid"),
            citiename =  $(this).data("citiename"),
            path = "/importacao-planilha/insert-city";
            dataCitieVet.push(cityid, citiename);
            $.ajax({
                type: "POST",
                url: path,
                data: {
                    "data": dataCitieVet
                },
                success: function (result) {
                    bootbox.alert(" Cidade salva com sucesso! ");
                }
            });
        });

        $("#modal-image").modal("show");
        $("#importCities").DataTable();

        $(document).on("shown.bs.modal", function (e) {
            $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
        });
    }

    $(document).ready(function () {
         $("#form-name").val("@TempData["name"]");
        var dataCitieVet = [6];

        Array.prototype.clear = function () {
            this.length = 0;
        };

        $(".corrigir").on("click", function () {
            dataCitieVet.clear();
            var wrongCity = $(this).data("city"),
            state = $(this).data("state"),
            idexternal = $(this).data("id"),
            name = "@TempData["name"]",
            path = "/importacao-planilha/get-cities";

            dataCitieVet.push(idexternal, wrongCity, state,name);
            $.ajax({
                type: "POST",
                url: path,
                data: {
                    "cityWrong": wrongCity,
                    "state": state
                },
                success: function (result) {
                    createModal(result, dataCitieVet);
                }
            });

            var citie = $(this).parent().parent();
            citie.remove();
        });

        $('.mytableCustom').DataTable();
    });
</script>