Load updated page using method get jquery mvc Asp.net

Asked

Viewed 756 times

3

I have a demo page where I organize a to-do list.. wanted that when it relapses it already comes updated with the tasks already posted previously

<html>
<head>

    <title>Demo</title>

    <script src="~/Scripts/JavaScript.js" type="text/javascript"></script>
    <script type="text/javascript">
    window.onload = function () {
        LoadTarefa();
    }
    </script>


</head>

<body>

        <form action="~/Controllers/">
            <label for="ctarefa">Tarefas:</label> <input href="#" class="active" onkeypress="return recarrega(event);" type="text" id='my_span'><br />
            <div class="boxLista">
                <ul id="Foo">
                </ul>
            </div>
            <input type="reset" value="Delete" onclick="del()"> 
</form>

</body>

</html>

In my js code I already have a post method working but I’m not able to reconcile with get to keep the page updated.

function OnEnter(evt) {

    var key_code = evt.keyCode ? evt.keyCode :
    evt.charCode ? evt.charCode :
    evt.which ? evt.which : void 0;

    if (key_code == 13) {
        return true;
    }
}

var j = 1;

function recarrega(e) {

    if (OnEnter(e)) {

        var p = document.getElementById('Foo');
        var filhos = p.childNodes;

        for (i = filhos.length - 1; i >= 0; i--) {

            if (filhos[i].tagName == 'LI') {
                p.appendChild(filhos[i]);
            }
        }

        var tarefa = document.getElementById("my_span").value;

        document.getElementById("my_span").value = "";

        var li = document.createElement('li');
        var label = " <label for='ckb" + j + "' id='lbl" + j + "' >" + tarefa + "</label>"

        p.appendChild(li);
        li.setAttribute("ondblclick", "HabilitaInput(" + j + ")")
        li.id = 'my_span' + j;
        li.innerHTML = "<input type='checkbox' id='ckb" + j + "' value='" + j + "' onclick='my_fun(" + j + ");'>" + "<input type='text' id='input" + j + "' value='" + tarefa + "' style='display: none' onkeypress='return atualizaTarefa(this," + j + ",event);'>" + label;

        j++;

        $.post("Start/GotTarefa", { tarefa: tarefa }, function (data) { alert('Application saved. ' + data); }, "String");

        return false;
        }
        else
        {
        return true;
        }
}

    function my_fun(j) {

        var chkbox = "ckb" + j;
        var my_span = "lbl" + j;
        var msg = chkbox + " " + my_span;
        var li = "my_span" + j;

        if ($("#ckb" + j).is(':checked')) {
            document.getElementById(my_span).style.textDecoration = 'line-through';
            document.getElementById(li).className = 'del';
        }

        else {
            document.getElementById(my_span).style.textDecoration = 'none';
        }
    }

    function HabilitaInput(index) {

        var idInput = "input" + index;

        document.getElementById(idInput).style.display = 'block';
        document.getElementById(idInput).focus();

    }

    function atualizaTarefa(element, index, e) {

        if (OnEnter(e)) {
            var newtarefa = element.value;
            var idInput = "input" + index;
            var idLbl = "lbl" + index;

            document.getElementById(idLbl).innerHTML = newtarefa;
            document.getElementById(idInput).style.display = 'none';

            $.post("Start/GotTarefa", { tarefa: newtarefa }, function (data) { alert('Application saved. ' + data); }, "String");
        }
    }

    function del() {

        var ul = document.getElementById("Foo");
        var lis = ul.getElementsByClassName("del");

        while ((lis).length > 0) {
            lis[0].parentNode.removeChild(lis[0]);
        }
    }

    function LoadTarefa() { 
        var id = j;
        $.getJSON("Start/GetTarefa", null , function (data) {
            var div = $('#boxLista')
            $.each(data, function (j) {
                printTarefa(j, div);
            });

            function printTarefa(j, div) {
                var li = document.createElement('li');
                var label = " <label for='ckb" + j + "' id='lbl" + j + "' >" + data + "</label>";
                div.append("<input type='checkbox' id='ckb" + j + "' value='" + j + "' onclick='my_fun(" + j + ");'>" + "<input type='text' id='input" + j + "' value='" + data + "' style='display: none' onkeypress='return atualizaTarefa(this," + j + ",event);'>" + label);
                li.setAttribute("ondblclick", "HabilitaInput(" + j + ")");
                li.id = 'my_span' + j;
            }
        }

Controller: 

    [HttpPost] 
    public ActionResult GotTarefa(MyTarefa data)
    {
       if ( data != null )
       {    
           return Json(string.Format("Tarefa: {0}", data.Tarefa.Count()), JsonRequestBehavior.AllowGet);      
       }

       return View();             
    }

    [HttpGet]    
    public JsonResult GetTarefa(MyTarefa data)
    {

        var tarefa = new List<MyTarefa>{
            new MyTarefa {Id = data.Id, Tarefa = data.Tarefa}
        };

        return Json(tarefa,JsonRequestBehavior.AllowGet);
    }
}

Model: 

public class MyTarefa
{
    public int Id { get; set; }
    public string Tarefa { get; set; }
}
javascript c# jquery asp.net-mvc

1 answer

0

There is a a package called Jqwidgets which has a non-commercial license of use, and whose grid has automatic update.

Or you can make your manual mechanism, which is not very productive.

  • because not serious productive?

  • Because it’s a lot of work. It’s reinventing the wheel. Unless you’re really willing to make your own mechanism. I see it as a rework that can be avoided.

Browser other questions tagged javascript c# jquery asp.net-mvc

You are not signed in. Login or sign up in order to post.