گرفتن مقدار TextBox با کلیک روی هر ردیفی که دکمه ویرایش آن زده شده است با Jquery

[mehliaeb]

یک Foreach قرار داده شده است که به ازای داده های موجود در جدول Person در دیتابیس یک ردیف از نام و نام خانوادگی زا همراه با دکمه ویرایش و حذف در هر ردیف نمایش میدهد
حالا میخواهیم با کلیک روی دکمه ویرایش ردیف n همان ردیف را ویرایش کند و آیدی و مقدار تکس باکس مربوط به همان ردیف را به تابع jquery بفرستد که در کدی که براتون میزارم این عملیات فقط روی ردیف اول انجام می شود یعنی تغییرات فقط روی ردیف اول تاثیر دارد
لطفا راهنمایی کنید
Controller:


[HttpPost]
public ActionResult EditSubmit(Person person)
{
if (person != null)
{
var PersonInfo = (from s in db.Persons where (s.PersonId == person.PersonId) select s).First();
PersonInfo.PersonId = person.PersonId;
PersonInfo.FirstName = person.FirstName;
PersonInfo.LastName = person.LastName;
db.SaveChanges();
}

return RedirectToAction("Index");
}


View:


<div class="container ">
<div class="row ">
<div class="col-sm-2" style="background-color:lavenderblush;">حذف</div>
<div class="col-sm-2" style="background-color:lavenderblush;">ویرایش</div>
<div class="col-sm-2" style="background-color:lavenderblush;">نام خانوادگی</div>
<div class="col-sm-2" style="background-color:lavenderblush;">نام </div>
</div>

@foreach (var item in Model)
{
<div class="row ">
@*حذف*@
<div class="col-sm-2">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#DeleteModal">حذف</button>

<!-- Modal -->
<div class="modal fade" id="DeleteModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title" dir="rtl">حذف کاربر</h4>
</div>
<div class="modal-body">
<div class="form-group hidden" dir="rtl">
@Html.LabelFor(model => item.PersonId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10 hidden">
@Html.EditorFor(model => item.PersonId, new { htmlAttributes = new { @class = "form-control personid", id = "PersonId" } })
@Html.ValidationMessageFor(model => item.PersonId, "", new { @class = "text-danger" })
</div>
</div>
<p>آیا از حذف کاربر مطمئن هستید؟</p>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" id="btnDelete">بله</button>
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">خیر</button>
</div>
</div>
</div>
</div>
</div>
</div>
@*ویرایش*@
<div class="col-sm-2">

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#EditModal@(item.PersonId)">ویرایش</button>

<!-- Modal -->
<div class="modal fade" id="EditModal@(item.PersonId)" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title" dir="rtl">ویرایش کاربر</h4>
</div>
<div class="modal-body">

<div class="form-group hidden" dir="rtl">
@Html.LabelFor(model => item.PersonId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10 hidden">
@Html.EditorFor(model => item.PersonId, new { htmlAttributes = new { @class = "form-control personid",id="PersonId"} })
@Html.ValidationMessageFor(model => item.PersonId, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group" dir="rtl">
<div class="col-md-10" dir="rtl">
@Html.EditorFor(model => item.FirstName, new { htmlAttributes = new { @class = "form-control",id="FirstName"} })
@Html.ValidationMessageFor(model => item.FirstName, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => item.FirstName, htmlAttributes: new { @class = "control-label col-md-2" })

</div>
<div class="form-group" dir="rtl">
<div class="col-md-10">
@Html.EditorFor(model => item.LastName, new { htmlAttributes = new { @class = "form-control",id="LastName" } })
@Html.ValidationMessageFor(model => item.LastName, "", new { @class = "text-danger" })
</div>
@Html.LabelFor(model => item.LastName, htmlAttributes: new { @class = "control-label col-md-2" })

</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal">انصراف</button>
<button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" id="btnEdit" >ذخیره تغییرات</button>
</div>
</div>

</div>
</div>
</div>

@*باقی*@
<div class="col-sm-2">@item.LastName</div>
<div class="col-sm-2">@item.FirstName</div>
<div class="w-100 d-none d-md-block"></div>
</div>

}

</div>



Jquery Func:



$(document).ready(function () {
//firing function on button click
$("#btnEdit").click(function () {
debugger;
//Creating Javascript array to post it as json data
var PersonModel = {
PersonId: $("#PersonId").val(),
FirstName: $("#FirstName").val(),
LastName: $("#LastName").val(),
};
$.ajax(
{
method: "POST",
url: "/Person/EditSubmit",
contentType: "application/json",
data: JSON.stringify(
{
person: PersonModel
}),
error: function (response) {
alert(response.responseText);
},
//After successfully inserting records
success: function (response) {
//Reload Partial view to fetch latest added records
alert(response);
}
});
});
});

[r4hgozar]

سلام.
وقتی یه حلقه داری نباید id رو بگیری اینجوری کد دچار مشکل میشه. باید class استفاده کنی.
اشتباه دوم هم اینه که select که دااری انجام میدی اشتباه .



$("#btnEdit").click(function () {


خوب اینجوری مشخص نیست دار چی رو انتخاب می کنی. این کد میاد اولین ایدی با این نام رو select می کنه.

باید از دستور this در جی کوئری استفاده کنی.
https://www.w3schools.com/jquery/jquery_events.asp

صفحه بالا رو بخون و کد خودت رو edit کن


موفق باشی