0

I'm new to mvc and jquery
When I use dropdownlist in this table, jquery code never work
this table without DropDownList, code of jquery work perfect
so I must be edit in jquery code to work perfect
this is my code 

<div><a href="#" id="addNew">Add New</a></div>
<table id="dataTable" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <th>color</th>
        <th>WindowType</th>
        <th>height</th>
        <th>width</th>
        <th></th>
    </tr>
    @if (Model != null && Model.Count > 0)
    {
        int j = 0;
        foreach (var item in Model)
        {
            <tr style="border:1px solid black">
                <td>@Html.DropDownListFor(m => m[j].Color, (SelectList)ViewBag.color)</td>
                <td>@Html.DropDownListFor(m => m[j].WindowType, (SelectList)ViewBag.WindowType)</td>
                <td>@Html.TextBoxFor(m => m[j].height, new { @class = "form-control" })</td>
                <td>@Html.TextBoxFor(m => m[j].width, new { @class = "form-control" })</td>
                <td>
                    @if (j > 0)
                    {
                        <a href="#" class="remove">Remove</a>
                    }
                </td>
            </tr>
                    j++;
        }
    }
</table>
    <input type="submit" value="Save Bulk Data" />

this in code of jquery

@section Scripts{
    @Scripts.Render("~/bundles/jqueryval")
    <script language="javascript">
        $(document).ready(function () {

            //1. Add new row
            $("#addNew").click(function (e) {
                e.preventDefault();
                var $tableBody = $("#dataTable");
                var $trLast = $tableBody.find("tr:last");
                var $trNew = $trLast.clone();

                var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
                $trNew.find("td:last").html('<a href="#" class="remove">Remove</a>');
                $.each($trNew.find(':input'), function (i, val) {
                    // Replaced Name
                    var oldN = $(this).attr('name');
                    var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                    $(this).attr('name', newN);
                    //Replaced value
                    var type = $(this).attr('type');
                    if (type.toLowerCase() == "text") {
                        $(this).attr('value', '');
                    }

                    // If you have another Type then replace with default value
                    $(this).removeClass("input-validation-error");

                });
                $trLast.after($trNew);

                // Re-assign Validation
                var form = $("form")
                    .removeData("validator")
                    .removeData("unobtrusiveValidation");
                $.validator.unobtrusive.parse(form);
            });

            // 2. Remove
            $('a.remove').live("click", function (e) {
                e.preventDefault();
                $(this).parent().parent().remove();
            });

        });
    </script>
}

Can some body help me?

Karim Mohamed
  • 1
  • 2
  • Refer the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for dynamically adding new items to a collection. And do not use a `foreach` loop - use a `for` loop to generate the existing controls. –  May 25 '16 at 02:25
  • I do that and use for loop but this proplem still exist. – Karim Mohamed May 25 '16 at 02:39
  • Read the links I gave you. There are multiple issues with your code, particularly if you delete an item, binding will fail because you will be posting back a collection with non zero based/non consecutive indexers. –  May 25 '16 at 02:41

0 Answers0