如何从 Select/Option 中获取值并插入到 href

Question

如果可能的话，我需要帮助。我有一个教室列表，如下图所示。我想在“选择选项”中列出所有教师，当用户选择教师时，他可以点击保存，课堂将被更新，就像在 href 中一样。如何在 foreach 循环后取值？

  <select id="teachers">
    @foreach(var teacher in @Model.Teachers){
      <option value="@teacher.Id">@teacher.Id</option>
    }
    </select>
    
    <a asp-controller="Classroom" asp-action="Update" asp-route-teacherId=""></a>

Answer 1

<a asp-controller="Classroom" asp-action="Update" asp-route-teacherId="XX">Save</a>

首先，对于上面的a标签助手，生成的HTML是这样的：

<a href="/Classroom/Update?teacherId=XX">Save</a> 
or  
<a href="/Classroom/Update/XX">Save</a>

此外，要更新特定教室的教师，您还应该将教室id提交给Update操作方法，因此，生成的URL应该有多个参数（teacherid和classroomId），例如：<a href="/Classroom/Update?teacherId=XX&classroomId=XXX">Save</a>

更多详细信息，请参阅Anchor Tag Helper。

我有一个教室列表，如下图所示。我想要 在“选择选项”中列出所有教师，当用户选择 老师，他可以点击保存，教室将被更新，因为它是 在href中。如何在 foreach 循环后取值？

根据您的描述，每个教室（行）应该有一个 <select> 元素来选择老师和一个“保存”按钮来更新当前行更新，对吧？

在这种情况下，您可以使用 select 元素的 change 事件来获取选定的值，然后更新 <a> 标签的 href 属性。

您可以参考以下示例：

型号：

public class ClassRoom
{
    public int ID { get; set; }
    public string Classroom { get; set; }
    public string SubJect { get; set; }
    public string Teacher { get; set; }
    public DateTime Date { get; set; }

}
public class Teacher
{
    public int Id { get; set; }
    public string Name { get; set; }
}
public class Subject
{
    public int Id { get; set; }
    public string SubjectName { get; set; }
}
public class ClassRoomViewModel
{
    public List<ClassRoom> ClassRooms { get; set; }
    public List<Teacher> Teachers { get; set; }
    public List<Subject> Subjects { get; set; }
}

控制器：

public class ClassRoomController : Controller
{
    public IActionResult Index()
    {
       // you could query the database to get the data. The following is the test data.
        var viewmodel = new ClassRoomViewModel();
        viewmodel.ClassRooms = new List<ClassRoom>()
        {
            new ClassRoom(){ ID=1, Classroom="EOIS1", Date=DateTime.Now },
            new ClassRoom(){ ID=2, Classroom="EOIS2", Date=DateTime.Now }
        };
        viewmodel.Teachers = new List<Teacher>()
        {
            new Teacher(){ Id=101, Name="Tom"},
            new Teacher(){ Id=102, Name="Jack"}
        };

        return View(viewmodel);
    }

    public IActionResult Update(int teacherId, int classroomid)
    {
        //update the classroom

        //redirect to the Index page and refresh the page.
        return RedirectToAction(nameof(Index));
    }
}

查看页面：

@model MVCWebApplication.Models.ClassRoomViewModel 
<table class="table" id="customers" >
    <thead>
         ...
    </thead>
    <tbody>
@foreach (var item in Model.ClassRooms) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.ID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Classroom)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SubJect)
            </td> 
            <td>
                <select id="teachers" class="teachers">
                    <option value="0">select teacher</option>
                    @foreach (var teacher in @Model.Teachers)
                    {
                        <option value="@teacher.Id">@teacher.Name</option>
                    }
                </select>
            </td>
            <td>
                <a asp-controller="ClassRoom" asp-action="Update" asp-route-classroomid="@item.ID" asp-route-teacherId="">Save</a>
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Date)
            </td> 
        </tr>
}
    </tbody>
</table>

@section Scripts{ 
<script> 
    $(function () {
        $(".teachers").each(function (Index, item) {
            $(item).change(function () {
                var teacherid = $(this).val(); //get the selected value.
                var existinghref = $(item).parent().parent().find("a").attr("href");  //get the hyperlink href attribute.
                if (teacherid != 0) {
                    existinghref = existinghref + "&teacherId=" + teacherid; //add the parameter at the end of the request url.
                    $(item).parent().parent().find("a").attr("href", existinghref); //update the hyperlink href attribute.
                }
                else {
                    alert("Please select teacher"); //show prompt to let user select teacher.
                }
            });
        });
    });
</script> 
}

结果如下：