3

Tenho que pegar um valor de uma variável dentro de um método no controller no .net, o método esta no homeController e retorna um json, ate ai tudo bem o código esta rodando e retornando o json perfeitamente mas tenho que pegar um valor de uma variável já e mostrar no html, eu sei como faz para enviar um input do html para o método porem não ao contrario, como faço pelo ajax para pegar o valor definido no método por exemplo uma string.

1 Resposta 1

3

Antes de mais nada, aconselho que o único script inline no arquivo .cshtml seja a declaração de variáveis vindas da Controller, como o caminho o caminho virtual, Nome do Usuario, etc.

<script type="text/javascript">
    var baseURL = "@Url.Content("~/")";
</script>

Agora tendo como base o seguinte Model e Controller.:

Model

namespace AjaxSample
{
    public class TextoModel
    {
        public string Frase { get; set; }
    }
}

Controller

using System;
using System.Web.Mvc;
using System.Web.Http;
using System.Linq;

namespace AjaxSample
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            return View(new TextoModel() { Frase = "Hello Wolrd" });
        }


        [HttpPost]
        public JsonResult Inverter([FromBody] TextoModel model)
        {               
            model.Frase = String.Join("", model.Frase.Reverse());
            return Json(model);
        }
    }
}

View

<body>
    <div class="container">
        @using (Html.BeginForm())
        {
        <div class="form-group">
            @Html.LabelFor(m => m.Frase)
            @Html.TextBoxFor(model => model.Frase, new {@class="form-control"}) 
            @Html.ValidationMessageFor(model => model.Frase)
        </div>

        <button type="button" class="btn btn-success submit" id="inverter">Inverter</button>
        }
    </div>
</body>

você pode adicionar o seu script (um arquivo *.js separado.) à sua pagina.

Script

var inverter = document.getElementById("inverter");
var frase = document.getElementById("Frase");
inverter.addEventListener("click", function (event) {
  var data = { Frase: frase.value };
  var httpRequest = new XMLHttpRequest();
  httpRequest.open("POST", baseURL + "Home/Inverter", true);
  httpRequest.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
  httpRequest.responseType = "json";
  httpRequest.addEventListener("click", function() {
    if (httpRequest.readyStatus == 4) {
      if (httpRequest.status == 200) {
        var data = httpRequest.response; // objeto retornado pela Action Inverter.
        frase.value = data.Frase; // atribuindo o novo valor ao input.
      } else {
        console.log("Ocorreu um erro na requisição");
      }
    }
  });
  httpRequest.send(JSON.stringify(data));               
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .