如何使用ajax将文本从Controller返回到View？答案

【问题标题】：How to return a text from Controller to View using ajax?如何使用ajax将文本从Controller返回到View？
【发布时间】：2022-06-16 21:13:46
【问题描述】：

我正在尝试将内容从控制器返回到视图，但由于某种原因，它不起作用。我希望“return Contect (....)”中的文本替换标签。这是我的控制器代码：

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

这是视图：

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

【问题讨论】：

我建议您使用 Chrome 开发人员工具 (stackoverflow.blog/2022/02/28/…) 或同等工具，以便了解服务器返回给浏览器的确切内容。

标签： jquery ajax asp.net-mvc

【解决方案1】：

由于您只是返回一个纯字符串响应，因此 success 处理函数的 response 参数中没有 data 属性。 response本身就是文本值：

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

话虽如此，返回纯文本响应并不是一个好的模式。使用序列化格式，因为它更具可扩展性和可靠性。在这种情况下，我建议使用 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);
},

这可以通过使用公共类来更进一步。另外，还有better ways to reverse a string比使用循环。

【讨论】：

感谢您的回答，但它仍然没有给我答复。
抱歉英语不好。我尝试了你的建议，但是当我运行它时，它没有正确返回我想要的文本。
在发出 AJAX 请求后尝试检查 devtools 控制台是否有错误
控制台清晰

【解决方案2】：

你也可以在没有服务器端调用的情况下这样做：

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>

【讨论】：