I am using ASP.NET Core.
in one of my page I have a div that different PartialView can be loaded into that
<html>
<body style="background:url('/images/bg.png')">
<div class="text-center">
<div class="container" style="overflow-x:auto; background-color:white">
<input type="button" class="btn btn-primary" value="Patients" onclick="LoadPartial('recipe')" />
<input type="button" class="btn btn-primary" value="Orders" onclick="LoadPartial('orders')" />
<input type="button" class="btn btn-primary" value="Delivered" onclick="LoadPartial('deliveries')" />
<div id="mypage">
<partial name="RecipeList.cshtml" />
</div>
</div>
</div>
<script>
function LoadPartial(type) {
var url = '#Url.Action("Recipes", "Glasses")';
if (type == 'recipe')
url = '#Url.Action("Recipes", "Glasses")';
if (type == 'orders')
url = '#Url.Action("Orders", "Glasses")';
if (type == 'deliveries')
url = '#Url.Action("Deliveries", "Glasses")';
$('#mypage').load(url);
}
</script>
</body>
when user open this page for first time ,it should load the partialview , like the first button get clicked.
when another partialview get loaded and I clicked refresh button on the browser, I want to refresh a partiaview that was loaded not the first one.
how can I do these?
You can store the url in localStorage when you click the button, and get the value from it in $(document).ready() function then load the partial view.
<body>
<div class="text-center">
<div class="container" style="overflow-x:auto; background-color:white">
<input type="button" class="btn btn-primary" value="Patients" onclick="LoadPartial('recipe')" />
<input type="button" class="btn btn-primary" value="Orders" onclick="LoadPartial('orders')" />
<input type="button" class="btn btn-primary" value="Delivered" onclick="LoadPartial('deliveries')" />
<div id="mypage">
</div>
</div>
</div>
</body>
#section scripts{
<script>
$(document).ready(function () {
var url = localStorage.getItem('url');
$('#mypage').load(url);
})
function LoadPartial(type) {
var url = '#Url.Action("Recipes", "Home")';
if (type == 'recipe')
url = '#Url.Action("Recipes", "Home")';
if (type == 'orders')
url = '#Url.Action("Orders", "Home")';
if (type == 'deliveries')
url = '#Url.Action("Deliveries", "Home")';
localStorage.setItem('url', url);
$('#mypage').load(url);
}
</script>
}
Result:
Update:
Use sessionStorage:
<body>
<div class="text-center">
<div class="container" style="overflow-x:auto; background-color:white">
<input type="button" class="btn btn-primary" value="Patients" onclick="LoadPartial('recipe')" />
<input type="button" class="btn btn-primary" value="Orders" onclick="LoadPartial('orders')" />
<input type="button" class="btn btn-primary" value="Delivered" onclick="LoadPartial('deliveries')" />
<div id="mypage">
</div>
</div>
</div>
</body>
#section scripts{
<script>
$(document).ready(function () {
var orignalurl = '#Url.Action("Recipes", "Home")';
var url = sessionStorage.getItem('url');
if(url != null)
$('#mypage').load(url);
else
$('#mypage').load(orignalurl);
})
function LoadPartial(type) {
var url = '#Url.Action("Recipes", "Home")';
if (type == 'recipe')
url = '#Url.Action("Recipes", "Home")';
if (type == 'orders')
url = '#Url.Action("Orders", "Home")';
if (type == 'deliveries')
url = '#Url.Action("Deliveries", "Home")';
sessionStorage.setItem('url', url);
$('#mypage').load(url);
}
</script>
}
Related
I have code I am working on. I will list the page, the route, and the controller code. When I inspect and click on the add to cart button I get 500 internal server error and I cannot figure out what I did. It should be giving a message checking to see if the item is already in the cart and if not send a message saying item is in the cart but I can't get past the 500 internal server error.
Page
#extends('layouts.frontend.frontend')
#section('title')
Distinctly Mine - {{$products->name}}
#endsection
#section('content')
<div class="py-3 mb-4 shadow-sm babyblue border-top">
<div class="container">
<h6 class="mb-0">Collections / {{$products->category->name}} / {{$products->name}}</h6>
</div>
</div>
<div class="container">
<div class="card-shadow shadow-sm product_data">
<div class="card-body">
<div class="row">
<div class="col-md-4 border-right">
<div class="img-hover-zoom img-hover-zoom--xyz card-img-top">
<img src="{{ asset('backend/uploads/products/'.$products->image) }}" class="w-100 h-100" alt="{{$products->name}}">
</div>
</div>
<div class="col-md-8">
<h2 class="mb-0">{{ $products->name}}</h2>
<hr>
<label for="" class="me-3">Price: ${{$products->original_price}}</label>
<p class="mt-3">{!! $products->small_description !!}</p>
<hr>
#if($products->qty > 0)
<label for="" class="badge bg-success text-dark fw-bold">In Stock</label>
#else
<label for="" class="badge bg-danger text dark fw-bold">Out of Stock</label>
#endif
<div class="row mt-2">
<div class="col-md-2">
<input type="hidden" value="{{$products->id}}" class="prod_id">
<label for="Quantity">Quantity</label>
<div class="input-group text-center mb-3" style="width:130px">
<button type="button" class="input-group-text decrement-btn">-</button>
<input type="text" name="quantity" value="1" class="form-control qty-input" />
<button type="button" class="input-group-text increment-btn">+</button>
</div>
</div>
<div class="col-md-10">
<br />
<button type="button" class="btn btn-warning text-dark fw-bold ms-3 float-start"><i class=" me-1 fa fa-heart text-danger me-1"></i>Add To Wishlist</button>
<button type="button" class="btn btn-success ms-3 float-start text-dark fw-bold addToCartBtn"><i class="me-1 fa fa-shopping-cart text-dark me-1"></i>Add to Cart</button>
</div>
<hr>
<h2>Description</h2>
{{$products->description}}
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('scripts')
<script>
$(document).ready(function (){
$('.addToCartBtn').click(function (e){
e.preventDefault();
var product_id = $(this).closest('.product_data').find('.prod_id').val();
var product_qty = $(this).closest('.product_data').find('.qty-input').val();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
method: "POST",
url: "/add-to-cart",
data: {
'product_id': product_id,
'product_qty': product_qty,
},
dataType: "dataType",
success: function (response){
alert(response.status);
}
});
});
$('.increment-btn').click(function (e){
e.preventDefault();
var inc_value = $('.qty-input').val();
var value = parseInt(inc_value,10);
value = isNaN(value) ? 0 :value;
if(value < 10)
{
value++;
$('.qty-input').val(value);
}
});
$('.decrement-btn').click(function (e){
e.preventDefault();
var dec_value = $('.qty-input').val();
var value = parseInt(dec_value,10);
value = isNaN(value) ? 0 :value;
if(value > 1)
{
value--;
$('.qty-input').val(value);
}
});
});
</script>
#endsection
Route
Route::middleware(['auth'])->group(function (){
Route::post('/add-to-cart',[CartController::class,'addProduct']);
});
Controller
<?php
namespace App\Http\Controllers\Frontend;
use App\Models\Product;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;
class CartController extends Controller
{
public function addProduct(Request $request)
{
$product_id = $request->input('product_id');
$product_qty = $request->input('product_qty');
if(Auth::check())
{
$prod_check = Product::where('id',$product_id)->first();
if($prod_check)
{
if(Cart::where('prod_id',$product_id)->where('user_id',Auth::id())->exists())
{
return response()->json(['status' => $prod_check->name." Already Added to cart"]);
}else{
$cartItem = new Cart();
$cartItem->prod_id = $product_id;
$cartItem->user_id = Auth::id();
$cartItem->prod_qty = $product_qty;
$cartItem->save();
return response()->json(['status'=>$prod_check->name." Added to cart"]);
}
}
}
else{
return response()->json(['status'=> "Login To Continue"]);
}
}
}
I got the following problem.
in my Controller, this method is supposed to return a JSON with the pets from the database. but is being called, the server returns a 404.
public async Task<JsonResult> GetPetsAsync(int ownerId )
{
var pets = await _dataContext.Pets
.Where(p => p.Owner.Id == ownerId)
.OrderBy(p => p.Name)
.ToListAsync();
return Json(pets);
}
=====================================================
This is the form that provides the OwnerId for the method to find the pets for that particular owner.
<div class="row m-auto align-content-center">
<div class="col-md-4">
<form asp-action="Assign" enctype="multipart/form-data">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Id" />
<div class="form-group">
<label asp-for="OwnerId" class="form-label fw-bold"></label>
<select asp-for="OwnerId" asp-items="Model.Owners" class="form-control"></select>
<span asp-validation-for="OwnerId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="PetId" class="form-label fw-bold"></label>
<select asp-for="PetId" asp-items="Model.Pets" class="form-control"></select>
<span asp-validation-for="PetId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Remarks" class="form-label fw-bold "></label>
<textarea asp-for="Remarks" class="form-control"></textarea>
<span asp-validation-for="Remarks" class="text-danger"></span>
</div>
<div class="form-group mt-3">
<button value="Assign" type="submit" class="btn btn-primary btn-sm"><i class="bi bi-calendar-plus-fill"></i></button>
<a asp-action="Index" class="btn btn-success btn-sm"><i class="bi bi-arrow-return-left"></i> Go Back</a>
<span asp-validation-for="Remarks" class="text-danger"></span>
</div>
</form>
</div>
</div>
In my View -- the AJAX request to GetPetsAsync
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
$(document).ready(function () {
$("#OwnerId").change(function () {
$("#PetId").empty();
$.ajax({
type: 'POST',
url: '#Url.Action("GetPetsAsync", "Agenda")',
//Take the OwnerId and send it to the JsonResult Method to retrieve the pets
data: { ownerId: $("#OwnerId").val() },
dataType: 'Json',
success: function (pets) {
$("#PetId").append('<option value="0">(Select a pet...)</option>');
$.each(pets, function (i, pet) {
$("#PetId").append('<option value="'
+ pet.id + '">'
+ pet.name + '</option>');
});
},
error: function (ex) {
alert('Failed to retrieve pets. ' + ex.statusText);
}
});
return false;
})
});
</script>
It looks like this feature change is affecting you.
Async suffix for controller action names will be trimmed by default #14716
You can just drop the "Async" suffix from your view-side code. Which is why renaming your method "fixed" your problem.
You have control over this behavior in your app startup with SuppressAsyncSuffixInActionName
builder.Services.AddMvc(options =>
{
options.SuppressAsyncSuffixInActionNames = false;
});
Make sure the "httppost" attribute is used. If you continue to get an error, check the data part in the ajax section.
I found the solution. Incredibly just by changing the Method Name to GetPetAsyncronous the problem was solve. I don’t know why the previous method wouldn’t work. But It worked.
$("#addRow").click(function ()
{
#{
new VLSM_Model().LansValues.Add(new Lans());
}
var rowCount = parseInt($("#totalLans").val());
rowCount++;
$("#totalLans").val(rowCount);
var html = '';
html += '<div id="inputFormRow" style="width: 35%">';
html += '<div class="input-group mb-3">';
html += '<input type="number" id="[' + (rowCount - 1) + '].InitialLanValues" class="form-control m-input" placeholder="Enter number of Hosts" autocomplete="off" style="width: 30%" required>';
html += '<div class="input-group-append">';
html += '<button id="removeRow" type="button" class="btn btn-danger" style="margin-right: 5px">Remove Network</button>';
html += '</div>';
html += '</div>';
$('#newRow').append(html);
});
$(document).on('click', '#removeRow', function ()
{
var rowCount = parseInt($("#totalLans").val());
rowCount--;
$("#totalLans").val(rowCount);
$(this).closest('#inputFormRow').remove();
});
$(document).ready(function () {
$("#createButton").click(function ()
{
var inputData = $(this).serializeArray();
$.ajax(
{
type: "POST", //HTTP POST Method
url: "VLSM_Controller/Create", // Controller/View
data: inputData,
success : function(response) {
console.log(response)
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>VLSM CALCULATE</h1>
<hr />
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group" style="width: 35%">
<label asp-for="IP_Address" class="control-label"></label>
<input asp-for="IP_Address" class="form-control" />
<span asp-validation-for="IP_Address" class="text-danger"></span>
</div>
<br/>
<div class="form-group">
<div id="inputFormRow" style="width: 35%">
<div class="input-group mb-3">
<br/>
<div class="input-group-append"></div>
</div>
</div>
<div id="newRow">
<input type="hidden" id="totalLans" value="0" />
</div>
<button id="addRow" type="button" class="btn btn-info">Add Network</button>
</div>
<span asp-validation-for="LansValues" class="text-danger"></span>
<br/>
<div class="form-group" style="width: 35%">
<label asp-for="cidrValue" class="control-label"></label>
<input asp-for="cidrValue" class="form-control" />
<span asp-validation-for="cidrValue" class="text-danger"></span>
</div>
<br/>
<div class="form-group">
<input type="submit" value="Calculate VLSM" class="btn btn-info" id="createButton"/>
</div>
</form>
<div>
<a asp-action="VlsmResult">Back to List</a>
</div>
I created dynamically input fields as you can see from code, but I have difficulties to pass the data to controller, and to use the data for calculations inside the controller.
My question is how to pass data from dynamically created input fields with ajax to controller and how to use passed data for any kind of calculations.
Model binding system will look through the property by name. So you need match the name attribute in html with model property name. That is to say, your dynamic added input fields should have name attribute:name="LansValues[index].InitialLanValues".
Here is a whole working demo:
Model:
public class VLSM_Model
{
public string IP_Address { get; set; }
public List<Lans> LansValues { get; set; }
public int cidrValue { get; set; }
}
public class Lans
{
public int InitialLanValues { get; set; }
}
View:
Modify type="submit" to type="button", otherwise the ajax will not hit.
#model VLSM_Model
<h1>VLSM CALCULATE</h1>
<hr />
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group" style="width: 35%">
<label asp-for="IP_Address" class="control-label"></label>
<input asp-for="IP_Address" class="form-control" />
<span asp-validation-for="IP_Address" class="text-danger"></span>
</div>
<br />
<div class="form-group">
<div id="inputFormRow" style="width: 35%">
<div class="input-group mb-3">
<br />
<div class="input-group-append"></div>
</div>
</div>
<div id="newRow">
<input type="hidden" id="totalLans" value="0" />
</div>
<button id="addRow" type="button" class="btn btn-info">Add Network</button>
</div>
<span asp-validation-for="LansValues" class="text-danger"></span>
<br />
<div class="form-group" style="width: 35%">
<label asp-for="cidrValue" class="control-label"></label>
<input asp-for="cidrValue" class="form-control" />
<span asp-validation-for="cidrValue" class="text-danger"></span>
</div>
<br />
<div class="form-group">
#*change here*#
<input type="button" value="Calculate VLSM" class="btn btn-info" id="createButton" />
</div>
</form>
<div>
<a asp-action="VlsmResult">Back to List</a>
</div>
JS:
Change the dynamic html to name="LansValues[' + (rowCount - 1) + '].InitialLanValues" and change var inputData = $(this).serializeArray(); to var inputData = $('form').serializeArray();.
#section Scripts
{
<script>
$("#addRow").click(function ()
{
#*#{new VLSM_Model().LansValues.Add(new Lans());}*#
var rowCount = parseInt($("#totalLans").val());
rowCount++;
$("#totalLans").val(rowCount);
var html = '';
html += '<div id="inputFormRow" style="width: 35%">';
html += '<div class="input-group mb-3">';
//change id attribute to name attribute and modify the name
html += '<input type="number" name="LansValues[' + (rowCount - 1) + '].InitialLanValues" class="form-control m-input" placeholder="Enter number of Hosts" autocomplete="off" style="width: 30%" required>';
html += '<div class="input-group-append">';
html += '<button id="removeRow" type="button" class="btn btn-danger" style="margin-right: 5px">Remove Network</button>';
html += '</div>';
html += '</div>';
$('#newRow').append(html);
});
$(document).on('click', '#removeRow', function ()
{
var rowCount = parseInt($("#totalLans").val());
rowCount--;
$("#totalLans").val(rowCount);
$(this).closest('#inputFormRow').remove();
});
$(document).ready(function () {
$("#createButton").click(function ()
{
var inputData = $('form').serializeArray(); //change here...
$.ajax(
{
type: "POST", //HTTP POST Method
url: "Home/Create", // Controller/View
data: inputData,
success : function(response) {
console.log(response)
}
});
});
});
</script>
}
Controller:
public class HomeController : Controller
{
[HttpPost]
public IActionResult Create(VLSM_Model model)
{
//...
}
}
Note:
Actually if you just use form submit, it also can work well. If you use form submit, just change your original code:name="LansValues[' + (rowCount - 1) + '].InitialLanValues" in $("#addRow").click() function. Then remove the $("#createButton").click() function. No need change any other code.
I am doing POC on login application using angular js. On button click I need to navigate to another page. The code which I have written is only updating the url but the view is not getting loaded. I have used ng-view or ui- view also. And I have used $location.path. But still unable to navigate to other page
Here is my code
index.html:
<html ng-app='myApp'>
<head>
<title>Jasmine</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="routing.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" name="myForm" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span>
<b>Username :</b> <input type="text" class="form-control" ng-model="user.name" required>
</span> <br />
<br /> <span>
<b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required>
</span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="myForm.$invalid">
<b>Sign in</b>
</button>
</form>
</div>
{{message}}
</div>
<div ui-view></div>
</body>
</html>
Here I have used ui-view.. when i use this, url is updating but not the view..
when i use ng-view, the script block is happening both in chrome and firefox.
routing.js:
var applog = angular.module('myApp', ['ngRoute']);
applog.controller("LoginController", function ($scope, $location, $window) {
$scope.message = "hi";
$scope.login = function () {
var username = $scope.user.name;
var password = $scope.user.password;
$location.path('/home');
};
});
applog.controller("HomeController", function ($scope, $location) {
$scope.msg = "qwerty";
});
applog.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'LoginController'
}).when('/home', {
templateUrl: '/home.html',
controller: 'HomeController'
}).otherwise({
redirectTo: 'index.html'
});
});
Here I tried with hash also.. not working
Home.html:
<div ng-controller="HomeController">
Welcome....
</div>
just trying to use ajax formRemote in a BS popover.
A simple form works, but the ajax implementation not:
1) gsp code
<div id="addfolder">
<a href="#" class="btn" id="nrfolder" rel="popover">
<i class="icon-folder-close icon-large"></i></a><%--<g:message code="folder" args="[entityName]" default="New Folder"/>--%></a>
</div>
<div id="newRootFolder" style="display:none;">
<form class="form-inline" style="width:280px;">
<g:formRemote name="createRootFolder" url="[controller:'folders',action:'create']" onLoading="showModalSpinnerNewFolder();" onComplete="hideModalSpinnerNewFolder();" onSuccess="doResponseNewFolder(data);" >
<g:textField name="folderName" class="input-small" type="text" placeholder="New folder"/>
<input type="submit" value="Create" class="btn btn-info" />
<a href="#" class="btn" onclick="$('#nrfolder').popover('hide')"/>Cancel</a>
</g:formRemote>
</g:formRemote>
</form>
</div>
2) Popover call with jquery
$('#nrfolder').popover({placement:'right',title:'New Root Folder',html:true,content: function() { return $('#newRootFolder').html();} });
3) jquery success event: doResponseNewFolder function
function doResponseNewFolder(data) {
alert('toto' + data.success);
if (data.success == 'true') {
var msg = data.msg;
// reload tree view
$('#tree').dynatree('getTree').reload();
} else {
var msg = $('<ul class="errors">');
for (var i = 0; i < data.errorList.length; i++) {
msg.append('<li>' + data.errorList[i] + "</li>");
}
}
$('#new_folder_msg').html(msg);
$('#new_folder_msg').show();
}
Any idea?
It seems you're messing up with forms, let me explain: Grails' g:formRemote is a helper for making ajax web forms, so if you look at the resulting HTML there will be a form generated at the call.
The fact is that you already opened a form, which isn't valid HTML syntax. That first form should not exist. You can give its attributes to your g:formRemote though and Grails will pass them to your generated form:
<g:formRemote class="form-inline" style="width:280px;" name="createRootFolder" url="[controller:'folders',action:'create']" onLoading="showModalSpinnerNewFolder();" onComplete="hideModalSpinnerNewFolder();" onSuccess="doResponseNewFolder(data);" >
<g:textField name="folderName" class="input-small" type="text" placeholder="New folder"/>
<input type="submit" value="Create" class="btn btn-info" />
<a href="#" class="btn" onclick="$('#nrfolder').popover('hide')"/>Cancel</a>
</g:formRemote>
This, with no other forms imbricated, will be enough.