Dynamic control creation Issue in ASP.NET Core MVC

Question

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

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

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>

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>

Rena · Accepted Answer · 2021-03-05 03:16:24Z

You can change your code like below:

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

Result:

I need to pass one hidden variable string from view to the controller along with the selected 2 control values. Will you please help me out by changing jQuery and controller insert method
I have created a new thread stackoverflow.com/questions/66501528/…. Please help me

Collectives™ on Stack Overflow

Dynamic control creation Issue in ASP.NET Core MVC

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related