Reloading of layout causes Model to go empty (MVC4) - asp.net-mvc-4

I'm trying to show a table of results in my view by use of HttpPost, but my view always turns up empty.
I have found out by now that the httpPost action works and returns a result, but before completing the action, the layout is called again, where the RenderBody is called again. Once the RenderBody is done, the view contains an empty model again and results in the page showing up empty.
Looking for advice how to solve this issue! I broke my head on this for hours and don't seem to see the light...
The View code:
#using MovieRental.DAL.Entities; #model List
<Movie>
#{ ViewBag.Title = "MyRentedMovies"; }
<h2>MyRentedMovies</h2>
<div class="container">
<div class="col-md-12 column">
<form id="frmmymovies" class="col-md-12">
<input id="currentuserid" type="hidden" name="userid" value="#ViewBag.user.UserId">
</form>
<div id="mymovies" class="btn btn-primary">Show my rented movies</div>
</div>
</div>
<div>
#ViewBag.cost;
</div>
#if (Model != null) {
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table id="" class="table table-striped table-bordered">
<thead>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Release Date</th>
<th>Storyline</th>
<th>Location</th>
<th>Movie Genre</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Action</th>
<th>Movie Title</th>
<th>Release Date</th>
<th>Storyline</th>
<th>Location</th>
<th>Movie Genre</th>
</tr>
</tfoot>
<tbody>
#foreach (var item in Model) {
<tr>
<td><i class="glyphicon glyphicon-plus" movieId="#item.MovieId"></i>
</td>
<td>#item.MovieName</td>
<td>#item.ReleaseDate</td>
<td>#item.Storyline</td>
<td>#item.Location.LocationName.ToString()</td>
<td>#item.MovieGenre.GenreName.ToString()</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
} else {
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<div class="alert alert-info" role="alert">
You currenty don't have any rented movies in your possession.
</div>
</div>
</div>
</div>
}
The Controller code:
public ActionResult MyRentedMovies()
{
return View();
}
[HttpPost]
public ActionResult MyRentedMovies(int userid)
{
var myrentdetails = rentrep.GetAll().Where(e => e.UserId == userid);
List<Movie> mymovies = new List<Movie>();
foreach (var item in myrentdetails)
{
Movie movie = movierep.FindById(item.MovieId);
mymovies.Add(movie);
}
return View(mymovies);
}
The JS script:
$(function () {
$('#mymovies').click(function () {
//var user = $('#currentuserid').val();
console.log('gethere');
$.post('/useronly/myrentedmovies', $('#frmmymovies').serialize(), function (data) {
if (data) {
console.log(data);
document.location = '/useronly/myrentedmovies';
}
else {
console.log('error');
}
});
});
});

Related

ASP .NET core Razor page - Avoid refreshing the page

I have tow buttons in one Form, first button for add website info to a local table and second button for add social media info to another table, after all info added locally,
then I can click on 'add all info' button for add all info in same time to database.
My question is how can I add info to a table without refreshing the page?
AddAllInfo.cshtml:
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewWebSiteInfo.websiteName">Website URL</label>
<input type="text" asp-for="NewWebSiteInfo.websiteName" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
<input type="text" asp-for="NewWebSiteInfo.websiteUrl" class="form-control" />
</div>
<button type="submit" validatedisable="True" asp-page-handler="AddWebsiteInfo" class="btn btn-primary" >Add Website info</button>
<div class="mb-3">
#if (AddInfoModel.WebSitelist.Count > 0)
{
<div class="col-12 border p-3">
<table class="table table-striped table-bordered">
<thead style="background-color:lightgray">
<tr>
<th>WebsiteName</th>
<th>websiteURL</th>
</tr>
</thead>
<tbody>
#foreach (Website item in AddAllInfoModel.WebSitelist)
{
<tr>
<td>#item.WebsiteName</td>
<td>#item.websiteURL</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</br>
</br>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
<input type="text" asp-for="NewSocialMediaInfo.SocialMediaName" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
<input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount" class="form-control" />
</div>
<button type="submit" validatedisable="True" asp-page-handler="AddSocialMediaInfo" class="btn btn-primary" >Add socil Media info</button>
<div class="mb-3">
#if (AddInfoModel.SocialMedialist.Count > 0)
{
<div class="col-12 border p-3">
<table class="table table-striped table-bordered">
<thead style="background-color:lightgray">
<tr>
<th>SocialMediaName</th>
<th>SocialMediaAccount</th>
</tr>
</thead>
<tbody>
#foreach (SocialMedia item in AddAllInfoModel.SocialMedialist)
{
<tr>
<td>#item.SocialMediaName</td>
<td>#item.SocialMediaAccount</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</br>
<div class="col-4 offset-2">
<button type="submit" class="btn btn-primary form-control"> Add all info </button>
</div>
</form> ```
AddAllInfo.cshtml.cs:
public void OnPostAddSocialMediaInfo()
{
SocialMedialist.Add(new SocialMedia { SocialMediaName = NewSocialMediaInfo.SocialMediaName,
SocialMediaAccount=NewSocialMediaInfo.SocialMediaAccount});
}
public void OnPostAddWebsiteInfo()
{
WebSitelist.Add(new WebSite { WebSiteName = NewWebSiteInfo.WebsiteName,
websiteUrl =NewWebSiteInfo.websiteUrl});
}
You can use js to pass data to handler,and then use js to add html to tbody,here is a demo to add data to table without refresh the page:
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewWebSiteInfo.websiteName">Website URL</label>
<input type="text" asp-for="NewWebSiteInfo.websiteName" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewWebSiteInfo.websiteUrl">Website URL</label>
<input type="text" asp-for="NewWebSiteInfo.websiteUrl" class="form-control" />
</div>
<input type="button" onclick="AddWebsiteInfo()" class="btn btn-primary" value="Add Website info">
<div class="mb-3">
#if (AddInfoModel.WebSitelist.Count > 0)
{
<div class="col-12 border p-3">
<table class="table table-striped table-bordered">
<thead style="background-color:lightgray">
<tr>
<th>WebsiteName</th>
<th>websiteURL</th>
</tr>
</thead>
<tbody>
#foreach (Website item in AddAllInfoModel.WebSitelist)
{
<tr>
<td>#item.WebsiteName</td>
<td>#item.websiteURL</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</br>
</br>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaName">Social Media</label>
<input type="text" asp-for="NewSocialMediaInfo.SocialMediaName" class="form-control" />
</div>
<div class="col-md-6 mb-3">
<label class="form-label" asp-for="NewSocialMediaInfo.SocialMediaAccount">Account</label>
<input type="text" asp-for="NewSocialMediaInfo.SocialMediaAccount" class="form-control" />
</div>
<input type="button" onclick="AddSocialMediaInfo()" class="btn btn-primary" value="Add socil Media info">
<div class="mb-3">
#if (AddInfoModel.SocialMedialist.Count > 0)
{
<div class="col-12 border p-3">
<table class="table table-striped table-bordered">
<thead style="background-color:lightgray">
<tr>
<th>SocialMediaName</th>
<th>SocialMediaAccount</th>
</tr>
</thead>
<tbody>
#foreach (SocialMedia item in AddAllInfoModel.SocialMedialist)
{
<tr>
<td>#item.SocialMediaName</td>
<td>#item.SocialMediaAccount</td>
</tr>
}
</tbody>
</table>
</div>
}
</div>
</br>
<div class="col-4 offset-2">
<input type="button" onclick="AddAllInfo()" class="btn btn-primary" value="Add all info">
</div>
</form> ```
js:
#section Scripts{
<script>
function AddWebsiteInfo() {
var NewWebSiteInfo = {
'websiteName': $("#NewWebSiteInfo_websiteName").val(),
'websiteUrl': $("#NewWebSiteInfo_websiteUrl").val()
};
$.ajax({
type: 'POST',
url: '?handler=AddWebsiteInfo',
data: NewWebSiteInfo,
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
dataType: 'json',
success: function (data) {
var html = "<tr><td>" + data.websiteName + "</td><td>" + data.websiteUrl + "</td></tr>";
$("tbody")[0].innerHTML = $("tbody")[0].innerHTML + html;
}
});
}
function AddSocialMediaInfo() {
var NewAddSocialMediaInfo = {
'SocialMediaName': $("#NewSocialMediaInfo_SocialMediaName").val(),
'SocialMediaAccount': $("#NewSocialMediaInfo_SocialMediaAccount").val()
};
$.ajax({
type: 'POST',
url: '?handler=AddSocialMediaInfo',
data: NewAddSocialMediaInfo,
headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
dataType: 'json',
success: function (data) {
var html = "<tr><td>" + data.socialMediaName + "</td><td>" + data.socialMediaAccount + "</td></tr>";
$("tbody")[1].innerHTML = $("tbody")[1].innerHTML + html;
}
});
}
function AddAllInfo() {
AddWebsiteInfo();
AddSocialMediaInfo();
}
</script>
}
handler:
[BindProperty]
public WebSiteInfo NewWebSiteInfo { get; set; }
[BindProperty]
public SocialMediaInfo NewSocialMediaInfo { get; set; }
public void OnGet()
{
}
public JsonResult OnPostAddWebsiteInfo()
{
WebSitelist.Add(new WebSite { WebSiteName = NewWebSiteInfo.WebsiteName,
websiteUrl =NewWebSiteInfo.websiteUrl});
return new JsonResult(NewWebSiteInfo);
}
public JsonResult OnPostAddSocialMediaInfo()
{
SocialMedialist.Add(new SocialMedia { SocialMediaName = NewSocialMediaInfo.SocialMediaName,
SocialMediaAccount=NewSocialMediaInfo.SocialMediaAccount});
return new JsonResult(NewSocialMediaInfo);
}
The best way to do this is to run the post request in javascript, this will not refresh the page.
2nd option is by calling the get method again at the end of the post method and then passing the model with the data to the get. So that when the page refreshes the data is filled in again

ASP.Net Core 5 Print Div Vertical Alignment Problem

I have tried various alignment settings, but nothing is making a difference. Please have a look at the far right column in the image below and notice that the price is shifted down compared with the columns to the left.
Note that this is the print preview
This is what the same table looks like on the web page when not printing.
You can see that in the web page, I have set the margin for the last column to mt-0.
Here is my code:
<div class="row">
<div class="col-4">
<button class="btn btn-primary" onclick="printDiv()">Print</button>
</div>
</div>
<div class="row" id="PrintDiv">
<div class="col-md-8 offset-2">
<div class="row d-flex">
<div class="col-8">
<p>
<h2>#ViewBag.FullName</h2>
<h4>Order History</h4>
</p>
</div>
<div class="col me-1">
<img src="#(Configuration.GetValue<string>("StorageContainerURL"))/store-logo.png" )
class="img-fluid " style="max-height:75px;width:auto" alt="Alternate Text" />
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Order ID</th>
<th>Items</th>
<th>Total</th>
</tr>
</thead>
<tbody>
#foreach (var order in Model)
{
<tr>
<td class="align-middle">#order.OrderDate.ToLocalTime().ToShortDateString()</td>
<td class="align-middle">#order.Id</td>
<td class="align-middle">
<ul style="list-style-type:none">
#foreach (var item in order.OrderItems)
{
<li>
<div class="alert alert-info" role="alert">
<span class="badge bg-success">#item.Amount</span> [#item.Price.ToString("c")] - #item.Product.Name
</div>
</li>
}
</ul>
</td>
<td class="mt-0">#order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
</tr>
}
</tbody>
</table>
</div>
</div>
#section Scripts{
<script type="text/javascript">
function printDiv() {
var divContents = document.getElementById("PrintDiv").innerHTML;
var a = window.open('', '', 'height=500, width=500');
a.document.write('<html>');
a.document.write('<body > <br>');
a.document.write(divContents);
a.document.write('</body></html>');
a.document.close();
a.print();
}
</script>
}
Does anyone have any suggestions to make Total column align properly with the other columns?
I figured out the problem shortly after I posted the question. I realized that the Printed Version of the page would not recognize the Bootstrap classes. So instead, I changed all columns to use inline styles for alignment.
<tbody>
#foreach (var order in Model)
{
<tr>
<td style="vertical-align:text-top">#order.OrderDate.ToLocalTime().ToShortDateString()</td>
<td style="vertical-align:text-top">#order.Id</td>
<td style="vertical-align:text-top">
<ul style="list-style-type:none">
#foreach (var item in order.OrderItems)
{
<li>
<div class="alert alert-info" role="alert">
<span class="badge bg-success">#item.Amount</span> [#item.Price.ToString("c")] - #item.Product.Name
</div>
</li>
}
</ul>
</td>
<td style="vertical-align:text-top">#order.OrderItems.Select(m => m.Product.Price * m.Amount).Sum().ToString("c")</td>
</tr>
}
</tbody>

problem in showing a modal popup after clicking a link

I'm implementing an asp.net core 3.1 project in visual studio 2019. I have implemented HoursController and in its view I have a table which has 3 columns and i the last column for each record there is a link called "Details" and if the user clicks on it, he should see a modal that contains the related data. Here is what i have tried to implement it:
<table id="myDummyTable" class="table m-table mytable table-striped table-bordered bg-light">
<thead>
<tr>
<th>
Amount
</th>
<th>
Operations
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.HourModel)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ScoreAmount)
</td>
<td>
<a data-toggle="modal" href="#exampleModal" data-id="#item.ID">Details</a>
</td>
</tr>
}
</tbody>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<form method="post">
<div class="modal-body">
<div id="result">
<table id="classTable" class="table table-bordered">
<thead>
<tr id="headerrow">
<th>
ID
</th>
<th>
cost
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" id="exitbutton" class="btn btn-secondary" data-dismiss="modal">Exit</button>
</div>
</form>
</div>
</div>
</div>
#section scripts{
<script>
#{
if (ViewBag.ModalState == null)
{
ViewBag.ModalState = "hide";
}
}
$('#exampleModal').modal('#ViewBag.ModalState');
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data("id");
console.log("id:"+id);
var modal = $(this);
modal.find('.modal-body input[name="id"]').val(id);
$.get('#Url.Action("Details", "Hours")/' + id, function (data) {
$.each(data, function (index, value) {
var markup = "<tr><td>" + value.ID + "</td><td>" + value.Cost + "</td><td>";
$("#classTable").append(markup);
})
});
//if I remove this '});' from here, after clicking on Details link, a modal //is being displayed and if I keep '});' here, any modal isn't going to be //displayed.
});
</script>
}
Now my problem is if I remove this '});' from the specified line in my code, after clicking on Details link, a modal is being displayed but it doesn't populate its data because it doesn't call Details method in HoursController and if I keep '});' here, any modal isn't going to be displayed and in debugger console I see the error:
Uncaught TypeError: $.get is not a function
I appreciate if anyone can tell me what the problem is and how to fix it
You can remove this '});', because it could result in incorrect matching. Also, please pay attention to capitalization, although the attributes in the model are uppercase. This is the return value of $.get. (I simulated some data in Details)
Modify this code.
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data("id");
console.log("id:"+id);
var modal = $(this);
modal.find('.modal-body input[name="id"]').val(id);
var url = '#Url.Action("Details", "Hours")/' + id
$.get(url, function (data) {
$("#classTable").empty()
$.each(data, function (index, value) {
console.log(value, index)
var markup = "<tr><td>" + value.id + "</td><td>" + value.cost + "</td><td>";
$("#classTable").append(markup);
})
});
});
Result

How to redirect to a page with an object in vue

I have a couple of vue pages, one page is a list of users, the second is a list of permissions and the third is a vue component
that displays the list of users and another vue component that shows the details of a user.
What I'm trying to do is, if I'm on the permissions page and I would like to go to a specific user's details I would like to redirect
with that panel open.
I am able to redirect the the users page by doing window.location.href = '/admin/users'; but I'm not sure how I'm going to get
the user panel open.
I thought that if I could do $emit then that could pass the user object over to the users main page, but that won't work if I do
a window.location.href = '/admin/users';
Here is my code. This has 2 components displays a list of users and their details
<template>
<div class="row">
<div class="col-md-6">
<users :emit="emit" :users="users"></users>
</div>
<div class="col-md-6">
<detail v-if="userDetails" :emit="emit" :user="manageUser"></detail>
</div>
</div>
</template>
<script>
export default {
props: ['emit', 'users'],
data() {
return {
userDetails: false,
manageUser: null
}
},
mounted() {
this.emit.$on('user', payload => {
this.manageUser = payload.user;
this.userDetails = true;
});
}
}
</script>
This is my users lists
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title text-success" style="cursor: pointer;" #click="createUser"> New User</h3>
</div>
<div class="card-body">
<table class="table table-sm table-striped">
<thead>
<tr>
<th>Name</th>
<th style="width:120px;"></th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{user.name}}</td>
<td style="text-align: right;">
<button class="btn btn-sm btn-outline-info" #click="detail(user)">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
props: ['emit', 'users'],
data() {
return {
}
},
methods: {
detail(user) {
this.emit.$emit('user', { user: user });
}
}
}
</script>
and this is my permissions pages
<template>
<div class="card">
<div class="card-header">
<h3 class="card-title">{{permission.name}}</strong></h3>
</div>
<div class="card-body p-0">
<table class="table table-sm table-striped">
<thead>
<tr>
<th>User Name</th>
<th style="width:120px;"></th>
</tr>
</thead>
<tbody>
<tr v-for="user in users">
<td>{{user.name}}</td>
<td style="text-align: right;">
<button class="btn btn-sm btn-outline-info" #click="detail(user)">Details</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
props: ['emit'],
data() {
return {
users: []
}
},
mounted() {
this.allUsers();
},
methods: {
allUsers() {
this.loading = true;
axios.get('/users').then(response => {
this.users = response.data.users;
});
},
detail(user) {
window.location.href = '/admin/users';
}
}
}
</script>

How can i generate downloadable PDF from the items in my Cart

I am using dompdf to generate a downloadable pdf from my multi-vendor eCommerce shopping cart and I am encountering this error even after defining $cartItems in QuotationController. $cartItems is defined in CartController I intend to fetch the items of CartController to the pdf
Here is the error:
Undefined variable: cartItems (View: C:\laragon\www\procure\resources\views\cart\quote.blade.php)
Here is QuoteController code:
<?php
namespace App\Http\Controllers;
use Barryvdh\DomPDF\PDF;
use Darryldecode\Cart\Cart;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class QuotationController extends Controller
{
public function quote(Request $request)
{
$product = DB::table('products')->get();
$cartItems = \Cart::session(auth()->id())->getContent();
$pdf = \PDF::loadView('cart.quote');
return $pdf->download('quotation.pdf');
//return view('cart.quote');
}
}
Heres is CartController:
<?php
namespace App\Http\Controllers;
use App\Product;
use Darryldecode\Cart\Cart;
class CartController extends Controller
{
public function add(Product $product)
{
// add the product to cart
\Cart::session(auth()->id())->add(array(
'id' => $product->id,
// 'img' => $product->cover_img,
'name' => $product->name,
'price' => $product->price,
'quantity' => 1,
'attributes' => array(),
'associatedModel' => $product,
));
return redirect()->route('cart.index');
}
public function index()
{
$cartItems = \Cart::session(auth()->id())->getContent();
view()->share('cartItems', $cartItems);
return view('cart.index', compact('cartItems'));
}
public function destroy($itemId)
{
\Cart::session(auth()->id())->remove($itemId);
return back();
}
public function update($rowId)
{
\Cart::session(auth()->id())->update($rowId, [
'quantity' => [
'relative' => false,
'value' => request('quantity'),
],
]);
return back();
}
public function checkout()
{
return view('cart.checkout');
}
}
And finally the blade file(quote.blade.php):
<section class="shopping-cart">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="cart-table table-responsive">
<table class="table">
<thead>
<tr>
<th class="t-pro">Product</th>
<th class="t-price">Price</th>
<th class="t-qty">Quantity</th>
<th class="t-total">Total</th>
<th class="t-rem"></th>
</tr>
</thead>
<tbody>
#foreach ($cartItems as $item)
<tr>
<td class="t-pro d-flex">
<div class="t-content">
<p class="t-heading">{{ $item->name }}</p>
</div>
</td>
<td class="t-price">KES {{ $item->price }} </td>
<td class="t-qty">
<div class="qty-box">
<div class="quantity buttons_added">
<form action="{{route('cart.update', $item->id)}}" method="get">
<input name="quantity" type="number" value="{{ $item->quantity }}">
<input class="button" type="submit" value="save">
</form>
</div>
</div>
</td>
<td class="t-total">{{Cart::session(auth()->id())->get($item->id)->getPriceSum()}}</td>
<td class="t-rem"><i class="far fa-trash-alt"></i></td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<div class="coupon">
<h6>Discount Coupon</h6>
<p>Enter your coupon code if you have one</p>
<form action="#">
<input type="text" name="zip" value="" placeholder="Your Coupon">
<button type="button">Apply Code</button>
</form>
Print Quotation
</div>
</div>
<div class="col-md-4">
<div class="crt-sumry">
<h5>Cart Summery</h5>
<ul class="list-unstyled">
<li>Subtotal <span>KES {{\Cart::session(auth()->id())->getTotal()}}</span></li>
<li>Shipping & Tax <span>0.00</span></li>
<li>Grand Total <span>KES {{\Cart::session(auth()->id())->getTotal()}}</span></li>
</ul>
<div class="cart-btns text-right">
<button onclick="location.href='{{route('home')}}'" class="up-cart">Update Cart</button>
<button onclick="location.href='{{route('cart.checkout')}}'" class="chq-out ">Checkout</button>
</div>
</div>
</div>
</div>
</div>
</section>
Just visit this https://github.com/arafkarim/HTML-to-PDF i have just applied this thing in my similar project.