CODEWITHSUNDEEP
jqueryasp.netajax
Richard77
Richard77

Reputation: 21661

How to send more than 1 parameters with a JQuery Ajax request?

Over a week I ask a question about Jquery and Ajax. I still don't know how to exploit the answer because I still have more questions on the matter. Here my aspx page. 

<asp:ListView ID="_lsvCostFinder" runat="server" InsertItemPosition = "LastItem">
    <LayoutTemplate>
       <table>
        <tr>
          <th>Country</th>
          <th>City</th>
          <th>Cost(US$)</th>                
        </tr>
        <tr  runat="server" id="itemPlaceHolder">
        </tr>
       </table>
      </LayoutTemplate>
      <ItemTemplate>
       <tr>
         <td>
             <asp:LinkButton ID="_lnkDelete" runat="server" OnClick = "RemoveDestination">Delete</asp:LinkButton>
         </td>
         <td>
            <asp:DropDownList ID="_ddlCountry" runat="server" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" AutoPostBack = "true">
               <asp:ListItem Value = "0">CANCEL..</asp:ListItem>
               <asp:ListItem Value = "1">USA</asp:ListItem>
               <asp:ListItem Value = "2">Germany</asp:ListItem>
               <asp:ListItem Value = "3">France</asp:ListItem>
               <asp:ListItem Value = "4">GB</asp:ListItem>
               <asp:ListItem Value = "5">Congo</asp:ListItem>
             </asp:DropDownList>
           </td>
           <td>
              <asp:DropDownList ID="_ddlCity" runat="server" OnSelectedIndexChanged="ddlCity_SelectedIndexChanged" AutoPostBack = "true" 
                        AppendDataBoundItems = "true" Width = "100">
                 <asp:ListItem Value = "0">CANCEL..</asp:ListItem>
                </asp:DropDownList>
            </td>
            <td>
                <asp:TextBox ID="_txtCost" runat="server" Width = "50" AutoPostBack = "true" OnTextChanged = "txtCost_TextChanged"></asp:TextBox>
            </td>
          </tr>
       </ItemTemplate>
       <InsertItemTemplate>
          <tr>
              <td style = "text-align: right; font-weight: bold;" colspan = "3">Total</td>
              <td style = "background-color: Silver; border: 2px solid black;">
                        <asp:Label ID="_lblTotal" Font-Bold ="true" runat="server"></asp:Label>
              </td>
            </tr>
          </InsertItemTemplate>
      </asp:ListView> 
        <br /><br />
      <asp:Button ID="_btnNewDestination" runat="server" Text="Add Destination" 
            onclick="_btnNewDestination_Click" />

The person who answered my question suggested me to use the following JQuery code:

$(document).ready(function () {//ready       
  $('select').change(function () {//select
    var id = $(this).attr('id');
    if (id.indexOf('_ddlCountry') != -1) {
       var nrow = id.match('\\d+');
       $.post('Default.aspx/ddlCountry_SelectedIndexChanged', { selectedVal: $(this).val() }, function (data) {                  
          $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
           });
          }
        }); //select
   });//ready

Also change the signature so that the method looks like this

[WebMethod]
public static string MethodName(string selectedVal)
{
 return "something";
}

From the method's signature, I conclude that the Jquery ajax request is sending only 1 parameters. I don't want to send only 1 parameters. I want to send 3, namely the value of the first dropdownlist, the value of the second dropdownlist, and the value of the textbox.

How do I send more than one value with the ajax request?

Thank s for helping.

Upvotes: 1

Views: 499

Answers (5)

Adrian Salazar
Adrian Salazar

Reputation: 5319

You'll end up having something like this:

[WebMethod]
public static string MethodName(string param1, string param2, string param3)
{
    return "something";
}

And on the client side this will change:

 $(document).ready(function () {//ready       
      $('select').change(function () {//select
     var id = $(this).attr('id');
     if (id.indexOf('_ddlCountry') != -1) {
     var nrow = id.match('\\d+');
     $.post('Default.aspx/ddlCountry_SelectedIndexChanged', { param1: $(this).val(), param2: 'something', param3: 'something else' }, function (data) {                  
      $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
       });
      }
    }); //select
    });//ready

BUT PLEASE DON'T DO THAT

As I can see in your code, you're just in your babysteps to ajax with Jquery and ASP.

Right now you are making a "low" level call to your server, and if you want to send and receive complex data this way of making ajax will give you just nightmares.

There is something called JSON and you are just one baby step away of achieving that

Check this tutorial: http://www.ezzylearning.com/tutorial.aspx?tid=5869127

And if you have questions I can post a sample "complex" ajax web service call.

Upvotes: 0

Irfan DANISH
Irfan DANISH

Reputation: 8499

You can post as many parameters as you want

$.post('Default.aspx/ddlCountry_SelectedIndexChanged', 
 { param1_name: param1_val, param2_name: param2_val, param3_name:param3_val }, 
 function (data) {                  
      $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
       });
      }
    });

see $.post documentation Documentation

Upvotes: 2

Chase
Chase

Reputation: 29569

The second parameter in you post call is the data associated with the call: 

   $.post('Default.aspx/ddlCountry_SelectedIndexChanged', { selectedVal: $(this).val() }, function (data) {                  
      $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
   });

{ selectedVal: $(this).val() } this is just an object passed along with your call. In order to pass more values you could either add them inline like so:

{ selectedVal: $(this).val(), selectedVal2: "Value2", selecetedValue3: "Value3" }

or create an object before the call:

var parameters = {
 selectedVal: $(this).val(),
 selectedVal2: "Value2", //insert the values you want here
 selecetedValue3: "Value3" //insert the values you want here 
};

which would change your post call to: 

   $.post('Default.aspx/ddlCountry_SelectedIndexChanged', parameters, function (data) {                  
      $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
   });

You would then need to make sure your call accepts and handles the three parameters accordingly.

Upvotes: 1

sites
sites

Reputation: 21815

    $.post('Default.aspx/ddlCountry_SelectedIndexChanged', 
      { selectedVal: $(this).val() , anotherParameter: 'a value'}, 
      function (data) {                  
        $(this).parents('tr').replaceWith('<tr><td colspan="3"><div>' + $(this).val() + '</div></td></tr>');
       });

I don't know about ASP, but I think you just have to add parameter like this: 

public static string MethodName(string selectedVal, string anotherParameter)
{
 return "something";
}

Upvotes: 1

Joe C.
Joe C.

Reputation: 1538

To send more than one value with the AJAX request, you simply add more elements to the parameters object. For a deeper understanding of what the $.post method is doing and the function parameters being passed, check the documentation.

Upvotes: 1

Related Questions