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

Question

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

我的控制器从数据库中检索条目列表，并使用“ViewBag.List”，我添加了按钮。 来自数据库的列表包括ID，标题和描述。

这是view / 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

Answer 1

3件事，

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

2）在clicked handler中使用$(this).parent().prev()来定位前一个td元素。

3）获取td html，在发生br时拆分并获得仅获取标题的第一个元素。

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

工作演示

Answer 2

使用视图模型来保存数据。 查看模型很棒。 以下是几个原因。

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。 你可以在这里阅读Razor。

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

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

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

Answer 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>
}

Answer 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="btnsubmit-@subject.id" > Submit 
</button>
 </td> 
<tr>
     }


</table>