CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3
bnil
bnil

Reputation: 1541

how to submit the form values using ajax call, without using submit button

I am developing MVC application.

I want to submit the form using ajax function, not using standard submit button click event.

I want to pass object of the model along with string array (which is not related to object of the model.)

I have below code in Create View

@using (Html.BeginForm("Create", "AdviceCreate", FormMethod.Post, new { enctype = "multipart/form-data", id = "frmCreate", onsubmit = "disableSubmitButton()" }))

{ }

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

            alert("create")

            var count = $(".clsInvoiceId").length;
            var invoiceDetailsArray = new Array();
            var ledgerDetailsArray = new  Array();

            var obj = '@Html.Raw(Json.Encode(Model))';



            $.ajax({
                contentType: 'application/json; charset=utf-8',           
                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data:
                JSON.stringify({ 
                    AdviceCreateVM : obj,
                    InvoiceDetails : invoiceDetailsArray,
                    LedgerDetails  : ledgerDetailsArray

                }),              
                success: function () {

                }
            });
        });

and below code in controller

public ActionResult Create(AdviceCreateVM AdviceCreateVM, string[] InvoiceDetails, string[] LedgerDetails)
 {
}

but in controller, AdviceCreateVM comes as NULL ...

what is missing ?

Upvotes: 0

Views: 1110

Answers (3)

SSA
SSA

Reputation: 5493

If I understand you, you want to manually submit a form on a button click and along with it,you want to supply extra data.

Edit: Corrected some mistakes. here is working Example in .Net Fiddle check console.log output in fiddle. Removed content-Type, as we are customizing it, jquery ajax will auto detect it.

$('#create').click(function (e) {

            e.preventDefault(); 
            alert("create")

            var count = $(".clsInvoiceId").length;
            var invoiceDetailsArray = new Array();
            var ledgerDetailsArray = new  Array();

            //If you have validation attached, then you need to validate the form first and before submit if form is valid. 

            var obj =$("#frmCreate").serializeArray(); //serializeArray gives you a name,value object
            //Append extra data to above name/value collection,   
            obj.push({name: 'InvoiceDetails', value: invoiceDetailsArray});
            obj.push({name: 'LedgerDetails', value: ledgerDetailsArray});

            $.ajax({

                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data:
               obj,              
                success: function () {

                }
            });
        });

Upvotes: 1

Idrees Khan
Idrees Khan

Reputation: 7752

your view is rendered before your button click function is called (becuase you are making client side call). so your code 

var obj = '@Html.Raw(Json.Encode(Model))';

is null becuase Model is comming null from controller. So as you are saying, you are getting the values from dynamic textboxes, then the right way is to get the data on client side (i.e using jQuery or javascript) and manually make a javascript array and pass it to the server or you have to catch the data on serverside in controller after the form is posted to the server.
Inshort, if you are thinking the code;

var obj = '@Html.Raw(Json.Encode(Model))';

will get the data after client side click, then you are on the wrong track.

Upvotes: 0

codebased
codebased

Reputation: 7073

Normally I do this:

var postData = $("#form1").serializeArray();

$.ajax({
                contentType: 'application/json; charset=utf-8',           
                url: '@Url.Action("Create", "AdviceCreate")',
                type: 'POST',    

                data: postData

                success: function () {

                }
            });

Upvotes: 1

Related Questions