How to return a text from Controller to View using ajax?

Question

I'm trying to return the content from the controller to the view but for some reason, it doesn't work. I want the text from the "return Contect (....)" to replace the label. Here is my code from the controller:

namespace Assignment.Controllers
{
    public class Q2Controller : Controller
    {
        // GET: Q2
        public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public ActionResult ValidateInput(string myInput)
        {
 
            string temp = "";
            for (int i = myInput.Length - 1; i >= 0; i--)
            {
                temp += myInput[i].ToString();
            }
            if (temp == myInput)
               return Content("The string is palindrome");
            else
                return Content("The string is not palindrome");
        }
    }
}

And here is the View:

<body>
    <p>Please enter an alphanumeric string:</p>
    <div class="lbl">
        @Html.Label("lblpalindrome", "Is it palidrome?")
    </div>
    <div class="content">
        @Html.TextBox("myInput");
        <input id="btn1" type="button" value="Enter" onclick="ValidateInput()" />
   </div>
</body>

<script>
    function ValidateInput() {
        var result="";
        $.ajax({
            url: "@Url.Action("ValidateInput", "Q2")",
            type: "POST",
            cache: false,
            async: true,
            data: { myInput: $('#myInput').val() },
            success: function (response.data) {
                $("#lblpalindrome").text(response.data);
            },
            error: function (response.data) {
                alert("An error occurred: " + response.data);
            }

        });
    }
</script>

I sugest that you use Chrome developer tools (https://stackoverflow.blog/2022/02/28/debugging-best-practices-for-rest-api-consumers/) or equivalent, in order on instect what exactly the server is returning to the browser. — pvieira, Jun 05 '22 at 17:35

Rory McCrossan · Answer 1 · 2022-06-05T14:13:25.283

0

As you're just returning a plain string response, then there's no data property in the response argument of the success handler function. response itself is the text value:

success: function(response) {
  $("#lblpalindrome").text(response);
},

That being said, returning a plain text response is not a good pattern to follow. Use a serialised format as it's more extensible and reliable. In this case I'd suggest using JSON:

[HttpPost]
public ActionResult ValidateInput(string myInput)
{
  string temp = "";
  for (int i = myInput.Length - 1; i >= 0; i--)
  {
    temp += myInput[i].ToString();
  }
 
  if (temp == myInput)
    return Json(new { message = "The string is palindrome" });
  else
    return Json(new { message = "The string is not palindrome" });
  }
}

success: function(response) {
  $("#lblpalindrome").text(response.message);
},

This could be taken a step further still by using a common class for the response. In addition, there are better ways to reverse a string than using a loop.

edited Jun 05 '22 at 14:13

answered Jun 05 '22 at 14:07

Rory McCrossan

331,213
40
305
339

Thanks for the answer but it still doesn't give me an answer back tho. – kd2512 Jun 05 '22 at 14:21
Sorry bad english. I tried your suggestions but when I run it, it doesn't return properly the text that I want. – kd2512 Jun 05 '22 at 14:27
Try checking the devtools console for errors after making the AJAX request – Rory McCrossan Jun 05 '22 at 14:34
The console is clear – kd2512 Jun 05 '22 at 15:11

score 0 · Accepted Answer · answered Jun 16 '22 at 13:13

You also can do this way without server side call :

function ValidateInput()
{
   $("#lblpalindrome").text("Is it palidrome?");
  var input = $('#myInput').val();
  if(input!==null && input!==undefined && input!=='')
    {
      var reverseinput = input.split("").reverse().join("");
      
      if(input==reverseinput)
        {        
            $("#lblpalindrome").text("The string is palindrome");
        }
      else
        {
            $("#lblpalindrome").text("The string is not palindrome");
        }
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <p>Please enter an alphanumeric string:</p>
    <div class="lbl">
      <label id="lblpalindrome">Is it palidrome?</label>
    </div>
    <div class="content">
        <input type='text' id=myInput>
        <input id="btn1" type="button" value="Enter" onclick="ValidateInput()" />
   </div>
</body>

How to return a text from Controller to View using ajax?

2 Answers2