CODEWITHSUNDEEP
c#asp.net-mvcrazor
Kostadin Georgiev
Kostadin Georgiev

Reputation: 15

How to refer to HTML input by C#?

I've got this C# written in a .cshtml document:

@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>

It creates a 2-dimensional array 'grid' and 81 empty html input boxes, everyone of which should be filled by the user with a single digit. When the 'OK' button is clicked the 'grid' should get the values from every input element (e.g. grid[0] = '1st input's value', grid[1] = '2nd input's value'... etc.), but I don't know how to reffer to every input element in order to get its value, because each is automatically generated by nested for-loops, therefore I can not give it a unique id or name. Any ideas?

Upvotes: 0

Views: 100

Answers (2)

user3559349
user3559349

Reputation:

Using view models to represent what you editing will give you 2-way binding and the ability to add client and server side validation

View Models

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

Controller

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];
}

View

@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" />
}

Note: Assumes input is styled as inline-block. You will also want to consider the placement of the validation errors so their display does not screw up the grid layout (perhaps in a separate (nested) loop so they are outside the grid?)

Upvotes: 1

Grant
Grant

Reputation: 2305

I'm not sure if you can pass 2-dimensional array, but you can do that with 1-dimensional.

Let's say you have an action Grid in Home controller which accepts array of int:

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

In your view you should generate names for inputs:

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

After submitting this form you will have grid parameter filled with values from the form.

Upvotes: 2

Related Questions