Question

I’m reasonably new to Spark, and I’m finding it difficult to find resources for what are generally simple questions, whereas I can often find the answers in Razor. Though mostly there is a good cross over between the two, I’m currently unable to work out what I’m doing wrong with this Razor-Spark translation.

The situation is that I have a model with a list of objects on it (and some other properties). I want to be able to display the list in a table and to be able to edit a couple of the properties of the model within the list. Reading around, the best way to do this is to set up an editor template and then to use an Html.EditorFor with the whole list. I tried this and when I post the form back to the controller, I get a null as the posted list so I’ve stripped it down to a set of test code that encapsulates what I want to do (a readonly int property an editable checkbox) and set up a test controller/views to reproduce the problem.

Controller:

public class TestController : Controller
{
    public ActionResult ListTest()
    {
        var model = new List<TestModel>
                        {
                            new TestModel {Id = 1, Checked = true},
                            new TestModel {Id = 2, Checked = true},
                            new TestModel {Id = 3, Checked = false}
                        };

        return View(model);
    }

    [HttpPost]
    public ActionResult ListTest(List<TestModel> model)
    {
        return View(model);
    }
}

Working Razor view:

@model IList<TestModel>

@using (Html.BeginForm("ListTest", "Test", FormMethod.Post))
{
  <table style="border: 1px solid">
    @Html.EditorFor(x => x)    
  </table>
  <input type="submit" value="Clicky!" />
}

Working Razor editor template:

@model TestModel

<tr>
  <td>
    @Html.DisplayFor(x => x.Id)
    @Html.HiddenFor(x => x.Id)
  </td>
  <td>@Html.CheckBoxFor(x => x.Checked)</td>
</tr>

Attempted Spark view:

<viewdata model="IList<TestModel>" />

<content name="main">

  <div id="main">

    <form action='' id='testform' method='post'>
      <table>
        <tr each="var item in Model">
          ${Html.EditorFor(x => item, "TestModel")}
        </tr>    
      </table>
      <input type="submit" value="Clicky!" />
    </form>

  </div>

</content>

Attempted Spark editor template:

<viewdata model="TestModel" />

  <td>
    ${Model.Id}
    ${Html.HiddenFor(x => x.Id)}
  </td>
  <td>${Html.CheckBoxFor(x => x.Checked)}</td>

Unfortunately, I get an error whenever I try to set the Spark up in the same way as the Razor engine and just pass the list to the single object editor, saying that the types don’t match and it is expecting single object rather than a list, so I’ve had to enumerate the list before passing it to the editor template, which I think is causing the problem.

I’ve been looking around but can’t find a solution for this at the moment. I’d like to use Spark for this rather than have to craft just these views in Razor, but I can’t figure out how so far. The one area I’m not yet clear on is bindings within Spark and whether they might give me what I need, but any help would be greatly appreciated.

Cheers

Answer 1

You wrote a foreach loop in your Spark view. Don’t write such loops with editor templates. You don’t need em:

<viewdata model="IList<TestModel>" />

<content name="main">
  <div id="main">
    <form action='' id='testform' method='post'>
      <table>
          ${Html.EditorForModel()}
      </table>
      <input type="submit" value="Clicky!" />
    </form>
  </div>
</content>

and in your template:

<viewdata model="TestModel" />
<tr>
  <td>
    ${Model.Id}
    ${Html.HiddenFor(x => x.Id)}
  </td>
  <td>${Html.CheckBoxFor(x => x.Checked)}</td>
</tr>