نمایش نتایج 1 تا 2 از 2

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

  1. #1

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

    یک 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);
    }
    });
    });
    });

  2. #2
    کاربر دائمی
    تاریخ عضویت
    مهر 1390
    محل زندگی
    rayancode.ir
    پست
    1,559

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

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

    کد HTML:
    $("#btnEdit").click(function () {
    خوب اینجوری مشخص نیست دار چی رو انتخاب می کنی. این کد میاد اولین ایدی با این نام رو select می کنه.

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

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


    موفق باشی

تاپیک های مشابه

  1. پاسخ: 1
    آخرین پست: چهارشنبه 21 آذر 1397, 19:13 عصر
  2. حرفه ای: set کردن رویداد روی jquery ui calendar اقای هاشمی نژاد
    نوشته شده توسط adameh_bahal در بخش jQuery
    پاسخ: 0
    آخرین پست: یک شنبه 24 آبان 1394, 09:42 صبح
  3. پاسخ: 7
    آخرین پست: دوشنبه 11 فروردین 1393, 00:38 صبح
  4. آموزش: ویدئوی آموزش استفاده از jquery در asp
    نوشته شده توسط dontspeak در بخش ASP.NET Web Forms
    پاسخ: 3
    آخرین پست: شنبه 08 بهمن 1390, 19:35 عصر
  5. سوال: کنترل رویداد ها بروی یک textbox
    نوشته شده توسط peymannaji در بخش طراحی وب (Web Design)
    پاسخ: 2
    آخرین پست: پنج شنبه 31 مرداد 1387, 11:58 صبح

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •