Jquery – Send to and get value from a MVC3 controller by AJAX

asp.net-mvc-3jquery

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) into a MVC3 Controller ( as like as a parameter of an ActionResult setValue() ) ?

An other thing i want to know that, how i can get a return value (that return by a ActionResult getValue() ) from a MVC3 Controller and set it in a html text field (by AJAX) ?

please help me with a good example, please. and sorry for my bad English. 🙂

Best Answer

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);
}

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

From the jQuery documentation: you specify the asynchronous option to be false to get a synchronous Ajax request. Then your callback can set some data before your mother function proceeds.

Here's what your code would look like if changed as suggested:

beforecreate: function (node, targetNode, type, to) {
    jQuery.ajax({
        url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
        success: function (result) {
            if (result.isOk == false) alert(result.message);
        },
        async: false
    });
}

Javascript – HTML-encoding lost when attribute read from input field

EDIT: This answer was posted a long ago, and the htmlDecode function introduced a XSS vulnerability. It has been modified changing the temporary element from a div to a textarea reducing the XSS chance. But nowadays, I would encourage you to use the DOMParser API as suggested in other anwswer.

I use these functions:

function htmlEncode(value){
  // Create a in-memory element, set its inner text (which is automatically encoded)
  // Then grab the encoded contents back out. The element never exists on the DOM.
  return $('<textarea/>').text(value).html();
}

function htmlDecode(value){
  return $('<textarea/>').html(value).text();
}

Basically a textarea element is created in memory, but it is never appended to the document.

On the htmlEncode function I set the innerText of the element, and retrieve the encoded innerHTML; on the htmlDecode function I set the innerHTML value of the element and the innerText is retrieved.

Check a running example here.

Best Answer

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

Javascript – HTML-encoding lost when attribute read from input field

Related Topic