如何设置和获取在循环中创建的按钮的 ID？

Posted 2023-05-09

【中文标题】如何设置和获取在循环中创建的按钮的 ID？

【英文标题】：how to set and get id of buttons created within a loop?

【发布时间】：2015-04-26 02:22:21

【问题描述】：

我有一个循环，为每个条目创建一个按钮。但是，我需要为按钮设置一个动态 id 以便使用它并在按钮单击时知道所选条目。

我的控制器从数据库中检索条目列表并使用“ViewBag.List”添加按钮。来自数据库的列表包括 ID、Title 和 Description。

这是视图/Index.cshtml

@model Exams.Models.subjects

@
   ViewBag.Title = "Subjects"


<h2> Current Subjects </h2>

<form method="post" action="@Url.Action("Submit")" >
<table>
   @foreach(var subject in ViewBag.List)
     <tr>
        <td>
           @subject.Title </br>
           @subject.Desc
        </td>
        <td>
          <button name="Submit"> Submit </button>
        <td>
     <tr>
     

</table>

点击按钮后，下一个视图必须包含 "你刚刚注册" + SubjectTitle

应该如何包含主题标题？知道简单的 ViewBag 通过引用保存 SubjectTitle

【问题讨论】：

您不需要ID，只需为所有按钮绑定点击事件并使用$(this).closest('tr').children('td').first()，它将返回包含有关点击按钮的相关数据的TD

【参考方案1】：

3 件事，

1）您需要将点击事件附加到按钮。

2) 在单击的处理程序中使用 $(this).parent().prev() 来定位前一个 td 元素。

3) 获取 td html，在出现 br 时拆分并获取第一个元素以仅获取标题。

$('table button').click(function()
  var titleanddesc = $(this).parent().prev().html();
  alert(titleanddesc.split('<br>')[0]);
); 

Working Demo

【参考方案2】：

使用视图模型来持久化您的数据。视图模型很棒。 Here are a few reasons why.

public class SubjectsViewModel 
    public IEnumerable<Subject> Subjects  get; set; 

使用您使用的任何控制器代码来填充 ViewBag.List 来填充 Subjects 并返回带有 SubjectsViewModel 的视图，类似于：

public ActionResult Subjects() 
    var model = new SubjectsViewModel();

    model.Subjects = db.Subjects;

    return View(model);

你的新观点：

@model Exams.ViewModels.SubjectsViewModel

@
    ViewBag.Title = "Subjects"


<h2> Current Subjects </h2>

@using (Html.BeginForm()) 

    <table>
        @foreach(var subject in Model.Subjects)
            <tr>
                <td>
                    @subject.Title</br>
                    @subject.Desc
                </td>
                <td>
                    <input name="submit" value='@subject.id'> Submit </button>
                </td>
            <tr>
        
    </table>

从我更改的 HTML 来看，我假设您没有大量使用 Razor。 You can read up on Razor here.

然后您可以使用控制器执行此操作：

[HttpPost]
public ActionResult Subjects(string submit) 
    return RedirectToAction("SubjectInfo", new  subjectid = submit );

这告诉控制器传递您命名为“提交”的按钮的值。如果您想重命名它，只需更改 POST 控制器操作中的输入名称和参数即可。

【参考方案3】：

您可以通过这种方式为按钮设置动态id

@foreach (var objBook in ((List<Student>)ViewBag.List).Select((x, i) => new  Data = x, Index = i ))
 
    <tr>
        <td>
             @objBook.Data.Title 
        </td>
        <td>
            <button name="Submit" id="btnSubmit_" + @objBook.Index>  // append Index to Id
                Submit
            </button>
        </td>
    </tr>

【参考方案4】：

Please try with this.  
<form method="post" action="@Url.Action("Submit")" >
<table>
   @foreach(var subject in ViewBag.List)
     <tr>
        <td>
           @subject.Title </br>
           @subject.Desc
        </td>
 <td>
<button name="Submit" " id="[e-mail]" > Submit 
</button>
 </td> 
<tr>
     


</table>