如何在ASP.NET中的一个按钮中调用两个javascript函数 [英] How to call two javascript function in one button in ASP.NET

查看:45
本文介绍了如何在ASP.NET中的一个按钮中调用两个javascript函数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

< script type =text / javascript> 
$(document).ready(function(){
$(document).on(click,。classAdd,function(){// on用于动态获取click事件创建按钮

var rowCount = $('。data-contact-person')。length + 1;
var contactdiv ='< tr class =data-contact-person> ;'+
'< td>< input type =textname =f-name'+ rowCount +'class =form-control f-name01/>< / td> '+
'< td>< input type =textname =l-name'+ rowCount +'class =form-control l-name01/>< / td>' +
'< td>< input type =textname =email'+ rowCount +'class =form-control email01/>< / td>'+
'< td>< input type =textname =stock'+ rowCount +'class =form-control stock01/>< / td>'+
'< td> < input type =textname =qty'+ rowCount +'class =form-co ntrol qty01/>< / td>'+
'< td>< input type =textname =rate'+ rowCount +'class =form-control rate01/> ;< / td>'+
'< td>< input type =textname =total'+ rowCount +'class =form-control total01/>< / td> ;'+

'< td>< button type =buttonid =btnAddclass =btn btn-xs btn-primary classAdd> Add More< / button>' +
'< button type =buttonid =btnDeleteclass =deleteContact btn btn btn-danger btn-xs>删除< / button>< / td>'+
'< / TR>';
$('#maintable')。append(contactdiv); //将这些控件添加到主表类
});

$(document).on(click,。deleteContact,function(){
$(this).closest(tr)。remove(); //最接近用于删除我拥有控件的'tr'
});

函数getAllEmpData(){
var data = [];
$('tr.data-contact-person')。each(function(){
var firstName = $(this).find('。f-name01')。val();
var lastName = $(this).find('。l-name01')。val();
var emailId = $(this).find('。email01')。val();
var Stock = $(this).find('。stock01')。val();
var qty = $(this).find('。qty01')。val();
var rate = $(this).find('。rate01')。val();
var totalamount = $(this).find('。total01')。val();

var alldata = {
'FName':firstName,
'LName':lastName,
'EmailId':emailId,
'STOCK':股票,
'QUANTITY':qty,
'RATE':rate,
'TOTAL':totalamount

}
data.push(allda ta);
});
console.log(data);
返回数据;
}

$(#btnSubmit)。click(function(){
var data = JSON.stringify(getAllEmpData());
// console .log(数据);
$ .ajax({
url:'Home.aspx / SaveData',
类型:'POST',
dataType:'json',
contentType:'application / json; charset = utf-8',
data:JSON.stringify({'empdata':data}),
success:function(){
alert(数据已成功添加);
},
错误:function(){
alert(插入数据时出错);
}
}) ;
});
});
< / script>

< script type =text / javascript>
$(document).ready(function(){
var getAllEmp;

$(document).ready(function(){
getAllEmp = function() {
console.log(getAllEmp);
var data = [];
$('tr.data-contact-person')。each(function(){
var firstName = $(this).find('。Name')。val();
var Con = $(this).find('。Contact')。val();
var emailId = $(this).find('。Email')。val();
var Sal = $(this).find('。Salary')。val();
var Deg = $(this).find('。Designation')。val();


var alldata = {
'FName':firstName,
'Contact' :Con,
'EmailId':emailId,
'薪水':Sal,
'Degnation':Deg

}
data.push(alldata);
});
console.log(data);
返回数据;
}

$(#btnSubmit)。click(function(){
var data = JSON.stringify(getAllEmp());
// console .log(数据);
$ .ajax({
url:'Home.aspx / UpdateStaff',
类型:'POST',
dataType:'json',
contentType:'application / json; charset = utf-8',
data:JSON.stringify({'Supempdata':data}),
success:function(){
alert(数据已成功添加);
},
错误:function(){
alert(插入数据时出错);
}
}) ;
});
});
});

< / script>





我的尝试:



< asp:Button ID =getAllEmpDataOnClientClick =getAllEmp(); return false; runat =serverText =sbWidth =61px/> 

解决方案

(document).ready(function( ){


(document).on(click,。classAdd,function(){// on用于获取动态创建按钮的点击事件

var rowCount =


('。data-contact-person')。length + 1;
var contactdiv ='< tr class =data-contact- person>'+
'< td>< input type =textname =f-name'+ rowCount +'class =form-control f-name01/>< / td>'+
'< td>< input type =textname =l-name'+ rowCount +'class =form-control l-name01/>< / td>'+
'< td>< input type =textname =email'+ rowCount +'class =form-control email01/>< / td>'+
'< td>< input type =textname =stock'+ rowCount +'class =form-contr ol stock01/>< / td>'+
'< td>< input type =textname =qty'+ rowCount +'class =form-control qty01/> ;< / td>'+
'< td>< input type =textname =rate'+ rowCount +'class =form-control rate01/>< / td> ;'+
'< td>< input type =textname =total'+ rowCount +'class =form-control total01/>< / td>'+

'< td>< button type =buttonid =btnAddclass =btn btn-xs btn-primary classAdd> Add More< / button>'$
'< button type =buttonid =btnDeleteclass =deleteContact btn btn btn-danger btn-xs>删除< / button>< / td>'+
'< / tr> ;';

<script type="text/javascript">
    $(document).ready(function () {
        $(document).on("click", ".classAdd", function () { //on is used for getting click event for dynamically created buttons

            var rowCount = $('.data-contact-person').length + 1;
            var contactdiv = '<tr class="data-contact-person">' +
                '<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' +
                '<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' +
                '<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' +
                '<td><input type="text" name="stock' + rowCount + '" class="form-control stock01" /></td>' +
                '<td><input type="text" name="qty' + rowCount + '" class="form-control qty01" /></td>' +
                '<td><input type="text" name="rate' + rowCount + '" class="form-control rate01" /></td>' +
                '<td><input type="text" name="total' + rowCount + '" class="form-control total01" /></td>' +

                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                '</tr>';
            $('#maintable').append(contactdiv); // Adding these controls to Main table class
        });

        $(document).on("click", ".deleteContact", function () {
            $(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls 
        });

        function getAllEmpData() {
            var data = [];
            $('tr.data-contact-person').each(function () {
                var firstName = $(this).find('.f-name01').val();
                var lastName = $(this).find('.l-name01').val();
                var emailId = $(this).find('.email01').val();
                var Stock = $(this).find('.stock01').val();
                var qty = $(this).find('.qty01').val();
                var rate = $(this).find('.rate01').val();
                var totalamount = $(this).find('.total01').val();

                var alldata = {
                    'FName': firstName,
                    'LName': lastName,
                    'EmailId': emailId,
                    'STOCK': Stock,
                    'QUANTITY': qty,
                    'RATE': rate,
                    'TOTAL': totalamount

                }
                data.push(alldata);
            });
            console.log(data);
            return data;
        }

        $("#btnSubmit").click(function () {
            var data = JSON.stringify(getAllEmpData());
            //console.log(data);
            $.ajax({
                url: 'Home.aspx/SaveData',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ 'empdata': data }),
                success: function () {
                    alert("Data Added Successfully");
                },
                error: function () {
                    alert("Error while inserting data");
                }
            });
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {
           var getAllEmp;

        $( document ).ready(function() {
            getAllEmp = function () {
                console.log(" getAllEmp");
                var data = [];
                $('tr.data-contact-person').each(function () {
                    var firstName = $(this).find('.Name').val();
                    var Con = $(this).find('.Contact').val();
                    var emailId = $(this).find('.Email').val();
                    var Sal = $(this).find('.Salary').val();
                    var Deg = $(this).find('.Designation').val();


                    var alldata = {
                        'FName': firstName,
                        'Contact': Con,
                        'EmailId': emailId,
                        'Salary': Sal,
                        'Degnation': Deg

                    }
                    data.push(alldata);
                });
                console.log(data);
                return data;
            }

            $("#btnSubmit").click(function () {
                var data = JSON.stringify(getAllEmp());
                //console.log(data);
                $.ajax({
                    url: 'Home.aspx/UpdateStaff',
                    type: 'POST',
                    dataType: 'json',
                    contentType: 'application/json; charset=utf-8',
                    data: JSON.stringify({ 'Supempdata': data }),
                    success: function () {
                        alert("Data Added Successfully");
                    },
                    error: function () {
                        alert("Error while inserting data");
                    }
                });
            });
        });
        });
    
</script>



What I have tried:

<asp:Button ID="getAllEmpData" OnClientClick="getAllEmp();return false;" runat="server" Text="sb" Width="61px" />

解决方案

(document).ready(function () {


(document).on("click", ".classAdd", function () { //on is used for getting click event for dynamically created buttons var rowCount =


('.data-contact-person').length + 1; var contactdiv = '<tr class="data-contact-person">' + '<td><input type="text" name="f-name' + rowCount + '" class="form-control f-name01" /></td>' + '<td><input type="text" name="l-name' + rowCount + '" class="form-control l-name01" /></td>' + '<td><input type="text" name="email' + rowCount + '" class="form-control email01" /></td>' + '<td><input type="text" name="stock' + rowCount + '" class="form-control stock01" /></td>' + '<td><input type="text" name="qty' + rowCount + '" class="form-control qty01" /></td>' + '<td><input type="text" name="rate' + rowCount + '" class="form-control rate01" /></td>' + '<td><input type="text" name="total' + rowCount + '" class="form-control total01" /></td>' + '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' + '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' + '</tr>';


这篇关于如何在ASP.NET中的一个按钮中调用两个javascript函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆