如何通过C#引用HTML输入?

时间:2015-03-10 20:51:56

标签: c# asp.net-mvc razor

我已经用.cshtml文档编写了这个C#:

@int[,] grid = new int[81];

for (int i = 0; i < 9; i++)
{
   for (int j = 0; j < 9; j++)
   {
      <input type="text" maxlength="1"/>
   }
}
<button>OK</button>

它创建了一个二维数组'网格'和81个空的html输入框,每个人都应该用一个数字填充用户。当单击“确定”按钮时,“网格”应该从每个输入元素获取值(例如,网格[0] ='第一输入值',网格[1] ='第二输入值'......等),但我不知道如何获取每个输入元素以获取其值,因为每个输入元素都是由嵌套的for循环自动生成的,因此我不能给它一个唯一的id或名称。有什么想法吗?

2 个答案:

答案 0 :(得分:2)

我不确定你是否可以传递二维数组,但你可以用一维进行。

假设您在Grid控制器中有一个动作Home,它接受​​int的数组:

public ActionResult Grid(int[] grid)
{
    // do something with grid
}

在您的视图中,您应该为输入生成名称:

@using (Html.BeginForm("Grid", "Home", FormMethod.Post))
{
    for (int i = 0; i < 9; i++)
    {
        for (int j = 0; j < 9; j++)
        {
            <input type="text" maxlength="1" name="grid[@(i*9 + j)]"/>
        }
    }
    <button>OK</button>
}

提交此表单后,您将grid参数填入表单中的值。

答案 1 :(得分:1)

使用视图模型来表示您编辑的内容将为您提供双向绑定以及添加客户端和服务器端验证的能力

查看模型

public class Column
{
    [Range(1, 9, ErrorMessage = "Please enter a value between 1 and 9")]
    public int Value { get; set; }
}

public class Row
{
    public Row()
    {
        Columns = Enumerable.Repeat(new Column(), 9).ToList();
    }
    public List<Column> Columns { get; set; }
}

public class Grid
{
    public  Grid()
    {
        Rows = Enumerable.Repeat(new Row(), 9).ToList();
    }
    public List<Row> Rows { get; set; }
}

控制器

public ActionResult Edit()
{
    Grid model = new Grid();
    return View(model);
}

[HttpPost]
public ActionResult Edit(Grid model)
{
    // Get the value of the 3rd column in the 5th row
    int value = model.Rows[2].Columns[4];
}

查看

@model ContractWeb.Controllers.Grid
@using(Html.BeginForm())
{
    for(int i = 0; i < Model.Rows.Count; i++)
    {
        <div>
            @for(int j = 0; j < Model.Rows[i].Columns.Count; j++)
            {
                @Html.TextBoxFor(m => m.Rows[i].Columns[j].Value)
                @Html.ValidationMessageFor(m => m.Rows[i].Columns[j].Value)
            }
        </div>
    }
    <input type="submit" />
}

注意:假设input的样式为inline-block。您还需要考虑验证错误的位置,以便它们的显示不会搞砸网格布局(可能在单独的(嵌套)循环中,因此它们位于网格之外?)