HELP, estimated a favor in which way I achieve that when I click on the button called update in the first input I capture the id,
<html>
<head>
<title>Vehiculos</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
//Clean the textbox when submit
function cleartextboxes() {
$("input:text").val("");
}
$(document).ready(function () {
getPropietarioList();
});
var Propietario = {
id: 0,
nombre: "",
apellido: ""
}
// Get all Propietarios to display
function getPropietarioList() {
// Call Web API to get a list of Propietarios
$.ajax({
url: '/api/Propietario/',
type: 'GET',
dataType: 'json',
success: function (Propietarios) {
PropietarioListSuccess(Propietarios);
},
error: function (request, message, error) {
handleException(request, message, error);
}
});
}
// Display all Propietarios returned from Web API call
function PropietarioListSuccess(Propietarios) {
// Iterate over the collection of data
$("#PropietarioTable tbody").remove();
$.each(Propietarios, function (index, Propietario) {
// Add a row to the Propietario table
PropietarioAddRow(Propietario);
});
}
// Add Propietario row to <table>
function PropietarioAddRow(Propietario) {
// First check if a <tbody> tag exists, add one if not
if ($("#PropietarioTable tbody").length == 0) {
$("#PropietarioTable").append("<tbody></tbody>");
}
// Append row to <table>
$("#PropietarioTable tbody").append(
PropietarioBuildTableRow(Propietario));
}
// Build a <tr> for a row of table data
function PropietarioBuildTableRow(Propietario) {
var newRow = "<tr class='success'>" +
//"<td>" + Propietario.id + "</td>" +
"<td><input class='input-nombre' type='text' value='" + Propietario.nombre + "' readonly/></td>" +
"<td><input class='input-apellido' type='text' value='" + Propietario.apellido + " ' readonly/></td>" +
"<td>" +
"<button type='button' " +
"onclick='PropietarioUpdate(this);'" +
"class='btn btn-primary btn-xs' " +
"data-id='" + Propietario.id + "' " +
"data-nombre='" + Propietario.nombre + "' " +
"data-apellido='" + Propietario.apellido + "' " +
">" +
"<span class='glyphicon glyphicon-edit' /> Update" +
"</button> " +
" <button type='button' " +
"onclick='PropietarioDelete(this);'" +
"class='btn btn-primary btn-xs' " +
"data-id='" + Propietario.id + "'>" +
"<span class='glyphicon glyphicon-remove' />Delete" +
"</button>" +
"</td>" +
"</tr>";
return newRow;
}
function onAddPropietario(item) {
var options = {};
options.url = "/api/Propietario";
options.type = "POST";
var obj = Propietario;
obj.nombre = $("#nombre").val();
obj.apellido = $("#apellido").val();
console.dir(obj);
options.data = JSON.stringify(obj);
options.contentType = "application/json";
options.dataType = "html";
options.success = function (msg) {
getPropietarioList();
$("#msg").html(msg);
},
options.error = function () {
$("#msg").html("Error while calling the Web API!");
};
$.ajax(options);
}
function PropietarioUpdate(item) {
var id = $(item).data("id");
var options = {};
//options.url = "/api/Propietario/" + $(item).data("id");
options.url = "/api/Propietario/"
+ id;
options.type = "PUT";
var obj = Propietario;
obj.id = $(item).data("id");
obj.nombre = $(".input-nombre", $(item).parent().parent()).val();
obj.apellido = $(".input-apellido", $(item).parent().parent()).val();
console.dir(obj);
options.data = JSON.stringify(obj);
options.contentType = "application/json";
options.dataType = "html";
options.success = function (msg) {
$("#msg").html(msg);
};
options.error = function () {
$("#msg").html("Error while calling the Web API!");
};
$.ajax(options);
}
function PropietarioDelete(item) {
var id = $(item).data("id");
var options = {};
options.url = "/api/Propietario/"
+ id;
options.type = "DELETE";
options.dataType = "html";
options.success = function (msg) {
console.log('msg= ' + msg);
$("#msg").html(msg);
getPropietarioList();
};
options.error = function () {
$("#msg").html("Error while calling the Web API!");
};
$.ajax(options);
}
// Handle exceptions from AJAX calls
function handleException(request, message, error) {
var msg = "";
msg += "Code: " + request.status + "\n";
msg += "Text: " + request.statusText + "\n";
if (request.responseJSON != null) {
msg += "Message" + request.responseJSON.Message + "\n";
}
alert(msg);
}
var v1 = Propietario;
v1.id = $(item).data("id");
document.getElementsByName("test")[0].value = v1.id;
</script>
</head>
<body>
<h3>Vehiculos Manager</h3>
<form id="form-id">
<div class="table-responsive">
<table id="PropietarioTable" class="table table-condensed">
<thead>
<tr>
<td> Id del Cliente </td>
<td class="btn-xs"><input id="test" type="text" class="form-control input-sm" value="" readonly name="test"/></td>
</tr>
<tr>
<td> Nombre </td>
<td class="btn-xs"><input id="nombre" type="text" class="form-control input-sm" /></td>
</tr>
<tr>
<td> Apellido </td>
<td class="btn-xs"><input id="apellido" type="text" class="form-control input-sm" /></td>
<td><input type="button" id="insert" value="Insert" onclick='onAddPropietario(this) ,cleartextboxes();' class="btn btn-primary btn-xs" /></td>
</tr>
<tr>
</thead>
</table>
</div>
<br />
@*<div id="msg"></div>*@
</form>
</body>
</html> 