asp.net mvc jquery posting multiple hidden fields

Question

i have this list of hidden fields

   <input type="hidden" value="1" id="serviceslist" name="serviceslist" />
   <input type="hidden" value="2" id="serviceslist" name="serviceslist" />
   <input type="hidden" value="3" id="serviceslist" name="serviceslist" />

i have add more button which when clicked want to sent the serviceslist to mvc controller. basically i think that i need to send the list as array. how can i do it?

  $('#addmoreservices').click(function () {          
     var serviceslist= $("#serviceslist").val()
        $.ajax({
            url: url,
            data: { serviceslist: serviceslist },
            cache: false,
            dataType: "json",
            traditional: true,
            type: "POST",
            success: function (data) {

                alert("dddd");
            },
            error: function (reponse) {
                alert("error : " + reponse);
            }
        });
    });

this is my mvc controller

 [HttpPost]
    public ActionResult AddmoreServices(List<int> serviceslist)
    {

        return View();
    }

id should be unique

Pranav C Balan
– Pranav C Balan

2014-02-26 11:17:06 +00:00
Commented Feb 26, 2014 at 11:17 — Pranav C Balan
– Pranav C Balan, Commented Feb 26, 2014 at 11:17

alexmac · Accepted Answer · 2014-02-26 11:31:38Z

3

You have some errors in your html and js.

First of all, id must be unique:

<input type="hidden" value="1" id="val1" />
<input type="hidden" value="2" id="val2" />
<input type="hidden" value="3" id="val3" />

The second one, jquery val() function gets the current value of the first element in the set of matched elements, not array.

And the third one, is about posting your data on server. By default jquery.ajax post's your data in url contentType='application/x-www-form-urlencoded', it should be changed to application/json.

serviceslist = [$("#val1").val(), $("#val2").val() ,$("#val3").val()];
$.ajax({
   url: url,
   data: serviceslist,
   contentType: 'application/json',
   ....

edited Feb 26, 2014 at 11:31

answered Feb 26, 2014 at 11:20

alexmac

19.7k7 gold badges64 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

shanish · Accepted Answer · 2014-02-26 11:33:33Z

Alternatively you can do by making the button as submit like,

@using(Html.BeginForm("AddMoreServices", "Your controller name", FormMethod.Post, null)) {

<input type="hidden" value="1" id="val1" name="serviceslist" />
<input type="hidden" value="2" id="val2" name="serviceslist" />
<input type="hidden" value="3" id="val3" name="serviceslist" />

<button type="submit" value="Add More Services"/>

}

and your controller action method can be

[HttpPost]
public ActionResult AddMoreServices(FormCollection collection)
{
    try
    {
        string[] test = collection.GetValues("serviceslist");

        // here test[0] will give you the value of `val1`
        // test[1] will give `val2` and test[2] will give `val3`'s values
    }
    catch (Exception ex)
    {
        return null;
    }
}

Pranav C Balan · Accepted Answer · 2014-02-26 11:18:33Z

0

Try something like this,

HTML :

<input type="hidden" value="1" class="serviceslist" name="serviceslist" />
<input type="hidden" value="2" class="serviceslist" name="serviceslist" />
<input type="hidden" value="3" class="serviceslist" name="serviceslist" />

JQUERY :

$('#addmoreservices').click(function () {          
    var serviceslist= $(".serviceslist").serialize();
    $.ajax({
        url: url,
        data: serviceslist,
        cache: false,
        dataType: "json",
        traditional: true,
        type: "POST",
        success: function (data) {

            alert("dddd");
        },
        error: function (reponse) {
            alert("error : " + reponse);
        }
    });
});

answered Feb 26, 2014 at 11:18

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Collectives™ on Stack Overflow

asp.net mvc jquery posting multiple hidden fields

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related