ASP.NET Core MVC中的动态控件创建问题 [英] Dynamic control creation Issue in ASP.NET Core MVC

问题描述

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

I need help regarding dynamic control creation in an ASP.NET Core razor view page using jQuery.

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

jQquery is used to fetch dynamic control selected values:

@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正常工作

This jQuery is working fine for the below table structure

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

但是当我尝试更改如下所示的表结构时，即使我正在获取表的第一行 td 控制值，我的jQuery也无法正常工作.有人可以帮我吗?

But when I try to change table structure like below, my jQuery is not working fine anymore, even though I am fetching table first row td control values. Can anybody please help me?

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

推荐答案

您可以如下更改代码:

查看(您的代码缺少按钮，请确保您的按钮位置与我输入的位置相同.由于位置的任何差异都会导致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>
}

结果:

这篇关于ASP.NET Core MVC中的动态控件创建问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！