There is default Bootstrap pagiantion
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
In Asp.NET WebGrid I only can
footerStyle: "pagination",
In HTML of WebGrid I see this
<tfoot>
<tr class="pagination">
<td colspan="8">1 2 > </td>
</tr>
</tfoot>
What a easiest way to take in WebGrid bootstrap pagination style?
https://github.com/mdobie/WebGridPagerReplacement - this work good for WebGrid. Thank's to author.
Related
I'm using Spring Thymeleaf for templating. I want to use the nested modal varabiles, but when I use it in nested form. I'm getting the follwing error,
th:text=${${FIELD_NAME_1}}
SpelParseException: EL1041E: After parsing a valid expression, there is still more data in the expression: 'lcurly({)'
This is my template snippet,
<!--
<td th:href="#{'${URL}' + ${ID_FIELD}}"
th:text="${FIELD_NAME_1}">Tiger Nixon</td>
-->
<!-- <td th:text="${__${FIELD_NAME_1}__}">Tiger Nixon</td> -->
<td th:text="${(country.countryName != null) ? ${country.countryName} : "nullvalue" }">Tiger Nixon</td>
<td th:text="${__${FIELD_NAME_2}__}">Lorem Ipsum is simply
dummy text of the printing and type setting industry.</td>
<td>Code not added</td>
<td class="text-center"><span
class="icon-edit float-left actionCircle"
style="padding: 10px"></span>
<div class="dotMenus mt-2 float-left">
<span class="icon-Dots actionCircle"
style="padding: 10px 10px;"></span>
<div class="dotMoreMenu mt-3">
<ul>
<li><a href="#"> <span class="icon-Delete mr-2"></span>Delete
</a></li>
<li><a href="#"> <i class="fas fa-lock mr-2"></i>Option
01
</a></li>
<li><a href="#"> <i class="fas fa-lock mr-2"></i>Option
02
</a></li>
</ul>
</div>
</div></td>
<td></td>
</tr>
These are my modal Varaibles,
modalAndView.addObject("COUNTRYS_DTOS", countrysFetchByPageResponseDto.getCountrys());
modalAndView.addObject("ITEM_DTO", "country");
modalAndView.addObject("ITEM_DTOS", "COUNTRY_DTOS");
modalAndView.addObject("FIELD_NAME_1", "country.countryName");
modalAndView.addObject("FIELD_NAME_2", "country.description");
But still it is generating a blank page.
I'm wondering how do I implement a star rating system in ASP .NET MVC when the stars are encapsulated in a Ul, li.
I'm using https://htmlstream.com/preview/unify-v2.5.1/e-commerce/page-single-product-2.html as a layout.
The code below is within my form post method
#using (Html.BeginForm("Index", "Drink", FormMethod.Post))
{
....
<!-- Rating -->
<div class="col-5 col-sm-4 col-md-3">
<h3 class="h6 mb-1">Rate:</h3>
<ul class="js-rating u-rating-v1 g-font-size-20 g-color-gray-light-v3 mb-0" data-hover-classes="g-color-primary">
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-color-primary g-line-height-1_4 click">
<i class="fa fa-star"></i>
</li>
<li class="g-line-height-1_4">
<i class="fa fa-star"></i>
</li>
</ul>
<!-- End Rating -->
</div>
....
}
I'm wondering how do I let my controller know what the selected rating is?
I have a portion of code for Navigation Bar in the header of the website.
I repeat it within of several views.
The code is almost equal for all views, change just for setting css class "active" for setting the background color of <li> TAG.
Partial Views
#Model String
<nav class="navbar">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li>
<a href="MainPage">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span>
MainPage
</a>
</li>
<li class="active">
<a href="SectionSummary">
<span class="glyphicon glyphicon-stats" aria-hidden="true"> </span>
Summary
</a>
</li>
<li>
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="(#Model=="Print")?"active":"">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
Print
</a>
</li>
</ul>
</div>
</nav>
I call it in the views in this way:
#Html.Partial("~/Views/Shared/PSANavigationBar.cshtml")
I would to pass a parameter to #Html.Partial and then in the PartialView to test a value and flagging class="active" when occurs a condition!
For example:
#Html.Partial("~/Views/Shared/PSANavigationBar.cshtml", "Print")
in the view, something like this:
</li>
<li class="(#Model=="Check")?"active":"">
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="(#Model=="Print")?"active":"">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
but it doesn't work!
How can I do?
Many thanks to all.
The way you are calling the partial view looks okay, you just need to change the way you choose your class:
<li class="#(Model == "Check" ? "active":"")">
the Model is how you receive your parameter, and this is a way you can choose a class within a razor condition. You can see another example of how too choose your class within a condition with asp mvc razor.
You should have something like this:
#model String
<nav class="navbar">
<div class="container">
<ul class="nav nav-pills nav-justified">
<li>
<a href="MainPage">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"> </span>
MainPage
</a>
</li>
<li class="active">
<a href="SectionSummary">
<span class="glyphicon glyphicon-stats" aria-hidden="true"> </span>
Summary
</a>
</li>
<li>
<a href="Check">
<span class="glyphicon glyphicon-check" aria-hidden="true"> </span>
Check
</a>
</li>
<li class="#(Model=="Print"?"active":"")">
<a href="Print">
<span class="glyphicon glyphicon-print" aria-hidden="true"> </span>
Print
</a>
</li>
</ul>
</div>
</nav>
Please notice that # is before the parenthesis ( not after it in class.
There are one layout page and one page using the layout page. In the Create page there is one textarea id= editor1. In the All the js and css were load successful. But the ckeditor not show, just a blank textarea
The output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Bootstrap Admin Theme</title>
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/font-awesome.css" rel="stylesheet">
<link href="/css/sb-admin-2.css" rel="stylesheet">
<link href="/css/jquery-ui.css" rel="stylesheet" />
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/ckeditor/ckeditor.js"></script>
<script src="/js/jquery-ui.js"></script>
<link href="/css/jquery-ui/style.css" rel="stylesheet"/>
<script type="text/javascript">
$('#editor1').ckeditor();
</script>
<script src="/ckeditor/ckeditor.js"></script>
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">SB Admin v2.0</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<strong>John Smith</strong>
<span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>Read All Messages</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-messages -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li>
<a href="#">
<div>
<p>
<strong>Task 1</strong>
<span class="pull-right text-muted">40% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 2</strong>
<span class="pull-right text-muted">20% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 3</strong>
<span class="pull-right text-muted">60% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<p>
<strong>Task 4</strong>
<span class="pull-right text-muted">80% Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Tasks</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-tasks -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 minutes ago</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<i class="fa fa-user fa-fw"></i> User Profile
</li>
<li>
<i class="fa fa-gear fa-fw"></i> Settings
</li>
<li class="divider"></li>
<li>
<i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<!-- /input-group -->
</li>
<li>
<a href="/Home">
<i class="fa fa-dashboard fa-fw"></i> Dashboard
</a>
</li>
<li>
<i class="fa fa-bar-chart-o fa-fw"></i> Quản lý chung<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Quản lý loại
</li>
<li>
Quản lý danh mục
</li>
<li>
Quản lý sách
</li>
<li>
Quản lý tác giả
</li>
<li>
Quản lý nhà xuất bản
</li>
<li>
Quản lý đối tác vận chuyển
</li>
<li>
Quản lý tỉnh thành
</li>
<li>
Quản lý Đơn hàng
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-table fa-fw"></i>Form
</li>
<li>
<i class="fa fa-edit fa-fw"></i> Forms
</li>
<li>
<i class="fa fa-wrench fa-fw"></i> UI Elements<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Panels and Wells
</li>
<li>
Buttons
</li>
<li>
Notifications
</li>
<li>
Typography
</li>
<li>
Icons
</li>
<li>
Grid
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li>
<i class="fa fa-sitemap fa-fw"></i> Multi-Level Dropdown<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
Second Level Item
</li>
<li>
Second Level Item
</li>
<li>
Third Level <span class="fa arrow"></span>
<ul class="nav nav-third-level">
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
<li>
Third Level Item
</li>
</ul>
<!-- /.nav-third-level -->
</li>
</ul>
<!-- /.nav-second-level -->
</li>
<li class="active">
<i class="fa fa-files-o fa-fw"></i> Sample Pages<span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
<a class="active" href="blank.html">Blank Page</a>
</li>
<li>
Login Page
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<script>
$(function () {
$("#tabs").tabs();
});
</script>
<h2>Create</h2>
<form action="/BeTacGia/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="kzj5sfQHJry54YaqB11hNT3F_72kkly2EG6JnofMrGtIVcAO4YbNUk7aD1wv7db0OPEEUsVdmvT96Nv_tWPer3RkDY1PMLqJskWGDWkT-WQ1" /> <div class="form-horizontal">
<h4>TacGia</h4>
<hr />
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<div class="form-group">
<label class="control-label col-md-2" for="Ten">Ten</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Ten" name="Ten" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Ten" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="NgaySinh">NgaySinh</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field NgaySinh must be a date." data-val-required="The NgaySinh field is required." id="ngaySinh" name="NgaySinh" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="NgaySinh" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="NgayMat">NgayMat</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field NgayMat must be a date." id="NgayMat" name="NgayMat" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="NgayMat" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="MaGioiTinh">Giới tính</label>
<div class="col-md-10">
<select class="form-control" id="MaGioiTinh" name="MaGioiTinh"><option value="False">Nữ </option>
<option value="True">Nam </option>
</select>
<span class="field-validation-valid text-danger" data-valmsg-for="MaGioiTinh" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div>
<div id="tabs-2">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<textarea cols="20" id="editor1" name="editor1" rows="2">
</textarea>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</form>
<div>
Back to List
</div>
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<!-- Bootstrap Core JavaScript -->
<!-- Metis Menu Plugin JavaScript -->
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<script type="text/javascript">
$("#editor1").ckeditor();
</script>
<script src="/ckeditor/ckeditor.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"a0659a041f2c43debc9047700eda9c38"}
</script>
<script type="text/javascript" src="http://localhost:51010/3ea56a66c2ef4b65975354424aa8f008/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Thanks for the edit, it's a little more clear now. This was too long to be a comment.
Here's some things you might want to have a look at
You have $('#editor1').ckeditor(); 2 times, remove the first
You have <script src="/ckeditor/ckeditor.js"></script> 3 times, remove the 2nd and 3rd
Replace the 2nd $('#editor1').ckeditor(); with CKEDITOR.replace( 'editor1' );
Are you using the CKE jQuery adapter or did you come up with the jQuery-like selector on your own or..? Do you have any errors in your browser dev console?
On the Themeroller page, the author of jQuery UI shows that there are icons available if you use certain keywords. Example:
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-circle-close">
</span>
</li>
This creates a nice little X in the middle of a circle, framed by a box with rounded corners and a border.
But what if my icons are not in a list? What if they're in a table cell for instance?
<td>
<li class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</li>
</td>
This works, although it's not technically correct, because I don't have an opening and closing < ul> element.
Do I use
<td class="showcities">
<span class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s">
</span>
</span>
</td>
If so, what should the css be to define the ui-corner-all the same as the Themeroller example?
Instead of span, use <div> here, like this
<td class="showcities">
<div class="ui-state-default ui-corner-all" title=".ui-icon-circle-close">
<span class="ui-icon ui-icon-triangle-1-s"></span>
</div>
</td>