Question

我有一个模板

<script id="template" type="text/x-jquery-tmpl">
<div class="experience">
    <label for="c${count}">New Thing:</label>
    <input type="text" id="c${count}" name="Fund[${count}].Name" />
    <label for="c${count}">New Thing count:</label>
    <input type="text" id="c${count}" name="Fund[${count}].FundNo" />
</div>

我将控件动态添加到div容器中。

我的mvc应用程序中有一个模型

[Serializable]
public class Step2ViewModel : IStepViewModel
{
    [Required]
    public List<FormTest.Models.Item> Things;
}

[Serializable]
public class Item
{
    public string Name { get; set; }
    public string Number { get; set; }
}

如何将这些新创建的控件绑定到模型。这需要使用吗？在我的模板中@ Html.LabelFor，@ Html.TextBoxFor等？

谢谢！

修改：

以防这个问题可以解释 - 我希望在发布表单时将动态创建的控件（使用templ（）完成）绑定到模型中的List。

Answer 1

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var count = 0;
            $('#btnAddDiv').live('click', function () {
                var data = [{ 'count': count++}];
                $('#template').tmpl(data).appendTo('body');
            });
        });
    </script>
    <script id="template" type="text/x-jquery-tmpl">
<div class="experience">
    <label for="c${count}">New Thing:</label>
    <input type="text" id="c${count}" name="Fund[${count}].Name" />
    <label for="c${count}">New Thing count:</label>
    <input type="text" id="c${count}" name="Fund[${count}].FundNo" />
</div>
    </script>

  <input type="button" id="btnAddDiv" value="Add Div" />

//在点击按钮上添加div

//Or




 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{ 'count': 1 }, { 'count': 2 }, { 'count': 3}];
                $('#template').tmpl(data).appendTo('body');
            });
        </script>
        <script id="template" type="text/x-jquery-tmpl">
    <div class="experience">
        <label for="c${count}">New Thing:</label>
        <input type="text" id="c${count}" name="Fund[${count}].Name" />
        <label for="c${count}">New Thing count:</label>
        <input type="text" id="c${count}" name="Fund[${count}].FundNo" />
    </div>
        </script>

Answer 2

首先，您正在使用一个不再有更多更新的项目，但它从未完成。

Boris Moore创建了一种继续jQuery模板项目的方法，它被称为 JsRender 。使用JsRender你可以获得jQuery模板的强大功能，还有更多，比如accessing paths，使用helper functions，有no dependency on jQuery，并且列表会继续......

PluralSight整整3小时course just for JsRender（因此您可以看到它的重要性），您可以开始使用试用帐户查看。

现在关于您的实际问题

每次想要在提交表单时让.NET框架为您填写模型时，您必须确保编写每个属性，因为您有一个数组，因此您需要传递整个完整路径你的模特。

如何将Jquery Templ（）与mvc3一起使用

2 个答案: