Question

is there any sort of control for .net mvc 3 (some html helper method perhaps) that works like an asp:repeater?

I’ve done some googling and only found some home grown solutions.

Here’s what I need:
My users will have a drop down list of numbers, depending what they select (1-8), I need to repeat a set of code below to offer them the same list of input fields (between 1 and 8 times).

what would be the best way to accomplish this with mvc 3 and jquery?

Answer 1

You should use jquery templates for this

I copy-pasted some code from a project I’m currently working on, but I think you get the picture how you can solve your problem with jquery templates.

You can put the templates in a partialview. For example:

<input type="hidden" id="productId" value="${ProductId}"/>
<div class="formElement">
    <label>@Globalization.Workorders.Domainname</label>
    <input type="text" id="domainname" name="domainname" />        
</div>
<div class="formElement">
    <label>@Globalization.Workorders.StartDate</label>
    <input type="text" id="startDate" value=""/>
</div>
<input type="submit" id="addHostingProduct" value="@Globalization.Workorders.Add"/>
<input type="button" id="addHostingProductCancel" value="@Globalization.Workorders.Cancel"/>

The template takes a json object or an array of json objects to render. The ${…} are replaced with values from the json.

I usually put the partialviews/templates in the view like this:

<script id="AddHostingProductTemplate" type="text/x-jquery-tmpl">
    @Html.Partial("Templates/AddHostingProduct")
</script>

When you’re page first loads, you can do something like this, to set the initial values:

<script type="text/javascript">
    $(document).ready(function() {
        @foreach (var workOrderLine in Model.WorkOrderLines)
        {
            <text>
                  $('#AddHostingProductTemplate').tmpl(@workOrderLine.ToJson()).appendTo("#products")                
            </text>
        }

     });
</script>

The ToJson method is a method I put on the viewmodel, it just serializes the viewmodel into a json string.

When a user clicks a button or changes the dropdown, it’s easy to use the template in your client side code to render the extra templates. Just use:

$('#AddHostingProductTemplate').tmpl({ someValue: '1', someOtherValue : ' test' }).appendTo("#products")

Hope this helps