انتخاب چند سطر با CheckBox و ارسال به کنترلر در Asp net core

پاسخ هوش مصنوعی

برای انجام این کار می توانید از یک جدول HTML با CheckBox در هر سطر استفاده کنید. سپس با استفاده از JavaScript، می توانید مقادیر انتخاب شده را به سرور ارسال کنید. در اینجا یک نمونه از نحوه انجام این کار را مشاهده می کنید:

ابتدا، جدول خود را با CheckBoxها ایجاد کنید:

<table>
    <thead>
        <tr>
            <th>انتخاب</th>
            <th>نام</th>
            <th>سن</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" class="row-check" value="1"></td>
            <td>علی</td>
            <td>25</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="row-check" value="2"></td>
            <td>سارا</td>
            <td>30</td>
        </tr>
    </tbody>
</table>
<button id="submit-button">ثبت اطلاعات</button>

سپس، با استفاده از JavaScript می توانید CheckBoxهای انتخاب شده را جمع آوری و به سرور ارسال کنید:

document.getElementById("submit-button").addEventListener("click", function() {
    const selectedRows = Array.from(document.querySelectorAll(".row-check:checked")).map(checkbox => checkbox.value);
    
    fetch('/controller/action', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(selectedRows)
    })
    .then(response => response.json())
    .then(data => {
        console.log("Success:", data);
    })
    .catch((error) => {
        console.error("Error:", error);
    });
});

در این مثال، ما از Fetch API برای ارسال داده ها به کنترلر استفاده می کنیم. شما باید URL مسیر را به درستی تنظیم کنید.

در کنترلر خود، می توانید داده ها را دریافت کنید:

using Microsoft.AspNetCore.Mvc;

public class YourController : Controller
{
    [HttpPost]
    public JsonResult Action([FromBody] List<int> selectedIds)
    {
        // پردازش اطلاعات 
        return Json(new { success = true });
    }
}

این روش به شما امکان می دهد که سطرهای انتخاب شده را به کنترلر خود ارسال کنید و بر اساس نیازتان از آن استفاده کنید.

استفاده از CheckBox در جدول در Html

براتون یه مثال مینویسم و در این مثال از یک چک باکس در تگ tablr در Html استفاده می کنم. در این مثال از Asp net Core استفاده شده.

<form asp-controller="ControllerName" asp-action="ActionName" method="post">
<table>
   <thead>
      <tr>
         <td>ردیف</td>
         <td>نام</td>
         <td>انتخاب</td>
      </tr>
   </thead>
   <tbody>
      @foreach (var item in Model)
      {
         <tr>
            <td>@counter</td>
            <td>item.Name</td>
            <td>
               <input type="checkbox" id="chk" name="chk" value="@item.UserID" />
            </td>
          </tr>
      counter++;
      }
   </tbody>

</table>
<button type="submit">ثبت</button>
</form>

در جدول بالا یک ستون داریم که یک input با type برابر با checkbox درون اون هست که id و name برابر با chk رو بهش دادیم و یک value هم داره.

 کد بالا تقریبا مشابه تصویر زیر خواهید بود (البته در کدهای بالا استایل ها و کلاس ها برای راحتی کار حذف شده.)

حالا وقتی سطرهای مورد نظر انتخاب میشه و روی دکمه ثبت کلیک بشه اطلاعات به سمت کنترلر و اکشن مورد نظر میره. در اکشن مورد نظر هم می تونید اطلاعات رو به صورت زیر دریافت کنید:

[HttpPost]
public IActionResult myAction(int[] chk)
{
   //
   return View();
}

سطرهای انتخاب شده در اکشن متد به صورت آرایه ای از اعداد دریافت میشه و میتونید ازش استفاده کنید.