且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-02-16 11:59:47

您可以如下更改代码:

查看(您的代码缺少按钮,请确保您的按钮位置与我输入的位置相同.由于位置的任何差异都会导致js无法正常运行):

View(Your code is missing the button,be sure your button location like what I put.Because any difference of the location will cause the js does not work):

<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>
}

结果: