Send to and get value from a MVC3 controller by AJAX

Question

I have a html input text field and a button.

I want to take user input value from that html text field by clicking that button and want to send that value (by AJAX)

Answer 1

Button click event

$(document).ready(function ()
{
    $('#ButtonName').click(function ()
    {
        if ($('#YourHtmlTextBox').val() != '')
        {
            sendValueToController();
        }
        return false;
    });
});

You call your ajax function like so:

function sendValueToController()
{
    var yourValue = $('#YourHtmlTextBox').val();

    $.ajax({
        url: "/ControllerName/ActionName/",
        data: { YourValue: yourValue },
        cache: false,
        type: "GET",
        timeout: 10000,
        dataType: "json",
        success: function (result)
        {
            if (result.Success)
            { // this sets the value from the response
                $('#SomeOtherHtmlTextBox').val(result.Result);
            } else
            {
                $('#SomeOtherHtmlTextBox').val("Failed");
            }
        }
    });
}

This is the action that is being called

public JsonResult ActionName(string YourValue)
{
    ...
    return Json(new { Success = true, Result = "Some Value" }, JsonRequestBehavior.AllowGet);
}