CODEWITHSUNDEEP
jqueryasp.net-mvc-5
VVR147493
VVR147493

Reputation: 251

Javascript data to send it to controller on Ajax form submit

I am facing an issue.

I have placed few dropdowns and input controls in a webform inside a div. When I click on Add button, the above div generate using javascript and all controls will generate dynamically by javascript with different ids and append using below.

$("#xra-products-wrap").append(strVar).html();

When I click on save button in the page it is an ajax submit

@(Ajax.Beginform (){}

In this situation how can I get the values from controls and send it to controller. When I click on add button I can store the value in javascript. But on click on save how can I pass the data to the controller. I can store the data in javascript. But while submitting the form I am unable to send it to form.

Please can you help on this.

Upvotes: 0

Views: 352

Answers (2)

Null Void
Null Void

Reputation: 46

You need to call @Ajax.BeginForm with an AjaxOptions argument to drive its behaviour. The Url property of this argument specifies where the AJAX request will be sent (in this case, I assume it will a URL routed to a controller action method). The UpdateTargetId property of the argument specifies which client-side DOM element will receive the rendered HTML from the return value of the action method (which could be a PartialViewResult, for example).

You can also set the OnSuccess and OnFailure properties in the AjaxOptions argument to specify JavaScript code that must be executed upon success and failure, respectively.

@Ajax.BeginForm will generate code to submit form values (even those from elements added dynamically) to the specified URL, process the response and render the data payload (which would be HTML if a PartialViewResult is returned) inside the DOM element specified by UpdateTargetId. Thus, you do not have to store form values in JavaScript and do not have to manually submit them to the controller action.

Say, you need to refresh the form after the values have been submitted. Create a partial view with the form elements and, using RenderPartial, render the partial view within a <div> element on the main page. Then, set the value of AjaxOptions.Url to the URL of the controller action that will process the form, and the value of AjaxOptions.UpdateTargetId to the id of the <div> element.

Please refer to AjaxExtensions.BeginForm and AjaxOptions on MSDN for more details.

Upvotes: 1

kvn
kvn

Reputation: 2300

I assume that you want to fetch information from form elements.

var dropdown = $("select[name='dropdown']").val();
var text = $("input[name='text']").val();

You should be able to get value of those fields this way. With these values you should be able to make an ajax call to the server.

Upvotes: 0

Related Questions