ASP.NET MVC two user controls

Question

I have two user controls on the page, and one of the user controls has this text. which is used to add a note, but when they click the "Add note" button, the page reloads. I do not want the page to reload, I was looking for an example that is done without postback.

thank

I'm tired of doing this with JSON, but it throws the following error

The HTTP POST protocol used to access the path '/ Documents / TestNote / Documents / AddNote' is not allowed.

<script type="text/javascript">
    $(document).ready(function() {

        $("#btnAddNote").click(function() {
            alert("knock knock");
            var gnote = getNotes();
            //var notes = $("#txtNote").val();
            if (gnote == null) {
                alert("Note is null");
                return;

            }

            $.post("Documents/AddNote", gnote, function(data) {
                var msg = data.Msg;
                $("#resultMsg").html(msg);
            });
        });
    });

    function getNotes() {
        alert("I am in getNotes function");
        var notes = $("#txtNote").val();
        if (notes == "")
            alert("notes is empty");
        return (notes == "") ? null : { Note: notes };
    }
</script>
</asp:Content>

Answer 1

- , Json, .

Javascript

function AddNote(){
   var d = new Date(); // IE hack to prevent caching

   $.getJSON('/MyController/MyAction', { data: "hello world", Date: d.getTime() }, function(data) {
     alert(data);
     // call back update your view here
   });
}

MyController

public virtual JsonResult MyAction(string data)
{
   // do stuff with your data here, which right now my data equals hello world for this example
   return Json("ReturnSomeObject");
}

Answer 2

AJAX. postback ( Javascript, ), .