Return to View after ajax post to controller

Question

_{Monday, May 7, 2018 9:20 AM}

Hi All,

I'm trying post data from View to controller and then return back to view. This is my script in view 

<script type="text/javascript">
    $(document).ready(function () { 
        $("Submit").click(function (e) {
            e.preventDefault();

            var token = $('input[name=__RequestVerificationToken]').val();
            console.log(token);

            var dataToPost = $(this).serialize();
            $.ajax({
                url: "Process/Payment"
                , method: "POST"
                , data: {
                    __RequestVerificationToken: token
                    , page: dataToPost
                }
                , done: function (data) {
                    window.location.replace (data.newUrl);
                    alert(data);
                }
                , error: function () {
                    alert("Ajax call failed");

                }
            })
        })
    })
</script>

and this is my controller. All data that wrap in 'Payment' model is in good shape. And, I want to return back to view (url: "Process/Payment")

        public ActionResult Payment(Payment payment) {
            return Json(new {
                                newUrl = Url.Action("Payment", "Process") //Payment as Action; Process as Controller
                            }
                        );
            
        }

but when the page return to localhost, I just get this. How should I do to return the page that look like before hit submit button as POST ?

why "window.location.replace ()" can't redirect page to the original page ?

Thx's

All replies (1)

_{Tuesday, May 8, 2018 5:05 AM ✅Answered}

Hi daleman,

According to your codes, I have created a test demo on my side, it works well.

After ajax post successfully, the codes will redirect to the new url.

My demo code as below:

Notice: Since the jquery 1.10 ajax function doesn't contain done attribute, so I modify a part of your codes.

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(document).ready(function () {
        $("#Button1").click(function (e) {
            e.preventDefault();
            var token = $('input[name=__RequestVerificationToken]').val();
            console.log(token);
             $.ajax({
                 url: "http://localhost:55585/Test/Payment",
                 method: "POST", data: { __RequestVerificationToken: token }
                , error: function () {
                    alert("Ajax call failed");
                }
            }).done(function (data) {
                    alert(data.newUrl);
                    window.location.replace(data.newUrl);
                })
        })
    })
</script>
<input id="Button1" type="submit" value="button" />

TestController

   public class TestController : Controller
    {
        // GET: Test
        public ActionResult Index()
        {
            return View();
        }


        [HttpPost]
        public ActionResult Payment()
        {
            return Json(new
            {
                newUrl = Url.Action("Index", "Test") //Payment as Action; Process as Controller
            }
            );

        }

Result:

Best Regards,

Brando