Sort TexArea value using jQuery in ASP.Net MVC

Last Reply 22 days ago By dharmendr

Posted 23 days ago

hi;

I am using textare in asp.net mvc I added the value like below

var deger = $("#Qrcode").val() + ' You are adding this code !' + "\r\n";
$("#AddedQrcode").append(deger);

I want to order by or sort descending last to first

When users write a textboxt I am catching via in change event and write to it textare.

<div>
    @Html.TextBoxFor(t => t.Qrcode, new { @autocomplete = "off", @class = "form-control", placeholder = "Ürün QR Kodu" })
    @Html.TextAreaFor(t => t.AddedQrcode, new { style = "font-size: 12px; font-weight: bold;overflow: scroll", rows = "5", @autocomplete = "off", @class = "form-control", placeholder = "Eklenen Ürün Listesi" })
    @Html.TextArea("AddedQrcodem", new { style = "font-size: 12px; font-weight: bold;overflow: scroll", rows = "5", @autocomplete = "off", @class = "form-control", placeholder = "Eklenen Ürün Listesi" })
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            var lists = [];
            $('#Qrcode').on('change', function () {
                debugger;
                lists.push($(this).val());
                lists.sort();
                $("#AddedQrcode").val('');
                $.each(lists, function (index, item) {
                    $("#AddedQrcode").append(item + "\r\n");
                });

                lists.reverse();
                $("#AddedQrcodem").val('');
                $.each(lists, function (index, item) {
                    $("#AddedQrcodem").append(item + "\r\n");
                });

            });
        });
    });
</script>

 

You are viewing reply posted by: dharmendr 22 days ago.
Posted 22 days ago Modified on 21 days ago

Hi alya14,

First create a JavaScript Array and add the value in the array. Then using the sort method to sort the record in acsending order and reverse method to sort the record in descending order and append to your TextArea.

Check this example. Now please take its reference and correct your code.

Model

public class QRCodeModel
{
    public string Qrcode { get; set; }
    public string AddedQrcode { get; set; }
}

Controller

public class HomeController : Controller
{
    // GET: /Home/
    public ActionResult Index()
    {
        return View(new QRCodeModel());
    }
}

View

<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var lists = [];
            $('#Qrcode').on('change', function () {
                lists.push($(this).val());
                lists.sort();
                $("#AddedQrcode").val('');
                $.each(lists, function (index, item) {
                    if ($("#AddedQrcode").val() != '') {
                        $("#AddedQrcode").val($("#AddedQrcode").val() + "\r\n" + item);
                    } else {
                        $("#AddedQrcode").val(item);
                    }
                });

                lists.reverse();
                $("#AddedQrcodem").val('');
                $.each(lists, function (index, item) {
                    if ($("#AddedQrcodem").val() != '') {
                        $("#AddedQrcodem").val($("#AddedQrcodem").val() + "\r\n" + item);
                    } else {
                        $("#AddedQrcodem").val(item);
                    }
                });

            });
        });
    </script>
    <div>
        <%:Html.TextBoxFor(t => t.Qrcode, new { @autocomplete = "off", @class = "form-control", placeholder = "Ürün QR Kodu" })%><br />
        <%:Html.TextAreaFor(t => t.AddedQrcode, new { style = "font-size: 12px; font-weight: bold;overflow: scroll", rows = "5", @autocomplete = "off", @class = "form-control", placeholder = "Eklenen Ürün Listesi" })%>
        <%:Html.TextArea("AddedQrcodem", new { style = "font-size: 12px; font-weight: bold;overflow: scroll", rows = "5", @autocomplete = "off", @class = "form-control", placeholder = "Eklenen Ürün Listesi" })%>
    </div>
</body>

Screenshot