calling javascript function using string array arguments from c# code

Question

3.00/5 (1 vote)

See more:

How can we pass string array from c# function to javascript function.Here is my code.
C# code

C#

for (int i = 0; i < count; i++)
{
    extraFieldName[i] = dt.Rows[i]["FieldName"].ToString();
    extraFieldValue[i] = dt.Rows[i]["FieldValue"].ToString();
}

this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "Javascript", "<script type='text/javascript'>moreFieldsEditFunction('" + count + "','" + extraFieldName + "','" + extraFieldValue + "');</script>");

javascript

XML

<script type="text/javascript">
    function moreFieldsEditFunction(cnt, ExtraFname, ExtraFvalue) {
        alert("fname" + ExtraFname + " :fvalue " + ExtraFvalue + " :count:" + cnt);

        for (i = 0; i < cnt; i++){
            alert("fname" + ExtraFname[i] + " :fvalue " + ExtraFvalue[i] + " :count:" + cnt);
        }

        var fieldsdiv = document.getElementById('addmorefieldsDiv');
        fieldsdiv.style.visibility = 'visible';
        alert("test");
    
        for (i = 0; i < cnt; i++)
        {
            var intId = $("#addmorefieldsDiv div").length + 1;
            alert(ExtraFname[i]);
            var fieldWrapper = $('<div class="form-group fieldwrapper col-md-12" id="field"' + intId + '"/>');
            var fName1 = $('<div class="col-md-4"> <input type="text" placeholder="Fieldname" id="field_name"  name="field_name" value="' + extraFieldName[i] + '" class="form-control"></div>');
            var fName2 = $('<div class="col-md-4"> <input type="text" placeholder="Fieldvalue" id="field_value"  name="field_value"  value="'+ extraFieldValue[i] +'" class="form-control"></div>');
        }
    }
</script>

Is this the correct syntax of passing arrays.Also its not recognising the id specified in the javascript.why is it so.

Here is my whole desing page(.aspx)

XML

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Customer.aspx.cs" Inherits="EmpMgmt.Customer" EnableEventValidation="false"  %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="../Styles/MenuStyle.css">
    <link rel="stylesheet" href="../Styles/CommonStyles.css">
    <link rel="stylesheet" href="../Bootstrap/bootstrap-theme.min.css?parameter=1">
    <link rel="stylesheet" href="../Bootstrap/bootstrap-theme.css?parameter=1">
    <link rel="stylesheet" href="../Bootstrap/bootstrap.css?parameter=1">
    <link rel="stylesheet" href="../Bootstrap/bootstrap.min.css?parameter=1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="../JavaScript/bootstrap.js" type="text/javascript"></script>
    <script src="../JavaScript/bootstrap.min.js" type="text/javascript"></script>
    <script src="../JavaScript/npm.js" type="text/javascript"></script>
    <script src="../JavaScript/MenuJScript.js" type="text/javascript"></script>
    <script src="../JavaScript/Menuscript.js" type="text/javascript"></script>
    <script src="../MyJQueryFunctions/Addmorefields.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {

            $("#btnaddmorefields").click(function () {
                var fieldsdiv = document.getElementById('addmorefieldsDiv');
                fieldsdiv.style.visibility = 'visible';
                // alert("test");
                var intId = $("#addmorefieldsDiv div").length + 1;

                var fieldWrapper = $('<div class="form-group fieldwrapper col-md-12" id="field"' + intId + '"/>');
                var fName1 = $('<div class="col-md-4"> <input type="text" placeholder="Fieldname" id="field_name"  name="field_name"  class="form-control"></div>');
                var fName2 = $('<div class="col-md-4"> <input type="text" placeholder="Fieldvalue" id="field_value"  name="field_value"  class="form-control"></div>');
                var removeButton = $('<div class="col-md-3"><input type="button" class="btn remove" value="Remove Fields" background-color="#669900"/>');
                removeButton.click(function () {
                    $(this).parent().remove();
                });

                fieldWrapper.append(fName1);
                fieldWrapper.append(fName2);
                fieldWrapper.append(removeButton);
                //alert(fieldWrapper + " - " + intId) ;
                $("#addmorefieldsDiv").append(fieldWrapper);
                return false;

            });

//            function moreFieldsEditFunction(extrafname, extrafvalue) {

//                alert(extrafname+"////"+extrafvalue+"Helloooooo");
//            }
        });
</script>

 <script type="text/javascript">
     function moreFieldsEditFunction(cnt, ExtraFname, ExtraFvalue) {
         alert("fname" + ExtraFname + " :fvalue " + ExtraFvalue + " :count:" + cnt);
         for (i = 0; i < cnt; i++){
             alert("fname" + ExtraFname[i] + " :fvalue " + ExtraFvalue[i] + " :count:" + cnt);
       }

       var fieldsdiv = document.getElementById('addmorefieldsDiv');
       fieldsdiv.style.visibility = 'visible';
        alert("test");
       for (i = 0; i < cnt; i++)
       {
           var intId = $("#addmorefieldsDiv div").length + 1;
           alert(ExtraFname[i]);
           var fieldWrapper = $('<div class="form-group fieldwrapper col-md-12" id="field"' + intId + '"/>');
           var fName1 = $('<div class="col-md-4"> <input type="text" placeholder="Fieldname" id="field_name"  name="field_name" value="' + extraFieldName[i] + '" class="form-control"></div>');
           var fName2 = $('<div class="col-md-4"> <input type="text" placeholder="Fieldvalue" id="field_value"  name="field_value"  value="'+ extraFieldValue[i] +'" class="form-control"></div>');
       }

         }
 </script>
 <script type="text/javascript">
     function fname() {
         var UserIDs = ('<%=getfname() %>');
         alert(UserIDs);
     }
</script>

 <%--<script type="text/javascript">
  $(function () {
     function moreFieldsEditFunction(ExtraFname, ExtraFvalue) {
         alert("jquery " + ExtraFname + ExtraFvalue);
         alert( $("#field_name").val());


             $.ajax({
                 type: "POST",
                 dataType: "json",
                 contentType: "application/json; charset=utf-8",
                 url: "ajaxcustomertest.cs/obj.print",
                 data: data,
                 success: function () {
                     alert($("#txtfname").val() +"inside success"+ ExtraFname);

                 }
             });
         };

         }


</script>--%>
<style type="text/css">

    #addmorefieldsDiv
    {
        visibility:hidden;
    }

     </style>

</head>
<body>
    <form id="form1" class="form-inline form-horizontal" runat="server">
    <div class="container" style="background-color:white">
      <div class="row">
        <div class="col-md-12" style="height:161px;background:url('images/employee.jpg')"></div>
      </div>

       <div class="row">
       <div  id='cssmenu'>
        <ul>
         <li class='active'><a href='Company.aspx'><b>COMPANY</b></a></li>
         <li><a href='EmployeeReg.aspx'><b>EMPLOYEE</b></a></li>
         <li><a href='#'><b>SALARY</b></a></li>
       </ul>
      </div>
      </div>

     <div class="row">
       <div class="col-md-12" style="height:12px;background-color:#FFA319"></div>
      </div>

     <div class="row">
     <div class="col-md-6"></div>
      <div class="col-md-6"> </div>
     </div>

     <div class="row">
       <div class="col-md-8" style="padding:1%">
          <asp:Label ID="lblheading" runat="server" Text="CUSTOMER FORM" Font-Bold="True" Font-Names="Calibri" Font-Size="Large" ForeColor="#990000"></asp:Label>
       </div>
       <div class="col-md-4">
          <asp:ImageButton ID="imgbtnsave" runat="server" ToolTip="Save" Height="50px"
               ImageUrl="~/images/savered1.png" Width="50px" onclick="imgbtnsave_Click" />
          <asp:ImageButton ID="imgbtnedit" runat="server" ToolTip="Update" Height="50px"
               ImageUrl="~/images/editred5.png" Width="50px" onclick="imgbtnedit_Click" />
          <asp:ImageButton ID="imgbtndelete" runat="server" ToolTip="Delete" Height="50px"
               ImageUrl="~/images/deletered1.png" Width="50px" />
          <asp:ImageButton ID="imgbtnsendmail" runat="server" Height="50px"
               ToolTip="Send mail" ImageUrl="~/images/mailred1.png" Width="50px" />
          <asp:ImageButton ID="imgbtnclear" runat="server" ToolTip="Clear all"
               Height="50px"  ImageUrl="~/images/clearred1.png" Width="50px"
               onclick="imgbtnclear_Click" />
          <asp:ImageButton ID="imgbtnshow" runat="server" ToolTip="Show all" Height="50px"
               ImageUrl="~/images/showred1.png" Width="50px" />
       </div>
      </div>

<div id="FieldsDiv">
   <div class="row">
   <div class="col-md-1"></div><%-- for spacing--%>
   <div class="col-md-5">
    <div class="row">
     <div class="col-md-6">
       <asp:Label ID="lblcustid"  runat="server" Text="Customer ID" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
       <asp:TextBox ID="txtcustid" class="form-control" runat="server"></asp:TextBox>
          <%-- <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>--%>
           <input type="text" id="TextBox1" value="" />

       </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <asp:Label ID="lblfname" runat="server"  Text="First Name" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
        <asp:TextBox ID="txtfname" class="form-control" runat="server"></asp:TextBox>
       </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <asp:Label ID="lbllname" class="control-label" runat="server" Text="Last Name" Font-Names="Calibri"  Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
         <asp:TextBox ID="txtlname" class="form-control"  runat="server"></asp:TextBox>
        </div>
    </div>
     <div class="row">
      <div class="col-md-6">
         <asp:Label ID="lblPhone" runat="server" Text="Phone" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
         <asp:TextBox ID="txtphone" class="form-control" runat="server"></asp:TextBox>
       </div>
    </div>
    <div class="row">
      <div class="col-md-6">
         <asp:Label ID="lblFax" runat="server" Text="Fax" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
          <asp:TextBox ID="txtfax" class="form-control" runat="server"></asp:TextBox>
       </div>
    </div>
    <div class="row">
      <div class="col-md-6">
          <asp:Label ID="lblAddress" runat="server" Text="Address" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
           <asp:TextBox ID="txtaddress" class="form-control" runat="server"></asp:TextBox>
       </div>
    </div>
    <div class="row">
      <div class="col-md-6">
          <asp:Label ID="lblpin" runat="server" Text="Pin" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
            <asp:TextBox ID="txtpin" class="form-control" runat="server"></asp:TextBox>
       </div>
    </div>
    <div class="row">
      <div class="col-md-6">
         <asp:Label ID="lblapplyemployee" runat="server" Text="Apply Employee" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
           <asp:TextBox ID="txtapplyemployee" class="form-control" runat="server"></asp:TextBox>
       </div>
    </div>

     <div class="row">
      <div class="col-md-6">

       </div>
       <div class="col-md-6">


       </div>
     </div>
   </div><%--col-md-6--%>
   <%--THIRD COLUMN--%>
   <div class="col-md-6">

    <div class="row">
      <div class="col-md-6"></div>
      <div class="col-md-6">
       <asp:TextBox ID="txtcustrefid" runat="server" Visible="False"></asp:TextBox>
       </div>
     </div>

    <div class="row">
       <div class="col-md-6">
        <asp:Label ID="lblclientname" runat="server" Text="Client Name" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
         <asp:TextBox ID="txtclientname" class="form-control" runat="server"></asp:TextBox>
       </div>
     </div>

     <div class="row">
      <div class="col-md-6">
         <asp:Label ID="lbltype" runat="server" Text="Client Type" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
      </div>
      <div class="col-md-6 form-group input-group">
            <asp:DropDownList ID="ddlclienttype"  class="form-control" runat="server">
               <asp:ListItem>ss</asp:ListItem>
               </asp:DropDownList>
               <span class="input-group-btn">
                 <asp:ImageButton ID="imgbtnaddclienttype"  runat="server" Height="25px"  Width="25px" ImageUrl="~/images/addmorered.png" />
               </span>
          </div>
      </div>

     <div class="row">
      <div class="col-md-6">
        <asp:Label ID="lblmobile" runat="server" Text="Mobile" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
         <asp:TextBox ID="txtmobile" class="form-control" runat="server"></asp:TextBox>
       </div>
     </div>

     <div class="row">
      <div class="col-md-6">
         <asp:Label ID="lblemail" runat="server" Text="Email" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
          <asp:TextBox ID="txtemail" class="form-control" runat="server"></asp:TextBox>
       </div>
     </div>

      <div class="row">
      <div class="col-md-6">
         <asp:Label ID="lblcity" runat="server" Text="City" Font-Names="Calibri"  Font-Size="Medium" ></asp:Label>
       </div>
       <div class="col-md-6">
         <asp:TextBox ID="txtcity" class="form-control" runat="server" ></asp:TextBox>
       </div>
     </div>
      <div class="row">
      <div class="col-md-6">
        <asp:Label ID="lblcountry" runat="server" Text="Country" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
           <asp:DropDownList ID="ddlcountry" class="form-control" runat="server">
               </asp:DropDownList>
       </div>
     </div>
      <div class="row">
      <div class="col-md-6">
          <asp:Label ID="lblcredit" runat="server" Text="Credit" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
          <asp:TextBox ID="txtcredit" class="form-control" runat="server"></asp:TextBox>
       </div>
     </div>
      <div class="row">
      <div class="col-md-6">
          <asp:Label ID="lbllanguage" runat="server" Text="Language" Font-Names="Calibri" Font-Size="Medium"></asp:Label>
       </div>
       <div class="col-md-6">
         <asp:TextBox ID="txtlanguage" class="form-control" runat="server"></asp:TextBox>
       </div>
     </div>



   </div><%--col-md-6--%>
   </div>
   </div><%-- end--%>

<%--add more fields--%>
       <div class="row" >
        <div class="col-md-12">
        <div class="row">
        <div class="col-md-1"></div><%-- for spacing--%>
         <div class="col-md-11">
          <div id="addmorefieldsDiv" runat="server" class="row">
          </div>
         </div>
        </div>

       <div class="row">
        <div class="col-md-1"></div><%-- for spacing--%>
         <div class="col-md-11">
          <asp:Button ID="btnaddmorefields" class="btn btn-default" runat="server" Text="Add More Fields" BackColor="#990000" ForeColor="White" />
         </div>
        </div>

     </div>
   </div>
 <%--add more fields end--%>
<%--</div>--%>

<div class="row footer">
     <div  class="col-md-12" style="height:12px;background-color:#FFA319;padding-bottom:0px"></div>
      <div  class="col-md-12" style="height:25px;background-color:#D65C33">
        <p>&copy;  sumat &nbsp;2015 &nbsp;</p>
    </div>
   </div>

 </div> <%--container--%>

    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>

     <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="imgbtnshow" PopupControlID="DivCustomerDetails"
         CancelControlID="imgbtnDIVcancel" BackgroundCssClass="tableBackground" PopupDragHandleControlID="DivCustomerDetails" Drag="true">
     </asp:ModalPopupExtender>
     <div id="DivCustomerDetails" runat="server" style="width:824px;height:500px;background-color:#CECEB6;border: thin solid black">
       <div id="DivCustomerDetailsMenu" runat="server" style="width:824px;height:30px;background-color:#596A1E;border: thin solid black">
          <div class="row" style="width:820px;height:25px;">
             <div class="col-md-11" style="padding:1% 1% 3% 2%">
                <asp:Label ID="lblemployeedetails" runat="server"  Text="Employee Details" ForeColor="White" Font-Bold="True"  Font-Names="Calibri"></asp:Label>
             </div>
             <div class="col-md-1">
               <asp:ImageButton ID="imgbtnDIVcancel" runat="server" Height="25px"  ImageUrl="~/images/cleargrey1.png" Width="25px" />
             </div>
           </div>
         </div><%--DivClientTypeMenu--%>

         <div id="divgriddetails" runat="server" style="width:824px;height:300px;overflow: scroll;background-color:#CECEB6;">
          <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="CustRefID"
                 CssClass="Grid" PagerStyle-CssClass="pgr"  AlternatingRowStyle-CssClass="alt"
             Width="1000px" onrowdatabound="GridView1_RowDataBound"
                 onselectedindexchanged="GridView1_SelectedIndexChanged">
                 <AlternatingRowStyle CssClass="alt" />
                 <Columns>
                     <asp:BoundField DataField="CustRefID" HeaderText="CustRefID" Visible="False" />
                     <asp:BoundField DataField="CustID" HeaderText="CustomerID" />
                     <asp:BoundField DataField="FirstName" HeaderText="First Name" />
                     <asp:BoundField DataField="ClientName" HeaderText="Client Name" />
                     <asp:BoundField DataField="ClientType" HeaderText="Client Type" />
                     <asp:BoundField DataField="Address" HeaderText="Address" />
                     <asp:BoundField DataField="City" HeaderText="City" />
                     <asp:BoundField DataField="Country" HeaderText="Country" />
                     <asp:BoundField DataField="Mobile" HeaderText="Mobile" />
                     <asp:BoundField DataField="Email" HeaderText="Email" />
                     <asp:BoundField DataField="Fax" HeaderText="Fax" />
                     <asp:BoundField DataField="Language" HeaderText="Language" />
                     <asp:BoundField DataField="Credit" HeaderText="Credit" />
                     <asp:BoundField DataField="ApplyEmployee" HeaderText="Apply Employee" />
                     <asp:TemplateField HeaderText="Active">
                         <ItemTemplate>
                             <asp:CheckBox ID="CheckBox1" runat="server" Checked='<%# bool.Parse(Eval("IsActive").ToString() == "Yes" ? "True": "False") %>' />
                         </ItemTemplate>
                     </asp:TemplateField>
                 </Columns>
                 <PagerStyle CssClass="pgr" />
             </asp:GridView>
        </div>  <%--divgriddetails--%>
       </div> <%--DivClientType--%>

   <asp:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="imgbtnaddclienttype" PopupControlID="DivClientType"
         CancelControlID="btncancelclienttype" BackgroundCssClass="tableBackground" PopupDragHandleControlID="DivClientType" Drag="true">
     </asp:ModalPopupExtender>

     <div id="DivClientType" class="container" runat="server" style="width:300px;height:300px;background-color:#CECEB6;border: thin solid black">
       <div id="DivClientTypeMenu" runat="server" style="width:300px;height:30px;background-color:#596A1E;border: thin solid black">
          <div class="row" style="width:300px;height:25px;">
             <div class="col-md-11" style="padding:1% 1% 3% 2%">
                <asp:Label ID="Label1" runat="server"  Text="Client Type" ForeColor="White" Font-Bold="True"  Font-Names="Calibri"></asp:Label>
             </div>

           </div>
         </div><%--DivClientTypeMenu--%>
         <div class="row">
          <div class="col-md-2"></div>
          <div class="col-md-8">
            <div class="row">
              <div class="col-md-6">
                  <asp:Label ID="lblenterclienttype" runat="server" Text="Enter new client type !!!"></asp:Label>
              </div>
              <div class="row">
              <div class="col-md-6">
                  <asp:TextBox ID="txtnewclienttype" runat="server"></asp:TextBox>
              </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6">
                  <asp:Button ID="btnsaveclienttype" class="btn btn-default" runat="server"
                      Text="Save" BackColor="#669900" Font-Bold="False" ForeColor="White" />
              </div>
              <div class="col-md-6">
                  <asp:Button ID="btncancelclienttype" class="btn btn-default" runat="server"
                      Text="Cancel" BackColor="#669900" Font-Bold="False" ForeColor="White" />
              </div>
            </div>
          </div>
          <div class="col-md-2"></div>
         </div>
         </div><%--DivClientType--%>




    </form>
</body>

</html

>

Posted 3-May-15 20:43pm

Member 11660204

Updated 3-May-15 21:17pm

v3

Add a Solution

Comments

psima 4-May-15 3:02am

can you please share your design page as well i.e. aspx?
We need more details of what is extraFieldName, extraFieldValue,dt,count etc.

[no name] 4-May-15 3:23am

extraFieldName and extraFieldValue is the fields that we are adding dynamically.It works well.But after retrieving the data from database I want to show the existing data in the textboxes.As it is creating the textbox dynamically i need to use html controls.If it is asp controls it would be easy.count refers to the total number of data in the extrafieldName or extrafieldValue array.

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2015-05-03T22:09:00

Solution 1

The easiest way would be storing the array in a HiddenField and access that inside the JavaScript method. As described here - Passing arrayList to javascript function[^].

Otherwise, you have to actually declare a JavaScript Variable as Array and then push data into it and then call the script like described here - Pass C# ASP.NET array to Javascript array[^].

Posted 3-May-15 22:09pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

[no name] 4-May-15 6:42am

@Tadit ...I tried using stringbuilder but it is not working.I just need to know how call the js function with string array as arguments.The correct syntax of passing array and using it in the javascript.I searched many,but i didnt get the suitable solution.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-May-15 8:21am

Then store it in HiddenField.

[no name] 5-May-15 8:34am

Million thanks!!!I resolved my problem...

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 5-May-15 8:42am

Most welcome buddy. :)

calling javascript function using string array arguments from c# code

1 solution

Solution 1

Add your solution here

Preview 0

calling javascript function using string array arguments from c# code

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us