I am working on one page checkout system in asp.net core I am using a partial view for each the stages of course I no you can just use below, but I want to load the partial view on button click of checkout it will show stage 2 etc and hide stage 1. I no the question may have been ask before but I am using the new asp.net core and was wondering what is the best practise for it.
#Html.Partial("_checkoutStage1.cshtml");
#Html.Partial("_checkoutStage2.cshtml") ;
Which will render a partrial view but what I want to be able to do is click a button to show stage two.
I found a bit of javascript and tried it with this being in my main view
<script type="text/javascript">
$("#loadPartialView").click(function () {
$.get('#Url.Action("LoadStage2", "Basket")', {}, function (response) {
$("#Display").html(response);
});
});
</script>
My Button
<button id="search" class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span>
</button>
My Controller which is in my basket controller. Another question I have can you move the partial views to another directory or is ~/views/basket/ _ underscore prefix the correct naming convention for partial views.
public ActionResult LoadStage2(string searchText)
{
return PartialView("~/Views/Basket/_checkoutStage2.cshtml");
}
Head of my layout page
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
</head>
Can someone help me out with this obv we dont want the page to refresh so I need to place it in a div on the button click.
My Index.cshtml based on basket layout
#model List<solitudedccore.models.basket.basketlines>
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_BasketLayout.cshtml";
}
<head>
<script type="text/javascript">
$("#checkout").click(function () {
$.get('#Url.Action("LoadStage2", "Basket")', {}, function (response) {
$("#Display").html(response);
});
});
</script>
</head>
#Html.Partial("_checkoutStage1.cshtml");
<div id="Display"></div>
Full basketlayout
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</environment>
<script>
</script>
</head>
<body>
#RenderBody()
</body>
</html>
Checkout stage 1 includes the button which I want to load stage 2 from it might be my misunderstanding of page cycle coming from 15 years of web forms.
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1">
<table class="table table-hover">
<thead>
<tr>
<th>Product</th>
<th>Quantity</th>
<th class="text-center">Price</th>
<th class="text-center">Total</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-8 col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading">Product name</h4>
<h5 class="media-heading"> by Brand name</h5>
<span>Status: </span><span class="text-success"><strong>In Stock</strong></span>
</div>
</div>
</td>
<td class="col-sm-1 col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="3">
</td>
<td class="col-sm-1 col-md-1 text-center"><strong>$4.87</strong></td>
<td class="col-sm-1 col-md-1 text-center"><strong>$14.61</strong></td>
<td class="col-sm-1 col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
</td>
</tr>
<tr>
<td class="col-md-6">
<div class="media">
<a class="thumbnail pull-left" href="#"> <img class="media-object" src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-2/72/product-icon.png" style="width: 72px; height: 72px;"> </a>
<div class="media-body">
<h4 class="media-heading">Product name</h4>
<h5 class="media-heading"> by Brand name</h5>
<span>Status: </span><span class="text-warning"><strong>Leaves warehouse in 2 - 3 weeks</strong></span>
</div>
</div>
</td>
<td class="col-md-1" style="text-align: center">
<input type="email" class="form-control" id="exampleInputEmail1" value="2">
</td>
<td class="col-md-1 text-center"><strong>$4.99</strong></td>
<td class="col-md-1 text-center"><strong>$9.98</strong></td>
<td class="col-md-1">
<button type="button" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span> Remove
</button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Subtotal</h5></td>
<td class="text-right"><h5><strong>$24.59</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h5>Estimated shipping</h5></td>
<td class="text-right"><h5><strong>$6.94</strong></h5></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><h3>Total</h3></td>
<td class="text-right"><h3><strong>$31.53</strong></h3></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-shopping-cart"></span> Continue Shopping
</button>
</td>
<td>
<button id="checkout" class="btn btn-success">Checkout <span class="glyphicon glyphicon-play"></span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="detailsDiv" class="detailsDiv"></div>
At first glance, if you want to show Stage 2 by clicking on the button, your click listener would need to be bound to the $('#search') button. In your code you are binding a click event to $('#loadPartialView'), which you don't show anywhere.
You also need to do a bit of debugging to see exactly where the issue is. You've posted some code, but you don't indicate what exactly is happening with the current code. Does the partial view get returned through the get successfully? Is the click listener firing?
You could put a breakpoint on the line
$("#Display").html(response);
and see if response has any contents. Presumably they should be HTML.
Regarding your second question about naming conventions of partial views. Typically if a partial view is used across controllers, I put it in /Shared. But if it is only used within one controller (seems like your case) putting the partial within the controller folder is fine. Yes, the _ is the proper convention for naming partials.
Related
I'm trying to make an editable table with bootstrap.
So, it must include some inputs.
Table columns width usually fit with its content. Bootstrap's form-control sets the width: 100%, but i feel it too large and want the input smaller.
I found in another question that i can use w-auto on my input to bypass this.
However, table doesn't seem to shrink the column size to it's content when i do this.
I guess i should somehow tell the table which column must expand to fill the space.
I've tried setting w-100 to another column, but it breaks another input-group in another column.
<table class="table table-sm">
<thead>
<th>Problematic column</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<td class="table-danger"><input type="number" class="form-control w-auto"></td>
<td>Something else</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">X</button>
</div>
<input type="text" class="form-control"/>
</div>
</td>
</tbody>
</table>
See plunker
Im not 100% sure what u exactly want to achieve, but i think you want this behaviour?
Add input-group div around your first input field and remove the w-auto class.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="lib/script.js"></script>
</head>
<div class="container">
<table class="table table-sm">
<thead>
<th>Problematic column</th>
<th>2</th>
<th>3</th>
</thead>
<tbody>
<td class="table-danger">
<div class="input-group">
<input type="number" class="form-control">
</div>
</td>
<td>Something else</td>
<td>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">X</button>
</div>
<input type="text" class="form-control"/>
</div>
</td>
</tbody>
</table>
</div>
</html>
I'm trying to build a settings for my WordPress plugin, I want my image to be displayed aside the table on the right, but it always goes to bottom can you guys help me to fix that ?
<form action="options.php" method="post">');
<div class="row">
<div class="col-md-8">
<table class="form-table">
<tbody>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="x'.$key.'" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
<tr>
<th scope="row"><label for="">test</label></th>
<td>
<input name="myinput" value="'.$option['x'.$key].'" width="50px">
<button type="button" onclick="position('.$key.')" class="button button-primary">Create/Edit</button>
<p class="description" id="">some discription</p>
</td>
</tr>
....
</tbody>
</table>
</div>
<div class="col-md-4">
<div id="special">
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
</div>
</div>
// outputs the WP submit button html
//#submit_button();
Add a div element with "container" or "container-fluid" class after form element( <form action="options.php" method="post"> )
like :<form action="options.php" method="post"><div class="container">
...............
</div></form>
OR
like :<form action="options.php" method="post"><div class="container-fluid">
...............
</div></form>
I have a data table in my AngularJS application which has many columns where the responsiveness doesn't work anymore. I am currently scrolling the whole way through the data table, which doesn't look good.
I am trying to find a way to freeze some columns on the right side of the data table so that the scroll will be only for the columns on the left. The data tables contain buttons on the right side, so if the buttons are frozen it would be more helpful.
HTML:
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<div class="col-md-12">
<div class="widget widget-table action-table" style="overflow:auto">
<!-- /widget-header -->
<div class="widget-content table-container" ng-controller="getTalentController">
<table ng-table="talentsList" show-filter="true" class="table table-striped table-bordered" style="font-size: smaller;text-align:center">
<tr ng-repeat="talent in data">
<td data-title="'#'" style="width:5px">{{ $index+1 }}</td>
<td data-title="'Employee ID'" sortable="'employeeNo'" filter="{ 'employeeNo': 'text' }" style="width:50px">
{{talent.employeeNo}}
</td>
<td data-title="'Name'" sortable="'fullName'" filter="{ 'fullName': 'text' }">
{{talent.fullName}}
</td>
<td data-title="'From'" sortable="'inDate'" filter="{ 'inDate': 'text' }">
{{talent.inDate}}
</td>
<td data-title="'Till'" sortable="'outTill'" filter="{ 'outTill': 'text' }">
{{talent.outTill}}
</td>
<td data-title="'Account'" sortable="'account'" filter="{ 'account': 'text' }">
{{talent.account}}
</td>
<td data-title="'State'" sortable="'state'" filter="{ 'state': 'text' }" ng-class="{greenStyle : talent.state == 'Available', blueStyle : talent.state == 'Billed', redStyle: talent.state == 'Blocked'}">
<div style="border:solid">{{talent.state}}</div>
</td>
<td data-title="'Remarks'" ng-click="showRemarks[$index]=!showRemarks[$index]" style="width:70px">
<span ng-hide="showRemarks[$index]" class="ellipses" style="width:inherit">{{talent.remark}} </span>
<span ng-show="showRemarks[$index]"> {{talent.remark}} </span>
</td>
<td data-title="'Resume'">
<a ng-click="downloadResume(talent.id)" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="resume"><svg class="glyph translucent floppy-disk"><use xlink:href="#translucent-floppy-disk"></use></svg></a>
</td>
<td data-title="'Reserve'">
<a ui-sref="reservation.edit({id: talent.id})" class="btn btn-default" data-placement="top" data-toggle="tooltip" data-original-title="save"><svg class='glyph stroked hand-cursor'><use xlink:href='#stroked-hand-cursor' /></svg></a>
</td>
</tr>
</table>
</div>
<!-- /widget-content -->
</div>
<!-- /widget -->
</div>
<!-- /span12 -->
</div>
<!-- /row -->
</div>
I would like to freeze the columns on the right side carrying title 'State','Remarks','Resume',and 'Reserve'.
How can I achieve this. I guess the controller code wont be required for this problem. Currently I am creating scroll bar for the table by applying style="overflow:auto" for the outer div.
CSS : https://hastebin.com/wibahuyoxa.cs
I'm trying to create a website with a table on it.. I search for templates and found the bootstrap-table design... the example is working perfectly fine but if I want to use this bootstrap-table-javascript on my own table its not working.
Here is my jsp code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<!-- Scriptimporte: -->
<script src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery-1.11.1.min.js"></script>
<!-- Tabellenpflege mit XML-Datei -->
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %>
<c:import var="bookInfo" url="tables/xml_doc.xml"/>
<x:parse xml="${bookInfo}" var="output"/>
<!-- css-Dateien -->
...
</head>
<body>
<div id="start_header">
<div id="start_logo"><img src="icons/logo.jpg" alt="" /></div>
</div>
<h1>Test</h1>
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></li>
<li class="active">Icons</li>
</ol>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Tables</h1>
</div>
</div><!--/.row-->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading"><h2>Testlist</h2></div>
<div class="panel-body">
<table data-toggle="table" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="price" data-sortable="true">Durchwahl</th>
<th data-field="present" data-sortable="true">Anwesend</th>
</tr>
</thead>
<tbody>
<x:forEach var="test" select="$output/books/book">
<tr>
<td>
1
</td>
<td>
<x:out select="name" />
</td>
<td>
<x:out select="nr" />
</td>
<td>
ja
</td>
</tr>
</x:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div><!--/.row-->
</div><!--/.main-->
</body>
</html>
I thought the bootstrap-table.js-function applys all his methods on all tables in the document which have the data-toggle="table".
You need only one Bootstrap import if you are using the latest Bootstrap. Secondly, your Bootstrap reference must follow the jQuery reference. :) Lastly use the Bootstrap table class in the table tag: class="table". And you need a reference to the Bootstrap.css file.
My Code:
<p:splitButton value="View">
<p:menuitem value="Edit" icon="ui-icon-edit" />
<p:menuitem value="Delete" icon="ui-icon-delete"/>
</p:splitButton>
that code is rendering the menu appended to the body, for example:
<body>
<form>
<table>
<tr>
<button id="splitbutton".../>
</tr>
</table>
</form>
<div id="menu-for-splitbutton">
<a id="menu1"... >Edit</a>
<a id="menu2"... >Delete</a>
</div>
</body>
I need the menu relative to the splitbutton or adjacent, for example:
<body>
<form>
<table>
<tr>
<button id="splitbutton".../>
<div id="menu-for-splitbutton">
<a id="menu1"... >Edit</a>
<a id="menu2"... >Delete</a>
</div>
</tr>
</table>
</form>
</body>
I'm using :hover (CSS) to show the split button when the cursor is over a row, but is not hiding the context menu when any row is unselected because the menu is not inside the TR tag... How I can resolve this?