@model List<UserInfo>

@section Scripts{
   <script src="~/Scripts/jquery.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
}

<c1-multi-row id="uvMultiRow" class="multirow" allow-add-new="true" allow-delete="true">
    <c1-items-source source-collection="Model"
                     create-action-url="@Url.Action("MultiRowCreateUserInfo")"
                     delete-action-url="@Url.Action("MultiRowDeleteUserInfo")"
                     update-action-url="@Url.Action("MultiRowUpdateUserInfo")">
    </c1-items-source>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="Id" is-read-only="true"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group>
        <c1-multi-row-cell binding="Name"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Industry"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group colspan="3">
        <c1-multi-row-cell binding="Country"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Phone" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="Email" colspan="2"></c1-multi-row-cell>
        <c1-multi-row-cell binding="BirthDate"></c1-multi-row-cell>
    </c1-multi-row-cell-group>
</c1-multi-row>

@section Description{
    <p>
    This sample shows the basic usage of the unobtrusive validation.
    </p>
    <p>
        The columns have the following validations:
        <ul>
            <li><b>Name:</b> Required. Alphanumeric and contains 4 to 10 characters.</li>
            <li><b>Industry:</b> Required.</li>
            <li><b>Country:</b> Required.</li>
            <li><b>Phone:</b> Required. 8 to 11 characters.</li>
            <li><b>Email:</b> Required. Valid e-mail address.</li>
            <li><b>BirthDate:</b> Required.</li>
        </ul>
    </p>
}