使用多个文本框将数据从视图传递到控制器

本文关键字：视图 控制器 数据 文本 | 更新日期: 2023-09-27 18:04:33

我目前正在制作一个用户活动时间表，用户可以在每个活动中记录他们的时间。我的问题是用户有不同数量的活动分配，所以我不能做一个通用模型或我们一个现有的模型来接受输入参数。我的替代方案是为每个活动设置单独的页面(这样我就可以直接节省单个活动模型的时间)，但这显然效率低下。怎么做呢?

编辑:重申一下我的问题(我是MVC5的新手)。从我看过的教程中，使用按钮将数据从视图传递到控制器的方式是通过一个HTTPPOST，控制器接受一个模型。例如:

pubc class Model
{
  public int id {get; set;}
  public string name {get; set;}
}
public ActionResult Create()
{
   return View();
}

Create.cshtml 

@using (Html.BeginForm()) 
{             
@Html.TextboxFor(mode.Name)
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Create" class="btn btn-default" />
        </div>
    </div>
</div>

通过按下按钮，视图将模型传递给create httppost

[HTTPPOST]
public ActionResult Create(Model model)
{
   /*code here*/
}

现在这是我的问题，我有一个用户的活动列表(每个用户有不同数量的活动)显示在视图中。

对于时间表中的每个活动，它将活动名称和文本框放到逻辑视图中，看起来像这样

Activity         Hours Loggeed
<Activiti> 1       <textbox>
<Activiti> 2       <textbox>
<Activiti> 3       <textbox>

现在我如何创建一个可以接受视图传递的模型的操作，并更新时间表中列出的所有活动的小时数。

控制器

public ActioResult Time()
{
  return View(Timesheet);
}
[HttpPost] 
public ActionResult Time( /* What do I place here?*/)
{
}

时间表模型

public class TimeSheet
{
    public int ID { get; set; }
    public int UserID { get; set; }
    public List<ActivityModel> Activities { get; set; }  
    public DateTime Day {get; set;}
}

基本上，时间表模型有一个用户id和在特定日期分配给该用户的活动列表。

活动模型

public class ActivityModel
{
   public int ID {get; set}
   public string Title {get; set;}
   public string Description {get; set;}
}

谢谢!

使用多个文本框将数据从视图传递到控制器

您可以在ActivityModel类中添加Hours属性，并使用该属性传递用户输入。假设它是一个整数，下面是你的模型类的样子

public class TimesheetModel
{
    public TimesheetModel()
    {
        this.Activities = new List<ActivityModel>();
    }
    public int ID { get; set; }
    public int UserID { get; set; }
    public List<ActivityModel> Activities { get; set; }  
    public DateTime Day { get; set; }
}
public class ActivityModel
{
    public int ID { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
    public int Hours { get; set; }
}

我相信控制器的get方法应该是这样的

public ActionResult Time()
{
    TimesheetModel model = new TimesheetModel();
    model.Activities = ... // get activities here
    return View(model);
}

视图代码将是这样的，它将根据您在上面的控制器get方法中传递的Activities的数量生成文本框

@model TimesheetModel
@using (Html.BeginForm()) 
{
<table>
    <tr>
        <th>
            Activity
        </th>
        <th>
            Hours Logged
        </th>
    </tr>
    @for (int i = 0; i < Model.Activities.Count; i++)
    {
    <tr>
        <td>@Model.Activities[i].Title</td>
        <td><input type="text" name="Activities[@i].Hours" value="@Model.Activities[i].Hours" /></td>
    </tr>
    }
</table>
<button type="submit">Submit</button>
}

您可以使用TimesheetModel作为控制器post方法

[HttpPost]
public ActionResult Time(TimesheetModel model)
{
    foreach (var activity in model.Activities)
    {
        // pass activity.Hours to database here
    }
}

当您提交表单并执行controller post方法时，所有的用户输入值将在model.Activities属性中与文本框的顺序完全相同。例如，如果在第二行输入12，则model.Activities[1].Hours将是12。

如果你还想传递ActivityModel的其他属性，我建议使用隐藏字段。下面是传递ID属性

的示例
@for (int i = 0; i < Model.Activities.Count; i++)
{
<tr>
    <td>@Model.Activities[i].Title</td>
    <td>
        <input type="text" name="Activities[@i].Hours" value="@Model.Activities[i].Hours" />
        <input type="hidden" name="Activities[@i].ID" value="@Model.Activities[i].ID" />
    </td>
</tr>
}

你也可以保存Title和Description使用相同的方式，如果他们不会被改变或显示在表单上。这里的关键是如何根据要绑定它们的属性的名称设置每个<input>标记的name和value属性。

相关文章：