Hello guys,
I have an ASP.Net MVC application. There is this Stock.cshtml page that opens on a popup! I couldn't figure out how this happens, any help would be appreciated.
Popup screenshot
When I hit the purchase button on the StockSales.cshtml, the StockAsyncTask action triggered in the controller.
Controller:
And finally, I am expecting to open Stock.cshtml but somehow it opens on the popup!
I have an ASP.Net MVC application. There is this Stock.cshtml page that opens on a popup! I couldn't figure out how this happens, any help would be appreciated.
Popup screenshot
When I hit the purchase button on the StockSales.cshtml, the StockAsyncTask action triggered in the controller.
StockSales.cshtml:
@{
ViewData["Title"] = "Stock Sales";
}
<h2 class="text-center font-weight-bolder mb-2" style="margin-bottom: 3.5rem !important">Stock Sales</h2>
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Stock Sales</title>
<script src="~/lib/jquery/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="~/lib/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<link href="~/lib/bootstrap/css/bootstrap.css" rel="stylesheet" />
</head>
<style>
div.hidden {
display: none
}
</style>
<form class="needs-validation" novalidate>
<div id="spinner-map-right-click" class="d-flex justify-content-center hidden">
<div class="spinner-border hidden" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<div class="row">
<div class="col-md-4">
</div>
<div class="form-group col-md-5 input-group">
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option value="111111110000">Sales Test</option>
<option value="000000001706">9000 ZA</option>
<option value="0187021">5 TL Razer Gold Pin</option>
</select>
<div class="invalid-feedback">
Please select a game.
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="form-group col-md-5 input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Quantity</span>
</div>
<input type="number" class="form-control " id="quantity" name="Quantity" value="1" aria-describedby="basic-addon1" min="1" max="500" />
</div>
</div>
<div class="row">
<div class="col-md-4">
</div>
<div class="form-group col-md-5">
<button id="btn_add" type="submit" class="btn btn-info">Purchase</button>
<input id="btn_clear" type="button" value="Clear" class="btn btn-warning" />
</div>
</div>
</div>
</div>
</div>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
$("#btn_add").html(
'<span class="spinner-border spinner-border-sm" role="status" id="spinner" aria-hidden="true"></span> Loading...'
);
var selText = $("#validationCustom04").val();
var gameName = $("#validationCustom04 option:selected").text();
var quantity = $("#quantity").val();
var serviceUrl = '/StockSales/StockAsyncTask?quantity=' + quantity + '&game=' + selText;
$.ajax({
type: "GET",
url: serviceUrl,
dataType: 'json',
success: function (data) {
//alert(JSON.stringify(data));
ShowResult(data);
$("#spinner").remove();
$("#btn_add").html('Add');
}, error: function (xhr, status, error) {
$("#spinner").remove();
$("#btn_add").html('Add');
var errorMessage = xhr.responseText;
alert('Error - ' + errorMessage);
}
});
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
$("#btn_clear").click(function () {
$("#quantity").val(1);
$("#validationCustom04").val("");
});
</script>
Controller:
Controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using GameMonitor.Models;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using NLog;
namespace GameMonitor.Controllers
{
public class StockSalesController : Controller
{
private static readonly Logger logger = LogManager.GetLogger("excel");
private static readonly Logger logger2 = LogManager.GetLogger("exceptionFile");
private readonly GameContext _context;
public StockSalesController(GameContext context)
{
_context = context;
}
public IActionResult StockSales()
{
return View();
}
public IActionResult Stock()
{
var coupons = JsonConvert.DeserializeObject<List<Coupon>>(TempData["coupons"].ToString());
return View(coupons);
}
public async Task<ActionResult<IList<Coupon>>> StockAsyncTask(int quantity, string game)
{
try
{
var coupons = new List<Coupon>();
var games = new StockSales { Product = game, Quantity = quantity };
var content = await games.CallGameAsync("Test", "12345", game, quantity);
var json = JObject.Parse(content);
coupons = JsonConvert.DeserializeObject<List<Coupon>>(json["coupons"]?.ToString() ?? string.Empty);
//NLOG
NLogPin(logger, User.Identity.Name, DateTime.Now);
TempData["coupons"] = JsonConvert.SerializeObject(coupons);
return RedirectToAction("Stock");
//return View("Stock", coupons);
}
catch (Exception e)
{
//NLOG
NLog(logger2, "Stock Sales " + e.Message, DateTime.UtcNow, 0);
return StatusCode(500, e.Message);
}
}
}
}
And finally, I am expecting to open Stock.cshtml but somehow it opens on the popup!
Stock.cshtml:
@model IEnumerable<Coupon>
@{
ViewData["Title"] = "Stock";
}
<script src="~/lib/jquery/dist/jquery.js"></script>
<h2 class="font-weight-bolder">Stock</h2>
<table class="table hover" id="test">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Pin)
</th>
<th>
@Html.DisplayNameFor(model => model.Serial)
</th>
<th>
@Html.DisplayNameFor(model => model.expiryDate)
</th>
<th></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.Pin)
</td>
<td>
@Html.DisplayFor(modelItem => item.Serial)
</td>
<td>
@Html.DisplayFor(modelItem => item.expiryDate)
</td>
</tr>
}
</tbody>
</table>
@section scripts {
<script src="~/lib/jquery/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-html5-1.5.6/b-print-1.5.6/r-2.2.2/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
<script>
$(document).ready(function () {
$('#test').DataTable({
"processing": true,
dom: 'Bfrtip',
columnDefs: [
{
targets: 4,
className: 'noVis'
}
],
buttons: [
{
extend: 'excelHtml5',
exportOptions: {
columns: [0, 1, 2, 3]
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [0, 1, 2, 3]
}
},
{
extend: 'colvis',
columns: ':not(.noVis)'
}
]
});
});
</script>
}