Editable Text Box In Jquery And Post Data to ASP.NET

Editable Text Box In Jquery And Post Data to ASP.NET

 

Here i have a grid, and in grid i have a column with Quanity, so if i want to change this quantity with editable text box.

so Here will be Link tag and text box with some id and selectors.

And this will work if there will multiple editable textboxes are there in table grid.

Here First HTML Code

<a href="JavaScript:Void(0);" id="editqty">@item.Qty</a>
<input type="text" style="width:70px;display:none;" class="form-control" id="qtyValue" value="@item.Qty" data-value="@item.PKId" data-target="@item.Qty" />

So above is html code and only <a> tag will be shown on grid, and when you will click on Link then it will hide and text box will show.
In this jquery code all other text box in grid and all things will be same as previous.
Below is jquery code
$("a[id$='editqty']").each(function () {
$(this).on('click', function () {
$("input[type='text'][id$='qtyValue']").hide();
$("a[id$='editqty']").show();
$(this).next('input[type=text]').show();
$(this).next('input[type=text]').val($(this).html());
$(this).hide();
});
});

$("input[type='text'][id$='qtyValue']").blur(function () {

$(this).prev("a[id$='editqty']").show();
$(this).hide();

var prevValue = $(this).attr('data-target');
var savedValue = $(this).val().trim();
var id = $(this).attr('data-value');

if (prevValue != savedValue)

{

$.ajax({
cache: false,
type: "POST",
url: '@Url.Action("Index","Employee")',
data: { savedValue: savedValue, id: id },
success: function (data) {
alert(data);
},
error: function (xhr, ajaxOptions, thrownError) {
if (xhr.status == 401) {
window.location.href =  "Account/Login/";
}
}
});

}

}