I am currently working on a project in MVC and needed to pass data from the view to controller so I have done that using ajax, However upon button click (triggers value to be sent to controller) The page does not redirect to the next page(From reservation_step_1 to reservation_step_2), instead it does nothing, yet the value passes to the respective controller action(received by reservation_step_1 and sent to reservation_step_2).
My controller actions:
[HttpPost]
[ValidateInput(false)]
public ActionResult reservation_step_1(string x)
{
string val = x;
return RedirectToAction("reservation_step_2", "Home", new { val = val });
}
[HttpGet]
public ActionResult reservation_step_2(string val)
{
string rat = val;
ViewBag.totda = rat;
return View();
}
My View:
<body>
<img src="~/images/maxresdefault.jpg" style="width:1457px; height:325px; margin-left: -160px;" />
<br />
<br />
<br />
<table class="table">
@foreach (var item in Model)
{
{
<div class="tabcolumn-container" style="height: 90px; border: 1px solid grey">
<div class="tabcolumn30 frame" style="margin-top: 0px; margin-bottom: 0px;">
<div style="height: 35px; background-color: grey;">
<p style="font-size: 22px; font-weight: bold">@item.group_category</p>
</div>
<span class="helper">
<img src="~/images/@item.image_path" />
</span>
</div>
<div class="tabcolumn50">
<div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
<p>   100kms per day  <input type="checkbox" class="slectOne" data-id="R @item.standard_100.00<br />(per day)"/> Standard Cover     <input type="checkbox" class="slectOne" data-id="R @item.super_100.00<br />(per day)" /> Upgrade to Super Cover</p>
</div>
<div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
<p>   200kms per day  <input type="checkbox" class="slectOne" data-id="R @item.standard_200.00<br />(per day)" /> Standard Cover     <input type="checkbox" class="slectOne" data-id="R @item.super_200.00<br />(per day)" /> Upgrade to Super Cover</p>
</div>
<div style="height: 40px; border-bottom: 1px solid grey; border-left: 1px solid grey; border-right: 1px solid grey">
<p>   400kms per day  <input type="checkbox" class="slectOne" data-id="R @item.standard_400.00<br />(per day)" /> Standard Cover     <input type="checkbox" class="slectOne" data-id="R @item.super_400.00<br />(per day)" /> Upgrade to Super Cover</p>
</div>
<div style="height: 55px; display: table; border-left: 1px solid grey; background-color: grey; width: 569px; border-right: 1px solid grey">
</div>
<input type="hidden" value="" id="rate" name="crate">
</div>
<div class="tabcolumn20" style="height: 160px">
<p style="font-size: 14px; text-align: center">Pick-up location: In Branch</p>
<p style="font-size: 14px; text-align: center">Fuel Policy: Full to Full</p>
<p id="currentRate" style="padding-left: 10px; padding-right: 10px; font-size: 18px; font-weight: bold; margin-top: 10px; text-align: center" class="result">Please choose cover to continue</p>
<input type="submit" onclick="getRate(); " value="Book Now!" style="height: 56px; background-color: yellow; width: 227.66px; border-style: none" />
</div>
</div>
<br />
}
}
</table>
<script>
function getRate()
{
var cr = document.getElementById("currentRate").innerHTML;
var a = cr.substring(0, cr.length - 16);
var b = a.substring(2);
$.post("/Home/reservation_step_1 ", { x: b });
}
</script>
<script>
$(document).ready(function () {
$('.slectOne').on('change', function () {
$('.slectOne').not(this).prop('checked', false);
let result = $('.result', $(this).closest('.tabcolumn-container'));
result.html($(this).is(":checked") ? $(this).data("id") : '');
});
});
</script>
</body>
It does work with the help of HTML Helpers (using (Html.BeginForm("reservation_step_1", "Home", FormMethod.Post))) but then passing data using ajax and html helpers simultaneously loops through the action twice and causes the ajax values to turn to null.
Any help on how i can keep the ajax values to pass to the respective controller and redirect to the respective view?
