0

I have a button sending an input from a text field in a form to my mvc controller using ajax. I now want the controller to return 2 strings as a json, and fill those strings into html inputs.

Controller

[HttpPost]
    public ActionResult getName(string Name)
    {

        string SecondString = "secondString";

        return Json(Name, SecondString);
    }

View

<script>
$(document).ready(function () {
    $("#btnGet").click(function () {
        $.ajax(
            {
                type: "POST", 
                url: "home/getName", 
                data: { 
                    Name: $("#txtName").val()
                },
                success: function (result) {
                    $('#FirstTextFieldToFill').val(result);
                    $('#SecondTextFieldToFill').val(result);

                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

    });
});

3 Answers 3

2

You're wrongly assigned parameters to the Json() method to return response of JsonResult, because the second parameter is JsonRequestBehavior or contentType. You should return Controller.Json() response with single parameter like this:

[HttpPost]
public ActionResult GetName(string Name)
{
    string SecondString = "secondString";

    return Json(new { Name = Name, SecondString = SecondString });
}

And then modify your AJAX call to return 2 strings from response by using property names:

$("#btnGet").click(function () {
    $.ajax({
        type: "POST", 
        url: "@Url.Action("GetName", "Home"), 
        data: { Name: $("#txtName").val() },
        success: function (result) {
            $('#FirstTextFieldToFill').val(result.Name);
            $('#SecondTextFieldToFill').val(result.SecondString);
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            alert(response.responseText);
        }
    });
});
Sign up to request clarification or add additional context in comments.

Comments

0

Worked like this:

Controller

[HttpPost]
    public ActionResult getName(string Name)
    {

        string SecondString = "secondString";

        return Json(new { Name, SecondString });
    }

View

<script>
$(document).ready(function () {
    $("#btnGet").click(function () {
        $.ajax(
            {
                type: "POST", 
                url: "home/getName", 
                data: { 
                    Name: $("#txtName").val()
                },
                success: function (result) {
                    $('#FirstTextFieldToFill').val(result.Name);
                    $('#SecondTextFieldToFill').val(result.SecondString);
                    $('#SecondTextFieldToFill').show();
                    $('#FirstTextFieldToFill').show();


                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

    });
});

Comments

0

For this you should create a class having two string eg.

public class example
{
    public string FirstString {get; set;}
    public string SecondString {get; set;}
}

create object of the class in the controller and add the strings to it serialize to json and return

   [HttpPost]
    public ActionResult getName(string Name)
    {
        example eg=new example();
        eg.FirstString ="your first string";
        eg.SecondString ="your second string";
        string jsonString= JsonConvert.SerializeObject(eg);
        return Json(jsonString);
    }

JS file should extract the strings from the json object

<script>
$(document).ready(function () {
    $("#btnGet").click(function () {
        $.ajax(
            {
                type: "POST", 
                url: "home/getName", 
                data: { 
                    Name: $("#txtName").val()
                },
                success: function (result) {
                    var jsonResult=JSON.parse( result );
                    $('#FirstTextFieldToFill').val(jsonResult.FirstString);
                    $('#SecondTextFieldToFill').val(jsonResult.SecondString);

                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

    });
});

Dependency required in controller are JsonConvert is from the namespace Newtonsoft.Json

Use NuGet to download the package

"Project" -> "Manage NuGet packages" -> "Search for "newtonsoft json". -> click "install"

1 Comment

Thanks man. Already worked with the solution posted before. This one worked as well

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.