ASP.NET Core MVC 中的动态控件创建问题

Question

我需要有关使用 jQuery 在 ASP.NET Core razor 视图页面中创建动态控件的帮助。

jQquery用于获取动态控件选择值：

@section scripts {
<script>
    $(function () {
        $("button[type='submit']").click(function () {
            event.preventDefault();
            var properties = [];
            $("#tb_properties tr:first").find("td").each(function (index, item) {
                var propertyname = $(item).find("input[type='text']").val();
                var selctedvalue = $(item).find("select").val();
                properties.push('"' + propertyname + '":"' + selctedvalue + '"');
            });
            var jsonstr = '{' + properties.join(",") + '}';
            //var jsobject = JSON.parse(jsonstr);

            $.ajax({
                type: "Post",
                url: "/KEMap/Insert",
                //data: jsobject,
                data: jsonstr,
                contentType:"application/json",
                success: function (response) {
                    toastr.info(response.status + "<br>" + "<br>" + response.message);
                    $("#tb_properties select").val("");
                    $("#partial_div").load(window.location.href + " #partial_div");
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('in error');
                }
            });

        });
    });
</script>
}

这个 jQuery 在下表结构中运行良好

<table class="table" id="tb_properties" style="width:100%">
    <tr>       
        @foreach (var itemApiProp in ViewBag.ApiProp)
        {
            <td>
                <input type="text" value="@itemApiProp.Key" class="form-control" readonly="readonly" />
                <select class="form-control">
                    <option value="">--Select-- </option>
                    @foreach (var itemK360Prop in ViewBag.K360Prop)
                    {
                        <option>@itemK360Prop.Key</option>
                    }
                </select>
            </td>
        }
    </tr>
</table>

但是当我尝试像下面这样更改表结构时，我的 jQuery 不再正常工作，即使我正在获取表的第一行 td 控制值。有人可以帮帮我吗？

<table class="table" id="tb_properties" style="width:100%">    
    @foreach (var itemApiProp in ViewBag.ApiProp)
    {
        <tr>
            <td>
                 <input type="text" value="@itemApiProp.Key" class="form-control" readonly="readonly" />
            </td>
            <td>
                <select class="form-control">
                    <option value="">--Select-- </option>
                    @foreach (var itemK360Prop in ViewBag.K360Prop)
                    {
                        <option>@itemK360Prop.Key</option>
                    }
                </select>
            </td>
        </tr>
       }
</table>

Answer 1

您可以像下面这样更改您的代码：

查看（您的代码缺少按钮，请确保您的按钮位置与我放置的一样。因为位置的任何差异都会导致js不起作用）：

<table class="table" id="tb_properties" style="width:100%">
    @foreach (var itemApiProp in ViewBag.ApiProp)
    {
        <tr>
            <td>
                <input type="text" value="@itemApiProp.Key" class="form-control" readonly="readonly" />
            </td>
            <td>
                <select class="form-control">
                    <option value="">--Select-- </option>
                    @foreach (var itemK360Prop in ViewBag.K360Prop)
                    {
                        <option>@itemK360Prop.Key</option>
                    }
                </select>
            </td>
        </tr>
    }
</table>

<button type="submit" class="btn btn-primary" style="margin-
          right:50px">
    Catalog Mapping
</button>

JS：

@section scripts{
    <script>
        $(function () {
            $("button[type='submit']").click(function () {
                event.preventDefault();
                var properties = [];
                $("#tb_properties tr").each(function (index, item) {
                    var $row = $(item), $td = $row.find('td');
                    $td.each(function (i, td) {
                        var propertyname = $td.find("input[type='text']").val();
                        var selctedvalue = $td.find("select").val();
                        properties.push('"' + propertyname + '":"' + selctedvalue + '"');
                    })

                });
                var jsonstr = '{' + properties.join(",") + '}';
                var jsobject = JSON.parse(jsonstr);
                console.log(JSON.stringify(jsonstr));
                console.log(jsonstr);
                $.ajax({
                    type: "Post",
                    url: "/Home/Insert",
                    //data: jsobject,
                    data: jsonstr,
                    contentType: "application/json",
                    success: function (response) {
                        toastr.info(response.status + "<br>" + "<br>" + response.message);
                        $("#tb_properties select").val("");
                        $("#partial_div").load(window.location.href + " #partial_div");
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        console.log('in error');
                    }
                });

            });
        });
    </script>
}

结果：