asp.net - Have an editable matrix in MVC -

im using mvc , razor develop application administrative purposes. using model shown below, im trying display matrix user can edit. each row, there start , end value, same true each column. in example below, x start , y end set value. x, y , individual cells editable. feel solution might way coplex suggestion simple way implement welcome.

example of want accomplish:

    |         | xb | xb | xb |     |         | yb | yb | yb |     | xa | ya | 1  | 2  | 3  |     | xa | ya | 3  | 4  | 5  |     | xa | ya | 1  | 2  | 3  |     | xa | ya | 3  | 4  | 5  | 

the model:

    public class item      {         public string starta { get; set; } // xa         public string enda   { get; set; } // ya         public string startb { get; set; } // xb         public string endb   { get; set; } // yb         public string value  { get; set; } // cell content     } 

the view:

    @model item[]      @using (ajax.beginform("edit", null, new ajaxoptions { httpmethod = "post" }, new { @class = "form-inline" }))     {         (var = 0; < model.count(); i++)         {             @html.hiddenfor(x => x[i].starta)             @html.hiddenfor(x => x[i].enda)             @html.hiddenfor(x => x[i].startb)             @html.hiddenfor(x => x[i].endb)             @html.hiddenfor(x => x[i].value)         }          <hr />          <table id="table1" style="border-collapse: separate; border-spacing: 8px; border:2px solid  gray;">             <thead>                 <tr>                     <td></td>                     <td></td>                     @foreach (var group in model.groupby(x => new { start = x.starta, end = x.enda }))                     {                         <td>                             <input size="3" name="sa" value="@group.key.start" />                         </td>                     }                 </tr>                 <tr>                     <td></td>                     <td></td>                     @foreach (var group in model.groupby(x => new { start = x.starta, end = x.enda }))                     {                         <td><input size="3" name="ea" value="@group.key.end" /></td>                     }                 </tr>             </thead>             <tbody>                 @foreach (var group in model.groupby(x => new { start = x.startb, end = x.endb }))                 {                     <tr>                         <td><input size="3" name="sb" value="@group.key.start" /></td>                         <td><input size="3" name="eb" value="@group.key.end" /></td>                         @foreach (var cell in group)                         {                             <td style="color: coral; font-weight: bold"><input size="3" name="value" value="@cell.value" /></td>                         }                     </tr>                 }             </tbody>         </table>     } 

question: im not sure how bind fields view, since model (array of items) used generate headers (row , column definitions, x , y cells) well. when binding works, should able add rows , colums.

you can bind named inputs. can't bind input position in array of items.

probably best way make work use 3 hidden fields. 1 store number of rows, 1 number of columns, , 1 comma separated list of numbers. when user clicks save have javascript copy numbers hidden fields.

your model need single object rather array. model have variables have same name of hidden fields. put item array in viewbag. have item array member of model , use build html can have strong type checking. you'll ignore on postback since it'll null.