Get Value[s] from same input and Send to Controller | AJAX MVC

Question

User490317677 posted

Hi :)

I Have one Input field which contains Two values and i want send both values to my Controller.

This is what i end up with:

HTML:

User separate values with Kama:

 <input  name="CustomerNumber" id="CustomerNumber" value="10883,10886">
 <button type="button" onclick="BtnAddCustomers();">Send</button>

AJAX:

Here I'm Trying putting values into the array and than push to Controller , but i think im doing in wrong way and array is empty when i check in console:

function BtnAddCustomers() {

 var params = $("#CustomerNumber").val();

 var items = [];

 for (var i = 0; i < params; i++) {
            items.push(params);
        }
 console.log(item);

        $.ajax({
            type: "GET",
            url: "/User/GetCustomerContactInfo?ids=" + items,
            dataType: 'json',
            success: function (value) {
                console.log(value)
                }
            },
            error: function () {
                console.log('something went wrong - debug it!');
            }
        })
}

Controller:

[HttpGet]
public JsonResult GetCustomerContactInfo(string[] ids)
{

   return Json(return something);

}

How can i archive this ?! or what is the best approach !

Answer 1

User-474980206 posted

you can not pass a string array as a query string parameter, each query string parameter is a single string. use the binding rules for passing an array:

         url: "/User/GetCustomerContactInfo?ids[0]=" + items[0] + "ids[1]= items[1],
   

or  rather than build query string, let jQuery do it:

      $.ajax({
            type: "GET",
            url: "/User/GetCustomerContactInfo",
            data: {"items[0]" : items[0], "items[1]" : items[1]}
            dataType: 'json',

 

Answer 2

User490317677 posted
It’s not always just two values it could be more. How it should be done with indexing though for loop or?!

Answer 3

User-474980206 posted

pretty trival.

var data = $("#CustomerNumber").val()
  .split(",")
  .reduce(function(a,c,i) {
      a["item[" + i + "]"] = c;
      return a;
  },{});

$.ajax({
   ...
   data: data,
   ...
}

Answer 4

User665608656 posted

Hi ManDown,

ManDown

How can i archive this ?! or what is the best approach !

To achieve, I suggest you can split the value in input box to an array, the most important is that you should add following sentence to ensure you can pass array to controller.

traditional: true,

Then, I found that you use Get method in ajax, so you should add JsonRequestBehavior.AllowGet in the controller method when you return something.

You can also refer to this link : Pass array of string from ajax to controller

Here is the complete code:

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

 var items = [];
items = $("#CustomerNumber").val().split(","); 
        $.ajax({ 
            type: "GET",
            url: "/User/GetCustomerContactInfo",
            data: { ids: items },
             dataType: 'json',
           traditional: true,//this is necessary!
            success: function (value) {
                alert(value);
            },
            error: function () {
                alert('something went wrong - debug it!');
            }
        })
}
    </script>

    [HttpGet]
        public JsonResult GetCustomerContactInfo(string[] ids)
        {
            return Json("success!", JsonRequestBehavior.AllowGet);

        }

The result of this example:

Best Regards,

YongQing.

Answer 5

User490317677 posted

Thanks for suggestion , its workin fine :)