将使用mustache.js呈现的选择字段绑定到MVC模型

时间:2015-12-07 14:20:30

标签: jquery asp.net-mvc mustache

我使用mustache.js渲染一个select字段,具体取决于之前的选择。该字段呈现正常,但是当我序列化表单以便我可以发布它时,该字段不存在,并且该值不会绑定到模型。

这是小胡子模板:

<div class="col-md-8" id="controlField">
    <script id="controlTemplate" type="text/template">
        <select class="form-control" id="ItemId" {{^.}} disabled{{/.}}>
        {{#.}}
            <option value="{{Id}}">{{Description}}</option>
        {{/.}}
        </select>
    </script>
</div>

这是绑定模型的javascript:

getSubkontaApiCall(query, function(result) {
        var template = $controlTemplate.html();
        var html = Mustache.to_html(template, result);
        $controlField.html(html);
    }, function(error) {
        alert(error);
});

我使用AJAX,所以我手动处理提交电话。

$form.submit(function(event) {
    event.preventDefault();
    $form = $("#mainForm"); // I added this because I cache the form when the page loads, so speed things up, but since new elements are added, I'm recaching it
    $.validator.unobtrusive.parse($form);
    $form.validate().settings.ignore = []; // using jQuery controls that hide some inputs and that's why I need this
    if ($form.valid()) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("Add", "Test")',
            data: $form.serialize(),
            success: function(result) {
                $mainDiv.html(result);
                resetForm();
            },
            error: function(xhr, ajaxOptions, thrownError) {
                // TODO: handle error
            }
        });
    }
});

这是Action定义,其余的动作并不重要。

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Add( [Bind(Include = "ItemId, ..., ..., ...")] ItemModel model)

如何更新表单以便了解新控件?

1 个答案:

答案 0 :(得分:0)

我发现了问题,<script id="legende" type="text/html"> <div class="PaddingLegende"> <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}"></div> <div data-bind="text: Libelle" class="TextLegende"></div> </div> </script>仅使用<div class="parentDivLegende"> <div class="PaddingLegende"> <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}"></div> <div data-bind="text: Libelle" class="TextLegende"></div> </div> <div class="PaddingLegende"> <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}"></div> <div data-bind="text: Libelle" class="TextLegende"></div> </div> <div class="PaddingLegende"> <div class="CircleLegendeColor imgLegende" data-bind="style: { backgroundColor : Couleur}"></div> <div data-bind="text: Libelle" class="TextLegende"></div> </div> </div>属性序列化输入,因此添加它就可以了。