Question 69592 in Ajax Question posted in
You can find the official documentation here.

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

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>
Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search