Tenho um cshtml, que é mostrado assim: Um sequencia de filtros que são fixos. Quando eu clico em pesquisar, aí pego o retorno de um método na controller via json por uma função jquery e no sucesso do ajax, monto os restante do html na página. Quando eu coloquei tudo fixo primeiro, para testar design e etc, essa linha ia para o fim de tudo e não aparecia. Agora que é o comportamento natural da página, essa linha fica abaixo dos filtros, mas corta o restante dos componentes. Veja como fica. Achei ter alguma div perdida, mas não achei. Veja como fica a página. Veja a linha cortando a palavra CNPJ, Razão Social e etc..
Aqui está meu jquery.
........
$.ajax({
url: '/GerenciarPDV/MontaGridPdv',
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
data: JSON.stringify({ carregaGrid: resultado }),
success: function (data) {
str += '<div class="container col-xs-4" id="tabela">';
str += '<table class="table table-striped table-ordered table-bordered">';
str += '<thead>';
str += '<tr>';
str += '<td><strong>CNPJ</strong></td>';
str += '<td><strong>Razão Social</strong></td>';
str += '</tr>';
str += '</thead>';
str += '<tbody>';
$(data.result).each(function () {
str += '<tr>';
str += '<td><a href=""><small>' + this.CNPJ + '</small></a></td>';
str += '<td><a href=""><small>' + this.RazaoSocial + '</small></a></td>';
str += '</tr>';
})
str += '</tbody>';
str += '</table>';
str += '</div>';
str += '<div class="pull-left">';
str += '<div >';
str += '<label><b>Situação:</b></label>';
str += '<label>Label2</label>';
str += '<label><b>Status:</b></label>';
str += '<label>LabelZ</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Razão Social:</b></label>';
str += '<label>Label4</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Nome de Fantasia:</b></label>';
str += '<label>Label6</label>';
str += '</div>';
str += '<div>';
str += '<label><b>CNPJ:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Endereço:</b></label>';
str += '<label>Label6</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Número:</b></label>';
str += '<label>Label8</label>';
str += '<label><b>Complemento:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Bairro:</b></label>';
str += '<label>Label8</label>';
str += '<label><b>CEP:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Cidade:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Estado:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Telefone Fixo:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Celular:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Tipo:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Qtde Checkouts:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Tipo da Rede:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Nome da Rede:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Contato:</b></label>';
str += '<label>Label6</label>';
str += '</div>';
str += '<div>';
str += '<label><b>Tel. Contato:</b></label>';
str += '<label>Label6</label>';
str += '<label><b>Cel. Contato:</b></label>';
str += '<label>Label8</label>';
str += '</div>';
str += '<div>';
str += '<div>';
str += '<div class="pull-right">';
//str += '<div>';
str += '<button type="button" class="btn btn-danger">Inativar</button>';
str += '<button type="button" class="btn btn-primary">Add</button>';
str += '</div>';
str += '</div>';
str += '</div>';
str += '<div class="pull-right" id="tabela4">';
str += '<br />';
str += '<table class="table table-striped table-ordered table-bordered col-md-4">';
str += '<thead>';
str += '<tr>';
str += '<td><strong>ID Evento</strong></td>';
str += '<td><strong>Tipo</strong></td>';
str += '<td><strong>Usuário</strong></td>';
str += '<td><strong>Data de Inclusão</strong></td>';
str += '</tr>';
str += '</thead>';
str += '<tbody>';
str += '<tr>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>66579012000120</small></td>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>franquia</small></td>';
str += '<td class="col-xs-2 col-sm-2 col-md-2 col-lg-2"><small>66579012000120</small></td>';
str += '<td class="col-xs-6 col-sm-6 col-md-6 col-lg-6"><small>26/06/2014 14:37:00</small></td>';
str += '</tr>';
str += '</tbody>';
str += '</table>';
str += '</div>';
str += '</div>';
str += '</div>';
cont++;
str += '</table>';
$('#montaPesquisaGrid').html(str);
str = "";
............
Aqui está meu CSHTML e a posição onde entra o código.
<div id="tabs-1">
<form role="form"><!--A tag ul contem os titulos das abas-->
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtCnpjPdv" >CNPJ/Razão Social:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtContato" >Contato:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarRede" class="col-sm-2 control-label">Filtrar Rede:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarStatus" class="col-sm-2 control-label">Filtrar Status:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarVisao" class="col-sm-2 control-label">Visão:</label>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtCnpjPdv" placeholder="Digite o Cnpj" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtContato" placeholder="Digite o contato" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarRede" >
<option value="SemFiltro">Sem Filtro</option>
<option value="Associativa">Associativa</option>
<option value="Franquia">Franquia</option>
<option value="Propria">Própria</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarStatus" >
<option value="SemFiltro">Sem Filtro</option>
<option value="Ok">Ok</option>
<option value="Atençao">Atenção</option>
<option value="Erro">Erro</option>
<option value="NaoCadastrado">Não Cadastrado</option>
<option value="Desativado">Desativado</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarVisao" >
<option value="Geral">Geral</option>
<option value="SouzaCruz">Souza Cruz</option>
</select>
</div>
<button type="button" class="btn btn-success" onclick=" return MontaGridPdv();">Pesquisar</button>
<br /><br />
</div>
<div id="montaPesquisaGrid">
</div>
</form>
</div>
O método da controller:
[HttpPost]
public JsonResult MontaGridPdv(carregaGridPesquisa carregaGrid)//
{
ConsultaGeral geral = new ConsultaGeral();
V99_WEBEntities db = new V99_WEBEntities();
V99_QAEntities dba = new V99_QAEntities();
var resultado = (from web in db.T_PDV
join testab in db.T_TipoEstabelecimento on web.IDTipoEstabelecimento equals (testab.IDTipoEstabelecimento)
join trede in db.T_TipoRede on web.IDTipoRede equals (trede.IDTipoRede)
join tusupdv in db.T_UsuarioPDV on web.IDPdv equals (tusupdv.IDPDV)
join tusu in db.T_Usuario on tusupdv.IDUsuario equals (tusu.IDUsuario)
join tstatus in db.T_CRM_StatusPDV on web.CNPJ equals (tstatus.DE_Cnpj)
select new
{
web.CNPJ,
web.RazaoSocial,
web.NomeFantasia,
web.Endereco,
web.Bairro,
web.Cidade,
web.Estado,
web.CEP,
web.Complemento,
web.Numero,
web.QtdeCheckOuts,
web.Telefone,
web.NomeRede,
web.Email,
web.Celular,
web.IS_Ativo,
tstatus.IT_Status,
trede.Nome,
contato = tusu.Nome,
cel_contato = tusu.Celular
});
if (!string.IsNullOrEmpty(carregaGrid.cnpjRazao))
resultado = resultado.Where(cn => cn.CNPJ == carregaGrid.cnpjRazao);
if (carregaGrid.rede != "SemFiltro")
resultado = resultado.Where(cn => cn.Nome == carregaGrid.rede);
if (carregaGrid.status != "SemFiltro")
resultado = resultado.Where(cn => cn.Nome == carregaGrid.status);
if (carregaGrid.visao == "Souza Cruz")
resultado = resultado.Where(cn => cn.Nome == carregaGrid.visao);
var result = resultado.ToList();
return Json(new { result }, JsonRequestBehavior.AllowGet);
}
Aí está todo meu html das abas.
@model List<V99SuporteTecnico.Models.T_PDV>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="pt-BR" class="no-js">
<!--<![endif]-->
<head>
<meta name="viewport" content="width=device-width" />
<title>GerenciarPDV</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="~/Content/Menu.css" rel="stylesheet" />
<link href="~/Content/Styles.css" rel="stylesheet" />
@*<link href="~/Content/PosicaoLayout.css" rel="stylesheet" />*@
@*<link href="~/Content/Agendamento.css" rel="stylesheet" />*@
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="~/Content/bootstrap.min.css" media="screen"/>
<script type="text/javascript" src="~/Scripts/bootstrap.js"></script>
<script type="text/javascript" src="~/Scripts/bootstrap-datepicker.pt-BR.js"></script>
<link href="~/Content/datepicker.css" rel="stylesheet" media="screen"/>
<script src="~/Scripts/bootstrap-datepicker.js" ></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">PDV</a></li>
<li><a href="#tabs-2">Eventos</a></li>
<li><a href="#tabs-3">Formulários</a></li>
@*<li><a href="#agendamento">Agendamento</a></li>*@
<li class="agendamento"><a href="#agendamento">Agendamento</a></li>
</ul>
<div id="tabs-1">
<form role="form"><!--A tag ul contem os titulos das abas-->
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtCnpjPdv" >CNPJ/Razão Social:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="txtContato" >Contato:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarRede" class="col-sm-2 control-label">Filtrar Rede:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarStatus" class="col-sm-2 control-label">Filtrar Status:</label>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<label for="ddlFiltrarVisao" class="col-sm-2 control-label">Visão:</label>
</div>
</div>
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtCnpjPdv" placeholder="Digite o Cnpj" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<input type="text" class="form-control col-sm-2" id="txtContato" placeholder="Digite o contato" />
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarRede" >
<option value="SemFiltro">Sem Filtro</option>
<option value="Associativa">Associativa</option>
<option value="Franquia">Franquia</option>
<option value="Propria">Própria</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarStatus" >
<option value="SemFiltro">Sem Filtro</option>
<option value="Ok">Ok</option>
<option value="Atençao">Atenção</option>
<option value="Erro">Erro</option>
<option value="NaoCadastrado">Não Cadastrado</option>
<option value="Desativado">Desativado</option>
</select>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarVisao" >
<option value="Geral">Geral</option>
<option value="SouzaCruz">Souza Cruz</option>
</select>
</div>
<button type="button" class="btn btn-success" onclick=" return MontaGridPdv();">Pesquisar</button>
<br /><br />
</div>
<div id="montaPesquisaGrid">
</div>
</form>
</div>
<div id="tabs-2">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="txtCnpj" class="col-sm-2 control-label">CNPJ:</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="txtCnpj" placeholder="Digite o Cnpj">
</div>
<label for="imgStatus" class="col-sm-2 control-label">Status:</label>
<div class="col-sm-2">
<img src="~/Images/Certo.png" class="img-responsive col-md-4 control-label" id="imgStatus"/>
</div>
</div>
<div class="form-group">
<label for="txtRazaoSocial" class="col-md-2 control-label">Razão Social:</label>
<div class="col-md-6">
<input type="text" class="form-control" id="txtRazaoSocial" placeholder="Digite a razão social">
</div>
</div>
<div class="form-group">
<label for="txtIdEvento" class="col-md-2 control-label">ID Evento:</label>
<div class="col-md-2">
<input type="text" class="form-control" id="txtIdEvento" placeholder="Digite um evento">
</div>
</div>
<div class="form-group">
<label for="txtDescricao" class="col-md-2 control-label">Descrição:</label>
<div class="col-md-3">
<textarea class="form-control" id="txtDescricao" placeholder="Digite uma descrição" rows="4"></textarea>
</div>
<label for="ddlTipoEvento" class="col-md-2 control-label">Tipo Evento:</label>
<div class="col-md-3">
<select class="form-control" name="ddlTipoEvento" id="ddlTipoEvento" >
<option selected="selected" value="0"></option>
<option value="2">Acesso Remoto</option>
<option value="8">Agendamento de Visita Técnica</option>
<option value="6">Alteração de Cadastro</option>
<option value="9">Ativar PDV</option>
<option value="4">Contato Comercial</option>
<option value="11">Contato Técnico</option>
<option value="10">Inativar PDV</option>
<option value="15">Instalação Extrator Cod. Interno</option>
<option value="16">Processo 2</option>
<option value="14">Processo Interno PDV</option>
<option value="12">Sem Intervenção Técnica</option>
<option value="1">Visita Técnica</option>
</select>
</div>
</div>
<div class="form-group">
<label for="ddlAcao" class="col-md-2 control-label">Ação:</label>
<div class="col-md-3">
<select class="form-control" id="ddlAcao" >
<option selected="selected" value="0"></option>
<option value="2">Acesso Remoto</option>
<option value="8">Agendamento de Visita Técnica</option>
<option value="6">Alteração de Cadastro</option>
<option value="9">Ativar PDV</option>
<option value="4">Contato Comercial</option>
<option value="11">Contato Técnico</option>
<option value="10">Inativar PDV</option>
<option value="15">Instalação Extrator Cod. Interno</option>
<option value="16">Processo 2</option>
<option value="14">Processo Interno PDV</option>
<option value="12">Sem Intervenção Técnica</option>
<option value="1">Visita Técnica</option>
</select>
</div>
<label for="ddlUsuario" class="col-md-2 control-label">Usuário:</label>
<div class="col-md-3">
<select class="form-control" id="ddlUsuario" >
<option selected="selected" value="0"></option>
</select>
</div>
</div>
<div class="control-group">
<label for="txtUsuarioData" class="col-md-2 control-label">Usuário:</label>
<div class="col-md-3">
<input type="text" class="datepicker" id="txtUsuarioData"/>
</div>
<button type="button" class="btn btn-success">Finalizar</button>
</div>
<br />
<div id="subtabs">
<ul>
<li><a href="#tabs-11">EventosPDV</a></li>
<li><a href="#tabs-21">Minhas Tarefas</a></li>
</ul>
</div>
<div id="tabs-11">
</div>
<div id="tabs-21">
</div>
</form>
</div>
<div id="tabs-3">
<div id="tabelaFormRazao-1" class="divHorEsquerda-1">
<table>
<tr>
<td>
@Html.Label("Razão Social:")
</td>
<td>
<input type="text" id="txtRazaoSocialForm" />
</td>
</tr>
<tr>
<td>
@Html.Label("CNPJ:")
</td>
<td>
<input type="text" id="txtCnpjForm" />
</td>
</tr>
<tr>
<td>
@Html.Label("Técnico Responsável:")
</td>
<td>
<input type="text" id="txtTecnicoRespForm" />
</td>
</tr>
<tr>
<td>
@Html.Label("Tratou Com:")
</td>
<td>
@Html.TextBox("txtTratouComForm")
</td>
</tr>
</table>
</div>
<div id="tabelaFormRazao-2" class="divHorEsquerda-2">
<table>
<tr>
<td>
@Html.Label("ID:")
</td>
@if(Model != null && Model.Count > 0)
{
<td>
@* @Html.LabelFor(m => m[0].)*@
</td>
}
</tr>
<tr>
<td>
@Html.Label("OS DTI:")
</td>
<td>
@Html.TextBox("txtOsParceiroForm")
</td>
</tr>
<tr>
<td>
@Html.Label("Qtde Checkouts:")
</td>
<td>
@Html.TextBox("txtQtdCheckoutForm")
</td>
</tr>
<tr>
<td>@Html.CheckBox("Acesso Remoto")Acesso Remoto</td>
<td>@Html.CheckBox("Visita Técnica")Visita Técnica</td>
<td>@Html.CheckBox("Contato Técnico")Contato Técnico</td>
</tr>
</table>
</div>
<div class="divHorEsquerda-3">
@Html.Label("1", new { @style="font-size:72px;top:100%;left:3%" })
</div>
<div class="divHorEsquerda-4">
<fieldset>
<table>
<tr>
<td>@Html.RadioButton("Improdutivo","Reagendar")Improdutivo-Reagendar</td>
</tr>
<tr>
<td>@Html.RadioButton("Improdutivo","PDV Não Apto")Improdutivo-PDV Não Apto</td>
</tr>
<tr>
<td>@Html.RadioButton("Improdutivo","Comercial")Improdutivo-Comercial</td>
</tr>
<tr>
<td>@Html.RadioButton("Improdutivo","Infra Estrutura")Improdutivo-Infra Estrutura</td>
</tr>
<tr>
<td>@Html.RadioButton("Improdutivo","Finalizado")Finalizado</td>
</tr>
</table>
</fieldset>
</div>
</div>
<div id="agendamento">
<table style="width: 100%;">
<tr>
<td class="Formatlabel"><strong>
<label id="lblCNPJ">CNPJ</label>
</strong></td>
<td class="auto-style25">
<input id="txtCNPJ" type="text"/></td>
</tr>
<tr>
<td class="Formatlabel" style="width: 55px;height: 26px;"><strong>
<label id="lblOS">OS:</label></strong></td>
<td class="auto-style26">
<input id="txtOS" type="text" style="color:blue"/></td>
<td>
<input id="btnPesquisar" type="button" value="Pesquisar" onclick=" return MontaAgendamento();" /></td>
</tr>
<tr>
<td></td>
</tr>
</table>
<div id="filtro">
</div>
</div>
</div>
<input type="hidden" id="txtCnpjRazao" />
</body>
<script src="@Url.Content("~/Scripts/jquery.maskedinput.min.js")"></script>
<script src="@Url.Content("~/Scripts/Menu.js")"></script>
<script src="@Url.Content("~/Scripts/main.js")"></script>
<script src="@Url.Content("~/Scripts/jquery-color.js")"></script>
<script src="@Url.Content("~/Scripts/Util.js")"></script>
<script src="@Url.Content("~/Scripts/GerenciarPDV/GerenciarPDV.js")"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
</html>
Veja a nova imagem de outra tab, dentro de uma tab. Não coloquei controle nenhum e já podem ver que existe uma linha delimitadora.