I have a web page in asp.net which I have programmed as I do My code search by CPF the name of the client.
@{
ViewBag.Title = "EditarTecnico";
}
<h2>Editar Técnico</h2>
<hr>
<div id="cabecalho">
@Html.ActionLink("Atualizar Tecnico", "AtualizarTecnico", "AtualizarTecnico", new { @class = "btn btn-success" })
</div>
<br>
<p>
Procura por CPF: @Html.TextBox("SearchString")
<input type="submit" value="Busca" />
</p>
<script>
</script>
<div>
<table class="table">
<tr>
<thead>
<tr>
<th>Id</th>
<th>Nome</th>
<th>Telefone</th>
<th>CPF</th>
<th>RG</th>
<th>Endereço</th>
<th>Bairro</th>
<th>Ação</th>
</tr>
</thead>
<tbody>
@foreach (var editartecnico in ViewBag.EditarTecnico)
{
<tr data-id="@editartecnico.Id">
<td>@editartecnico.Id</td>
<td>@editartecnico.Nome</td>
<td>@editartecnico.Telefone</td>
<td>@editartecnico.CPF</td>
<td>@editartecnico.RG</td>
<td>@editartecnico.Endereco</td>
<td>@editartecnico.Bairro</td>
<td>
<a class="btn btn-primary btn-alterar" role="button"><i class="glyphicon glyphicon-pencil"></i> Alterar</a>
<a class="btn btn-danger btn-excluir" role="button"><i class="glyphicon glyphicon-trash"></i> Excluir</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<div id="modal_cadastro" class="form-horizontal" style="display:none" role="dialog">
<fieldset>
<div class="row">
<div class="form-group">
@Html.Label("txt_codigo", "Código", new { @class = "col-md-3 control-label" })
<div class="col-md-2">
@Html.TextBox("txt_codigo", null, new { @class = "form-control", disabled = "true" })
</div>
<br><br>
@Html.Label("txt_nome", "Nome", new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.TextBox("txt_nome", null, new { @class = "form-control" })
</div>
<br><br>
@Html.Label("txt_telefone", "Telefone", new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.TextBox("txt_telefone", null, new { @class = "form-control" })
</div>
<br><br>
@Html.Label("txt_cpf", "CPF", new { @class = "col-md-3 control-label", sortOrder = ViewBag.NomeParam })
<div class="col-md-9">
@Html.TextBox("txt_cpf", null, new { @class = "form-control" })
</div>
<br /><br />
@Html.Label("txt_rg", "RG", new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.TextBox("txt_rg", null, new { @class = "form-control" })
</div>
<br /><br />
@Html.Label("txt_endereco", "Endereço", new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.TextBox("txt_endereco", null, new { @class = "form-control" })
</div>
<br /><br />
@Html.Label("txt_bairro", "Bairro", new { @class = "col-md-3 control-label" })
<div class="col-md-9">
@Html.TextBox("txt_bairro", null, new { @class = "form-control" })
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="modal-footer">
<a id="btn_sair" class="btn btn-default" role="button" data-dismiss="modal"><i class="glyphicon glyphicon-remove"></i> Sair</a>
<a id="btn_confirmar" class="btn btn-primary" role="button"><i class="glyphicon glyphicon-ok"></i> Salvar</a>
</div>
</div>
</div>
</div>
</fieldset>
</div>
@section Scripts{
<script>
function abrir_form(dados) {
if (dados.Id > 0)
$('#txt_codigo').val(dados.Id);
else
$('#txt_codigo').val('');
$('#txt_nome').val(dados.Nome);
$('#txt_telefone').val(dados.Telefone);
$('#txt_cpf').val(dados.CPF);
$('#txt_rg').val(dados.RG);
$('#txt_endereco').val(dados.Endereco);
$('#txt_bairro').val(dados.Bairro);
var modal_cadastro = $('#modal_cadastro');
bootbox.dialog({
title: '@ViewBag.Title',
message: modal_cadastro
})
.on('shown.bs.modal', function () {
modal_cadastro.show(0, function () {
$('#txt_nome').focus();
});
})
.on('hidden.bs.modal', function () {
modal_cadastro.hide().appendTo('body');
});
}
function criar_linha_grid(dados) {
var ret = '<tr data-id=' + dados.Id + '>' +
'<td>' + dados.Id + '</td>' +
'<td>' + dados.Nome + '</td>' +
'<td>' + dados.Telefone + '</td>' +
'<td>' + dados.CPF + '</td>' +
'<td>' + dados.RG + '</td>' +
'<td>' + dados.Endereco + '</td>' +
'<td>' + dados.Bairro + '</td>' +
'<td>' +
'<a class="btn btn-primary btn-alterar" role="button" style="margin-right: 4px"><i class="glyphicon glyphicon-pencil"></i> Alterar</a>' +
'<a class="btn btn-danger btn-excluir" role="button"><i class="glyphicon glyphicon-trash"></i> Excluir</a>' +
'</td>' +
'</tr>';
return ret;
}
$(document).on('click', '#btn_incluir', function () {
abrir_form({ Id: 0, Nome: ''});
})
.on('click', '.btn-alterar', function () {
var btn = $(this),
id = btn.closest('tr').attr('data-id'),
url = '@Url.Action("ObterTecnico", "Tecnico")';
param = { 'id': id };
$.post(url, param, function (response) {
if (response) {
abrir_form(response);
}
});
})
.on('click', '.btn-excluir', function () {
var btn = $(this),
tr = btn.closest('tr'),
id = tr.attr('data-id'),
url = '@Url.Action("ExcluirTecnico", "Tecnico")',
param = { 'id': id };
bootbox.confirm({
message: "Confirma a exclusão do Tecnico?",
buttons: {
confirm: {
label: 'Sim',
className: 'btn-success'
},
cancel: {
label: 'Não',
className: 'btn-danger'
}
},
callback: function (result) {
if (result) {
$.post(url, param, function (response) {
if (response) {
tr.remove();
}
});
}
}
});
})
.on('click', '#btn_confirmar', function () {
var btn = $(this),
url = '@Url.Action("SalvarTecnico", "Tecnico")',
param = {
Id: $('#txt_codigo').val(),
Nome: $('#txt_nome').val(),
Telefone: $('#txt_telefone').val(),
CPF: $('#txt_cpf').val(),
RG: $('#txt_rg').val(),
Endereco: $('#txt_endereco').val(),
Bairro: $('#txt_bairro').val()
};
$.post(url, param, function (response) {
if (param.Id == 0) {
var table = $('#grid_tecnico').find('tbody'),
linha = criar_linha_grid(response);
table.append(linha);
}
else {
var linha = $('#grid_cliente').find('tr[data-id=' + param.Id + ']').find('td');
linha
.eq(0).html(param.Id).end()
.eq(1).html(param.Nome).end()
.eq(2).html(param.Telefone).end()
.eq(3).html(param.Endereco);
}
$('#modal_cadastro').parents('.bootbox').modal('hide');
})
})
</script>
}
bold text