Minifycode 2021-10-03 Viewed 1K times ASP.Net Core MVC

In this article, you will learn what is Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery in asp.net core

 

<div class="col-xl-12">
        <div class="card-box">
            <h4 class="header-title mb-4">Documents</h4>
            <div class="row">
                <div class="col-12 mb-3">
                    <div class="table table-responsive">
                        <table class="table-brodered">
                            <thead>
                                <tr>
                                    <td>S.No.</td>
                                    <td>Document Name</td>
                                    <td>Upload</td>

                                </tr>
                            </thead>
                            <tbody id="tblBody_document">
                                <tr>
                                    <td>1</td>
                                    <td><input type="text" class="form-control" name="txt_documentName" id="txt_documentName_0" value="" /></td>
                                    <td><input type="file" class="form-control" name="file_document" id="file_document_0" /></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div> 
            </div>          
          
    </div>

 

 <div class="col-12">
     <button type="button" id="btn_addRows" class="btn btn-success" name="btn_addRows">Add Rows</button>
     <button type="button" id="btn_deleteRows" class="btn btn-danger" name="btn_deleteRows">Detete Rows</button>
 </div>

 

<div class="row text-center">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <button type="button" id="btn_Submit" name="btn_Submit" class="btn btn-success">Submit</button>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                    <div id="Message" style="color:red;"></div>
                </div>
            </div>

 

<script>
    $(document).ready(function () {
       
    var QualID = 0;
    $('#btn_addRows').click(function () {
        QualID++;
        var tds = '<tr>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad1" id="txt_Diploma_grad_' + QualID + '" value="Diploma/Graduation" /></td> '
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_subjects1" id="txt_Diploma_grad_subjects_' + QualID + '" value="" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_college1" id="txt_Diploma_grad_college_' + QualID + '" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_board_univ1" id="txt_Diploma_grad_board_univ_' + QualID + '" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_percent_grade1" id="txt_Diploma_grad_percent_grade_' + QualID + '" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_rollNo1" id="txt_Diploma_grad_rollNo_' + QualID + '" /></td>'
            + '<td><input type="text" class="form-control" name="txt_Diploma_grad_PassingYear1" id="txt_Diploma_grad_PassingYear_' + QualID + '" /></td>'
            + '</tr>';
        
        $('#tblBody_qualification tr:last').after(tds);

        //For Documents
        var td_doc = '<tr>'
            + '<td>' + Number(QualID+1) + '</td>'
            + '<td><input type="text" class="form-control" name="txt_documentName" id="txt_documentName_' + QualID + '" /></td>'
            + '<td><input type="file" class="form-control" name="file_document" id="file_document_' + QualID + '" /></td>'
            + '</tr>';

        $('#tblBody_document tr:last').after(td_doc);

    });

    //For Deleting
    $('#btn_deleteRows').click(function () {
        var count = $('#tblBody_qualification tr').length;
        if (count == 1) {
            alert("Not Allowed !!!")
            return;
        } else {
            $('#tblBody_qualification tr:last').remove();
            $('#tblBody_document tr:last').remove();
            ///--a;
            --QualID;
        }
    });


</script>

 

<script type="text/javascript">
    $("#btn_Submit").on('click', function (e) {
        $("#btn_Submit").val('Wait...');
        var fd = new FormData();
        fd.append("txt_firstname", $("#txt_firstname").val());       
        
        var QualificationLength = $('#tblBody_qualification tr').length;
       
        if (QualificationLength > 0) {
            for (var i = 0; i < QualificationLength; i++) {
                fd.append("txt_Diploma_grad", $("#txt_Diploma_grad_"+i+"").val());

                //File
                fd.append('file_Docment', document.getElementById('file_document_'+i).files[0]);
            }
        }
        
        $.ajax({
            url: '/user/actionmethodname',
            type: "POST",
            dataType: "JSON",
            data: fd,
            contentType: false,
            processData: false,
            success: function (result) {
                $('#Message').html(result.msg);                
               
            }
        })
    });
</script>

 

Get value on action

 

         [HttpPost]
        public IActionResult addqualification(IFormCollection frm, IFormFile[] file_Docment)
         {

        {

            return View();
        }
    }

Dynamically add and remove TextBoxes and get value of dynamic TextBox using jQuery in asp.net core
minify code