Trying to call controller with ajax post with parital success

Question

User1451609391 posted

Hello. I am trying to load pages with Ajax like the following code.

           $.ajax({
                    type: "POST",
                    url: "@Url.Action("Index","Home")",
                    contentType: "application/json; charset=utf-8",
                    success: function (response) {
                        alert("Hello:");
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
               
            });

The alert box hello pops up but I do not navigate there. I also have tryed, Home/Index that does the same thing. I need to navigate to different controllers and load their views.

Hope someone can help thanks.

Answer 1

User475983607 posted

johnboyman12

The alert box hello pops up but I do not navigate there. I also have tryed, Home/Index that does the same thing. I need to navigate to different controllers and load their views.

You misunderstand.  The HTML response is returned to the AJAX success function.  Typically, code written in the success handler to update the DOM (current page). 

The behavior you are describing is best handled using a standard form post; without AJAX.

Answer 2

User1451609391 posted

Thanks i found this code and it is working

var eleId = "";
var url = '@Url.Action("Index", "Home")';
url = url + '?id=' + eleId;
window.location.href = url;

The problem with it is that when i run it, first the screens scroll goes to the top of the current page, then the page reloads to the new location. How do I stop that inital scroll position move. I know i can use session variables to store the scroll location. I would like to avoid the scroll change at first because it doesn't look very good. Any advice thanks.?

Answer 3

User475983607 posted

It is much easier to provide assistance if you explain the actual problem you are trying to solve.  What is the reason for the AJAX POST?  Update a record? 

Answer 4

User1451609391 posted

I changed post to get. I thought i explained my problem anyways you answered my initial question thanks.

Answer 5

User1686398519 posted

Hi,  johnboyman12

I did not reproduce your problem, you can refer to my example, or give more code.Before the page jumps, the screen will not scroll to the top of the current page in my example.

Note: My example uses the post method as you did before.

Controller

        public ActionResult Index()
        {
            return View();
        }
        [HttpPost]
        public ActionResult Test()
        {
            return Json("success",JsonRequestBehavior.AllowGet);
        }
        public ActionResult Test2(int id)
        {
            return View();
        }

Page

<table>
    @for (int i = 0; i < 16600; i++)
    {
        <tr><td>@i</td></tr>
    }
</table>
<button id="ajaxtest">ajax</button>
@section scripts{
    <script>
        $("#ajaxtest").click(function () {
            $.ajax({
                    type: "POST",
                    url: "@Url.Action("Test","Home")",
                    contentType: "application/json; charset=utf-8",
                    success: function (response) {
                        alert($(window).scrollTop());
                        window.location.href = "@Url.Action("Test2")"+"?id=1";
                    },
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
            });
        });
    </script>
}

Here is the result.

 
Best Regards,

YihuiSun