CODEWITHSUNDEEP
formsasp.net-mvc-3model-view-controllerasp.net-ajax
Samuel Guimarães
Samuel Guimarães

Reputation: 574

C# - Get textbox value and send to a javascript function

I have a simple form with three textboxes and a <canvas> on the same page and I have to validate these three fields and then get the values (if validated) sent to a javascript function to draw a picture and some text inside the <canvas> element. The form and textboxes wouldn't have to disappear after the values were submitted because the user could try out different results with different values. I've done other forms before but never tried using Ajax. I know I could use a client-side validation and get the textbox values with jQuery but I have more server-side code running that would make use of these three values. How can I do this?

Upvotes: 0

Views: 619

Answers (2)

StanK
StanK

Reputation: 4770

Your View can make an ajax call to the server using JQuery - either using JQuery.post or JQuery.ajax - you give the Url of the controller action to the JQuery method, and it will handle the AJAX call for you.

Then, in your controller action, you return a JsonResult - which serialize the data for you into JSON format:

e.g. return Json( model );

Finally, implement a success function in the JQuery Ajax call in your view - this wil have the data returned by the controller available for you to do whatever you want with.

Upvotes: 0

Matt Tew
Matt Tew

Reputation: 1621

in your controller, create a method to handle the results. I assume that this is for logging only, and does not need to actually return data.

public useResults(string value1, string value2) 
{
    // ... Do something with the results

    return Json(true);
}

In your view, work out a way to construct the url to the above action. Perhaps in a hidden field;

@Html.Hidden("useResultsUrl", Url.Action("useResults", "controllerName"))

Then in your javascript, attach a click event to the button, as you probably have already (to trigger your javascript task) and add in an ajax call.

Note that the following uses JQuery, but you could use microsoft AJAX if you preferred;

$(function () {
   $("#button").click(function() {
      $.ajax({
          url: $("input[name='useResultsUrl']").val(), // Get the url from the hidden field
          type: "POST",
          dataType: "JSON",
          data: $("input[type='text']").serialize() // Get the value of the text inputs and serialise them.
      });
   });

   // ... do other stuff 
});

Upvotes: 1

Related Questions