在.CSHTML中将“rowcount”(表行计数)从jquery传递给“For循环”(@for(int i = 0; i< rowCount; i ++))

时间:2018-04-06 09:58:23

标签: javascript jquery asp.net asp.net-mvc-5

在MVC5中,我尝试使用glyphicon添加/删除行。我想在.CSHTML中将“rowcount”(表行计数)从jquery传递给“For循环”(@for(int i = 0; i< rowCount; i ++))。

请参考我试图实现的图像。

Adding rows dynamically and store the value in controller

脚本:

<script>
$(function () {
    $('.glyphicon-plus').click(function () {
        var sds = $(this);
        $(this).closest("tr").clone(true).appendTo('#ruleTable');
        var **rowCount** = $('#ruleTable tr').length;
    });
    $('.glyphicon-remove').click(function () {
        $(this).closest("tr").remove();
    });
});
</script>

HTML.BeginForm:

@for (int i = 0; i < rowCount; i++){
    <tr>
        <td>
            <span class="glyphicon glyphicon-plus" stye="color:lawngreen"></span>
            <span class="glyphicon glyphicon-remove" style="color:red"></span>
        </td>
        <td> @Html.TextBox("[" + i + "].DepartmentCode") </td>
        <td> @Html.TextBox("[" + i + "].DepartmentName")</td>
    </tr>
}

...谢谢

2 个答案:

答案 0 :(得分:0)

它不可能,Jquery是服务器端的客户端for循环。所以你可以使用一个javascript或jquery函数并使用ajax来实现这个功能。 谢谢,

答案 1 :(得分:0)

    You can try like this

    html

     <div class="table-responsive" id="DivTable">
                <table class="table table-bordered" id="tbl">
                    <thead>
                        <tr>
                            <td>Name</td>
                            <td>Age</td>
                            <td>DOB</td>
                            <td>Salary</td>
                            <td>Industry</td>
                            <td>Action</td>
                        </tr>
                    </thead>
                    <tbody id="dtEmployeeDetails">

                </table>
            </div>

javascript

function GetEmployeeDetails() {
            var EmployeeArray = [];
            $("#dtEmployeeDetails").empty();
            $.ajax({
                type: "POST",
                url: '@Url.Action("GetEmployeeDetails", "Employee")',
                dataType: 'json',
                //data: JSON.stringify({ id: '2' }),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $.each(data, function (key, val) {

                        EmployeeArray[key] = '<tr>' +
                        '<td>' + val.Name + '</td>' +
                        '<td>' + val.DateofBirth + '</td>' +
                        '<td>' + val.Age + '</td>' +
                        '<td>' + Industry + '</td>' +
                        '<td>' + val.Salary + '</td>' +
                        '<td>' + '<a class="btn btn-success btn-xs" title="Edit" id="' + val.EmpID + '" onclick="EditEmployeeDetails(this.id);">' + '<span class="glyphicon glyphicon-pencil"></span></a>&nbsp;' +
                         '<a class="btn btn-danger btn-xs" title="Delete" id="' + val.EmpID + '" onclick="DeleteEmployeeDetails(this.id);"><span class="glyphicon glyphicon-trash"></span></a></td></tr>';
                    });

                    $("#dtEmployeeDetails").html(EmployeeArray.join(""));
                    if (data.length == 0) {
                        $("#dtEmployeeDetails").append('<td colspan="6" class="text-center">No Record Found.</td>');
                    }
                }
            });
        }