CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-mvc-4razor
user3772251
user3772251

Reputation: 77

Values not going to controller method using Ajax Call

I am using MVC 4 and want to send a form and some other values to controller method using Ajax Call but i am unable to do that after trying so hard.Please look at my code below and guide me with some enhancements in my code.

Code of my script:

 $(document).ready(function () {

           var ids = [];
        $("#btnproceed").click(function () {
            debugger;
            //   $("div[class^='apple-']")

            $("div[class^='dvDynamic_']").each(function () {
                debugger;


                var pids = $(this).text();

                ids.push(pids);

            });

            ids = [];
 });

Code of form to serialize and send:

          <form id="customerform">
            <div id="customerdetails">
                <label>Your Information</label><br />

                @*@for (int i = 0; i < Model.Orders.Count; i++) {*@
                @Html.TextBoxFor(m => m.Orders.Customer, new { @placeholder = "Enter Your Full Name" })
                @Html.ValidationMessageFor(m => m.Orders.Customer)
                @Html.TextBoxFor(m => m.Orders.Phone, new { @placeholder = "Enter Your Cell Number" })
                @Html.ValidationMessageFor(m => m.Orders.Phone)
                @Html.TextAreaFor(m => m.Orders.Address, new { @rows = 3, @cols = 2, @style = "width:300px;", @placeholder = "Enter Your  Complete Delivery Address" })
                @Html.ValidationMessageFor(m => m.Orders.Address)


                <input id="btnback" type="button" value="Back" /> <input id="btnsubmit" type="button" value="Submit" />  @*<input id="submit" type="submit" value="Save" />*@

            </div>
        </form>

Code of my final submit button:

       $('#btnsubmit').click(function () {

         debugger;


            var form = [{ "name": "customerinfo", "value": JSON.stringify($('#customerform')) }];
            var data = JSON.stringify({
                'products': ids,
                'customerinfo': form

            });

            $.ajax({

                type: "POST",
                url: "@Url.Action("GetIds", "Store")",
                data: data,
                contentType: "application/json; charset=utf-8",

            success: function (r) {
                alert(r.d);
            }
        });
});

and code of my receiving method in controller

 public JsonResult GetIds(string products, string customerinfo)
 {
 }

values in controller method are coming empty

Upvotes: 2

Views: 867

Answers (2)

user3559349
user3559349

Reputation:

You can serialize your form and append additional data to it

var data = $('form').serialize() + '&' + $.param({ 'products': ids }, true);
var url = '@Url.Action("GetIds", "Store")';
$.post(url, data, function(r) { alert r.Id; });

and change you method to

public JsonResult GetIds(ProductOrderViewModel  model, string[] products)

However you first script initializes a new array (var ids = [];), adds objects to it and then resets it to an empty array (the last line of your code is ids = [];). Suggest you just test this by using var ids = []; ids.push('abc'); ids.push('def'); to test initially.

Upvotes: 1

Martin
Martin

Reputation: 1634

You need to build a more complex model to bind the form data. Something like this:

public JsonResult GetIds(InputModel model)
{

}

public class InputModel
{
    public string[] Products { get; set; }
    public CustomerInfoModel CustomerInfo { get; set; }
}

public class CustomerInfoModel
{
    public string Name { get; set; }
    public string Value { get; set; }
}

You could do some refactoring and skip the JSON.stringify($('#customerform')) part and instead match the model with your form.

Upvotes: 0

Related Questions