How to send and receive data without refreshing the page

Question

I have data in form. and I have with click to input (textbox), Send data to mvc controler and Doing the operation in this data and get new data to another textbox.

but not refresh page. How can I use JSON?

Answer 1

If you want to send and get data from the server with form and without refreshing page then you have to use MVC Ajax . BeginForm , In MVC Ajax form provide us ajax option for Before form event, Form success event and form Failed event, I've created a demo for the same you can change event call accordingly your requirement.

1. cshtml code as below:

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

    <div class="">
        @using (Ajax.BeginForm("SendOrGetData", "Home", new AjaxOptions { OnSuccess = "OnSucessForm1" }, new { @id = "Form1" }))
        {
            <input type="text" id="textbox1" name="textbox1" />

            <input type="text" id="textbox2" />

            <input type="submit" id="btnSubmit" value="Submit" />
        }
    </div>

    <script>
        function OnSucessForm1(res) {
            $("#textbox2").val(res);
        }
    </script>

2. Controller code as below:

        public JsonResult SendOrGetData(string textbox1)
        {
            string res = textbox1;
            return Json(res, JsonRequestBehavior.AllowGet);
        }

Note: I've submitted the form using the button click you can use form trigger event when clicking on the textbox.

Answer 2

Ajax call is used for this. For step wise guide follow below link:

https://www.c-sharpcorner.com/blogs/using-ajax-in-asp-net-mvc