Call view with ajax javascript in ASP.NET MVC

Question

I want to call Action to open up my Index View by Ajax Javascript, but it does not load target view. Before I use ajax I called action like this that work properly:

<a class="btn btn-orange" href="@Url.Action("Index", "Booking", new { area = "Portal" })">انتخاب</a>

But I need to call with javascript Ajax and when I transfer that to this :

<a class="btn btn-orange" onclick="Booking(@Json.Encode(item))">انتخاب</a>

I faced this problem that it does not load page. This is my ajax code:

function Booking(obj) {
    var schedulingViewModel = {
    };
    for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
            schedulingViewModel[key] = obj[key];
        }
    }
    $.ajax({
        url: '/Portal/Booking',
        type: 'post',
        data: schedulingViewModel,
        success: function (data) {
            alert('Data: ' + data);
        },
        error: function (request, error) {
            alert("Request: " + JSON.stringify(request));
        }
    });
}

And this s my BookingController:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Tranship.ViewModel;

namespace Tranship.UI.Areas.Portal.Controllers
{
    public class BookingController: Controller
    {
        [HttpPost]
        public ActionResult Index(ScheduleViewModel schedulingViewModel)
        {
            return View("Index", schedulingViewModel);
        }
    }
}

This is my view with IEnumerable model that I want to send an Item of that to action:

@model IEnumerable<Tranship.ViewModel.ScheduleViewModel>
<div class="pg-search-form">
    @foreach (var item in Model)
    {
        <div class="list-block main-block f-list-block dashboard-listing booking-listing">
            <div class="list-content">
                <table class="table table-hover">
                    <tbody>
                        <tr>
                            <td class="dash-list-icon booking-list-date">
                                <div class="b-date">
                                    <h3>@item.DepartureDay</h3>
                                    <p>@item.DepartureMonth</p>
                                </div>
                            </td>
                            <td class="dash-list-text booking-list-detail">
                                <h3>@item.Origin به @item.Destination</h3>
                                <ul class="list-unstyled booking-info">
                                    <li>@item.DepartureDate<span>تاریخ رفت :</span></li>
                                    <li>@item.ArrivalDate<span>تاریخ برگشت :</span></li>
                                    <li>@item.Adult نفر<span>تعداد :</span></li>

                                </ul>

                            </td>
                            <td class="dash-list-btn">
                                <a class="btn btn-orange" onclick="BookingMethod(@Json.Encode(item))">انتخاب</a>
                                @*<button type="submit" class="btn btn-orange">انتخاب</button>*@
                                @*<a class="btn btn-orange" href="@Url.Action("Index", "Booking", new { area = "Portal" })">انتخاب</a>*@
                                <div id="price">@item.Price تومان</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- end list-content -->
        </div>
    }
    <div class="pages">
        <ol class="pagination">
            <li><a href="#" aria-label="Previous"><span aria-hidden="true"><i class="fa fa-angle-left"></i></span></a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#" aria-label="Next"><span aria-hidden="true"><i class="fa fa-angle-right"></i></span></a></li>
        </ol>
    </div>
    <!-- end pages -->
</div>

In fact ajax return correct HTML but I couldn't find why it does not redirect to target view.

The whole point of ajax is to stay on the same page. Ajax calls cannot redirect. If you want to redirect, then DO NOT use ajax. — user3559349
– user3559349, Commented Nov 17, 2018 at 12:36
what should I do? I need to send my model in the loop. I could not use @HTML.Beginform and submit that — Sasan
– Sasan, Commented Nov 17, 2018 at 12:38
Why not? What makes you think you need to send my model in the loop? (you don't if you have generated your view correctly) — user3559349
– user3559349, Commented Nov 17, 2018 at 12:40
@ Stephen Muecke- please take a look at my view it is a collection and I want to the item that user click on it — Sasan
– Sasan, Commented Nov 17, 2018 at 12:43

Prashant Pimpale · Accepted Answer · 2018-11-21 06:54:26Z

1

window.location() is used to redirect from one page to another page.

After Successful ajax request write that code.

 $.ajax({
    url: '/Portal/Booking',
    type: 'post',
    data: schedulingViewModel,
    success: function (data) {
        alert('Data: ' + data);
        window.location = "/Booking/Index";
    },
    error: function (request, error) {
        alert("Request: " + JSON.stringify(request));
    }
});

edited Nov 21, 2018 at 6:54

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered Nov 21, 2018 at 6:47

Maviya Qureshi

364 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sasan Over a year ago

Thanks, you helped me a lot.

Sasan Over a year ago

@Prashant Pimpale - It worked but how can I sent my Model as json with window.location??

Maviya Qureshi Over a year ago

@SasanK You are more than welcome, I'm glad I could help.

Collectives™ on Stack Overflow

Call view with ajax javascript in ASP.NET MVC

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related