Home > Enterprise >  How to Fill a text area on click of a link in asp.net core mvc using c#
How to Fill a text area on click of a link in asp.net core mvc using c#

Time:08-13

I want to fill some log output on the click of a link (which does some processing on the server side) in a text area.

Here is a Sample code :-

Controller :-

public class HomeController : Controller
{
    private readonly ILogger<HomeController> _logger;

    public HomeController(ILogger<HomeController> logger)
    {
        _logger = logger;
    }

    public IActionResult Index()
    {
        var logOutput = "this is my output which goes into textarea."

        //some code maybe to populate the textarea

        return View();
    }
}

index.cshtml

@model AspNetCoreMVC.Views.Shared.IndexModel

@{ 
    ViewData["Title"] = "Home";
}

@Html.ActionLink("FillTextArea","Index","Home")
<br /><br />
<textarea  id="txtLog" style="width:1080px;height:200px"></textarea>

HTML View :-

View

Could you please advise how can I make this happen. I am still new learner on asp.net core MVC.

Thanks

Shobhit

CodePudding user response:

You can do it in two ways.

  1. Using ViewBag

Inside Controller Action Method

ViewBag.LogOutput = "this is my output which goes into textarea.";

Inside View

<textarea  id="txtLog" style="width:1080px;height:200px">@ViewBag.LogOutput</textarea>
  1. Using jQuery Create Ajax Call on Button Click

Create Button inside View

<button id="FillTextArea">Fill Text Area</button>

Bottom of the view, make an ajax call

<script type="text/javascript">
    $("#FillTextArea").on("click",function(){
        type: "GET",
        URL: "Home/GetLogOutput",
        contentType: "application/json; charset=utf-8",
        data: {},
        datatype: "json",
        success: function (data) {
            $('#txtLog').innerHtml(data.message);
        },
        error: function () {
            alert("error");
        }
    });
</script>

Create GetLogOutput action method inside controller

Public JsonResult GetLogOutput()
{
    string logoutput = "your log output";
    return Json(new { message = logoutput }, JsonRequestBehavior.AllowGet);
}
  • Related