When I attempt to use Ajax Javascript to call Action and open my Index View, the target view does not load. Before using ajax, I called the action like this and it worked properly:
<a class="btn btn-orange" href="@Url.Action("Index", "Booking", new { area = "Portal" })">انتخاب</a>
However, when I tried to call it with javascript Ajax by transferring it to this:
<a class="btn btn-orange" onclick="Booking(@Json.Encode(item))">انتخاب</a>
I encountered a problem where the page does not load. Here 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 is 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>
<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>
The ajax response provides correct HTML, but I have yet to determine why it's not redirecting to the target view.