ASP.NET MVC two user control

Question

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

Thanks

i tired doing this using JSON , but it throws the following error

The HTTP verb POST used to access 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

What you want is AJAX update. There will always be a postback (unless you are satisfied with simple Javascript page update that does not save on the server), but it won't be the flashing screen effect any more.

Answer 2

Something like this would give you the ability to send data to an action do some logic and return a Json result then you can update your View accordingly.

Javascript Function

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 Action

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");
}