Question

我是堆叠溢出和MVC的新手。

我有一个由Jquery从另一个ddl的选择中动态构建的下拉列表。 ddl填充但我很难理解如何将选择绑定到模型属性以便在服务器上使用。

我的原始html ddl

<select id="projectcode"></select>

这是用这个脚本填充的

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#projectcode").prop("disabled", true);
        $("#@Html.IdFor(model => model.CustomerCode)").change(function () {
            if ($("#@Html.IdFor(model => model.CustomerCode)").val() != "Please select") {
                var options = {};
                options.url = "/IssueView/GetIssueList";
                options.type = "POST";
                options.data = JSON.stringify({ code: $("#@Html.IdFor(model => model.CustomerCode)").val() });
                options.dataType = "json";
                options.contentType = "application/json";
                options.success = function (data) {
                    $("#projectcode").empty();
                    $.each(data, function (i, obj) {
                        $("#projectcode").append("<option>" + obj.ProjectCode + "</option>");
                    });

                    $("#projectcode").prop("disabled", false);
                };
                options.error = function () { alert("Error retrieving codes!"); };
                $.ajax(options);
            }
            else {
                $("#projectcode").empty();
                $("#projectcode").prop("disabled", true);
            }
        });
    });
</script>

要分配的模型属性是ProjectNo，它是一个字符串。如果它是一个htmlhelper，它将是

@Html.DropDownListFor(model => model.ProjectNo, ViewBag.ProjectCodes as SelectList, "Please Select")

我搜索过但无法找到解决方案。这可能非常容易，所以请提前道歉。

我希望这足以满足社区要求。

感谢阅读 - 感谢任何帮助。

Answer 1

如果您在javascript / jQuery中动态创建元素，那么尝试使用Razor将Dropdown绑定到模型更加令人头疼，而不是它的价值。

我一直在做的事情就是在我的模型上有一个单一的属性，这只是表单提交时的选择。然后将其设置为隐藏输入。

@Html.HiddenFor(m => m.ProjectNo, new { id="projectHidden" }) // There might be other parameters to the signature.
<select id="populatedByJQuery"/>

然后在您的javascript中，通常在.cshtml文件的底部，您需要在提交按钮上设置点击事件：

<script type="text/javascript">
    $(document).ready(function() {
        $('#submit').click(function (e) {
            e.preventDefault();

            $('#projectHidden').val($('#populatedByJQuery').find('option:selected').val());

            $('#form').submit();
        });
    });
</script>

如果您已经在页面中设置了其中一个部分，或者甚至在单独的文件中，那么您应该没问题。

如何将原始HTML下拉列表选择绑定到MVC模型？

1 个答案: