当数组动态附加到 DOM 元素时，IE 8 无法发布到 mvc 3

本文关键字：mvc IE 动态 数组 DOM 元素 | 更新日期: 2023-09-27 18:35:52

当使用 JQuery 动态创建复选框数组并附加到 DOM 元素时，IE 8 不会将复选框数组作为表单的一部分提交。 它与Firefox和Chrome完美配合。 我在服务器端使用 MVC 3 框架。 有什么变通办法可以与IE 8一起使用吗？ 我肯定会感谢任何建议。

型：

public int[] SelectedTemplateRequirements { get; set; }

视图：

.HTML：

<label for="requirementsTemplateDetail">Requirements:</label><br />
<div id="requirementsTemplateDetail"></div>

JQUERY：

<script type="text/javascript">
    /* Fills up the textarea */
    function fillTextArea(ctrlName, list) {
        // clear div
        $('#requirementsTemplateDetail').empty();
        $.each( list, function (index, itemData) {
            // alert(itemData.Id );
            $(ctrlName).append(
                $(document.createElement('input')).attr({
                    name: 'SelectedTemplateRequirements',
                    value: itemData.Id,
                    type:  'checkbox',
                    checked: 'checked'
                })
            ).append(itemData.Name + '<br/><br/>');
        })
    }
  function fillRequirementsDropdown(response) {
    fillTextArea("#requirementsTemplateDetail", response.Reqs);
  }
function postFormRequirementsByTemplateID(ctrlName) {
    var theForm = $(ctrlName).parents('form');
    $.ajax({
        type: "POST",
        url: '@Url.Action("GetRequirementsByTemplateID")',
        data: theForm.serialize(), 
        error: function (xhr, status, err) {
            alert("An error occurred while saving'n'n" + err);
        },
        success: function (response) {
            fillRequirementsDropdown(response);
        }
    });
    return false;
}
function auditType_SelectionChanged() {
    postFormRequirementsByTemplateID("#AuditTemplateId");
}
$(document).ready(function () {
    $("#ClassTypeId").change(function () {
        ClassType_SelectionChanged();
    });
    $("#AuditTemplateId").change(function () {
        auditType_SelectionChanged();
    });
    $('#templateSearchID').click(function () {
        auditTemplateButtonPressed();
    });
    $('#templateAllID').click(function () {
        auditTemplateAllPressed();
    });
});
</script>

控制器：

public class AuditController : ComplianceController
{
    [HttpPost]
    public ActionResult Create(string submit, AuditDocument document )
    {
            // Inserts into AuditRequirementDetail table
            m_activeContract.insertAuditTemplateRequirements(document, myuser);
    }
}

发生的情况是 IE 8 无法捆绑SelectedTemplateRequirements数组，因为它在返回到控制器上的 post action 方法时显示为NULL。 非常感谢对此的任何建议，因为IE 8仍然拥有庞大的用户群。

当数组动态附加到 DOM 元素时，IE 8 无法发布到 mvc 3

我认为

问题可能在于您创建复选框并将其附加到 DOM 元素的方式。

例如，假设您有以下代码：

// Append an input element built from a single string
for (var i = 0; i < 10; i++) {
    $('<input type="checkbox" name="test" value="' + i + '" checked="checked" />').appendTo('#form1');
}
// Append an input element build using DOM and jQuery attribute manipulation
for (var i = 0; i < 10; i++) {
    $(document.createElement('input')).attr({
        name: 'test',
        value: i,
        type: 'checkbox',
        checked: 'checked'
    }).appendTo('#form2');
}
alert($('#form1').serialize());
alert($('#form2').serialize());

如果您检查Chrome或Firefox中的alert()结果，您将从#form1获得以下内容：

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

这来自#form2：

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

它们是相同的，并支持您在Chrome和Firefox中具有预期行为的结果。但是，IE 的行为并不相同。IE8 和 IE9 中的相同代码从 #form1 生成以下内容：

test=0&test=1&test=2&test=3&test=4&test=5&test=6&test=7&test=8&test=9

而这来自#form2：

test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on&test=on

通过对您的代码的简要检查，我会质疑您用于动态创建和附加复选框到 DOM 元素的方法。我不知道 MVC 如何处理每个 POST 变量都相同的情况，但它可能是您问题的一部分。

附加复选框的另一种跨浏览器方式：

for (var i = 0; i < 10; i++) {
    $('<input type="checkbox" />').attr({
        name: 'test',
        value: i
    }).prop('checked', true).appendTo('#form3');
}

在添加属性之前，需要确保指定了类型。此外，正确设置"checked"属性对于jQuery序列化IE中复选框的值（而不是状态）至关重要。

上面的JSFiddle。

相关文章：