I'm trying to bind data to Action Link within Knockoutjs foreach loop. This code works fine
<ul data-bind="foreach: ItemList">
<li>
<a data-bind="attr: { 'href': '#Url.Action("Items", "ItemController")' }" >
LinkText
</a>
</li>
</ul>
But I also need to bind a parameter and bind the LinkText with knockoutjs. I tried different code samples but nothing seems to work.
Final code should be something like,
<ul data-bind="foreach: ItemList">
<li>
<a data-bind="attr: { 'href': '#Url.Action("Items", "ItemController")', new { id = DataBindId)' }" >
DataBindName
</a>
</li>
</ul>
How can I make this work?
Try this...
<a data-bind="attr: { 'href': '#Url.Action("Items", "ItemController")?id=' + DataBindId }, text: DataBindName" >
</a>
Which should output something like...
<a data-bind="attr: { 'href': '/Item/Items?id=' + DataBindId }, text: DataBindName" >
</a>
Related
I have a search input box to take a string in the frontend with suchfensterAction. The result seems to be correct. But when I click to page 2 or higher I always get the suchfensterAction and never the higher paginated page.
(static function() {
\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
'Myext', 'Myext',
[...\Controller\MyextController::class => 'suchfenster, list,show, new, .....
To show the result in the frontend with pagination i have used following controller code:
...
public function suchfensterAction()
{
return $this->htmlResponse();
}
public function listAction(int $currentPage = 1): \Psr\Http\Message\ResponseInterface
{
$args=$this->request->getArguments();
$gefunden=$this->absolventenRepository->search($this->request->getArguments());
$itemsPerPage = 15;
$arrayPaginator = new \TYPO3\CMS\Extbase\Pagination\QueryResultPaginator($gefunden,
$currentPage, $itemsPerPage);
$pagination = new SimplePagination($arrayPaginator);
$this->view->assignMultiple(
[
'paginator' => $arrayPaginator,
'pagination' => $pagination,
'pages' => range(1, $pagination->getLastPageNumber()),
]
);
return $this->htmlResponse();
}
...
and the templates suchfenster.html
<f:form action ="list" >
<f:form.textfield autofocus ="1" name="query" value="{queryvalue}" placeholder = '{text}' />
<f:form.submit value="Suchen"/><br>
</f:form>
...
und list.html
...
<table>
<f:for each="{paginator.paginatedItems}" as="item" iteration="iterator">
<tr><f:render partial="Item.html" arguments="{item:item}" /></tr>
</f:for>
</table>
<f:render partial="Paginator.html" arguments="{pagination: pagination, pages: pages,
paginator: paginator}" />
...
My Paginator.html:
<ul class="pagination pagination-block">
<f:if condition="{pagination.previousPageNumber} &&
{pagination.previousPageNumber} >= {pagination.firstPageNumber}">
<f:then>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: 1})}" title="{f:translate(key:'pagination.first')}">
<i class="material-icons">first_page</i>
</a>
</li>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.previousPageNumber})}" title="{f:translate(key:'pagination.previous')}">
<i class="material-icons">chevron_left</i>
</a>
</li>
</f:then>
<f:else>
<li class="disabled"><i class="material-icons">first_page</i></li>
<li class="disabled"><i class="material-icons">chevron_left</i></li>
</f:else>
</f:if>
<f:for each="{pages}" as="page">
<li class="{f:if(condition: '{page} == {paginator.currentPageNumber}', then:'active', else:'waves-effect')}">
{page}
</li>
</f:for>
<f:if condition="{pagination.nextPageNumber} && {pagination.nextPageNumber} <= {pagination.lastPageNumber}">
<f:then>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.nextPageNumber})}" title="{f:translate(key:'pagination.next')}">
<i class="material-icons">chevron_right</i>
</a>
</li>
<li class="waves-effect">
<a href="{f:uri.action(action:actionName, arguments:{currentPage: pagination.lastPageNumber})}" title="{f:translate(key:'pagination.last')}">
<i class="material-icons">last_page</i>
</a>
</li>
</f:then>
<f:else>
<li class="disabled"><i class="material-icons">chevron_right</i></li>
<li class="disabled"><i class="material-icons">last_page</i></li>
</f:else>
</f:if>
</ul>
Where I have to control the argument 'currentPage'? bzw. where I have to increment 'currentPage'?
The code is doing the pagination correctly, however, I am unable to use the boostrap class that shows the active page
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
#{
if (ViewBag.PageNumber> 1)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber- 1 })">«</a>
}
else
{
<a class="page-link disabled">«</a>
}
}
</li>
#{
var currentPage= ViewBag.PageNumber;
for (var i = 1; i <= ViewBag.totalCount; i++)
{
<li #(currentPage== i ? "class= page-item active" : "")>
<a class="page-link" href="#Url.Action("Index", "Boats", new {search= ViewBag.searchData, pageNumber= i})">#i</a>
</li>
}
}
<li>
#if (ViewBag.PageNumber< ViewBag.totalCount)
{
<a class="page-link" href="#Url.Action("Index", "Boats", new { search= ViewBag.searchData, pageNumber= ViewBag.PageNumber+ 1 })">»</a>
}
else
{
<a class="page-link disabled">»</a>
}
</li>
</ul>
</div>
The part that should show the active item is this, but for some reason, this class is not working
<li #(currentPage== i ? "class= page-item active" : "")>
HTML output:
As can be seen in HTML, the class is called, but it doesn't pass anything to it...
<div class="page-nation">
<ul class="pagination pagination-large">
<li>
<a class="page-link" href="/Barcos?numeroPagina=1">«</a>
</li>
<li>
<a class="page-link" href="/Boats?pageNumber=1">1</a>
</li>
<li class="page-item" active="">
<a class="page-link" href="/Boats?pageNumber=2">2</a>
</li>
<li>
<a class="page-link disabled">»</a>
</li>
</ul>
</div>
You're not adding quotes to the class property value, adding quotes will make your HTML render properly:
<li #Html.Raw(currentPage== i ? "class=\"page-item active\"" : "")>
I'm having a problem implementing a toolbar for kendo grid. The problem is a partial view used to load a left-sided menu for a specific module in the website application.
So far, I have not been able to work around this, thus I'm asking here for help.
This is what the grid looks like without the left menu:
This is what the grid looks like with the left menu:
So far, this is what the menu code has:
<nav class="navbar navbar-default navbar-left" style="margin:0px; padding:0px; border-color:lightgray;">
<div class="collapse navbar-collapse" style="margin:0px; padding:0px;">
<ul class="nav navbar-">
#if (Request.IsAuthenticated)
{
<li>
<a href="#Url.Action("Index", "FicheiroIdqa")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Ficheiros Idqa
</a>
</li>
<li>
<a href="#Url.Action("Index", "ZaPe")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> ZaPes
</a>
</li>
<li>
<a href="#Url.Action("Index", "LocalColheita")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Locais Colheita
</a>
</li>
<li>
<a href="#Url.Action("Index", "FamiliaParametro")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Famílias Parâmetro
</a>
</li>
<li>
<a href="#Url.Action("", "")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Editais
</a>
</li>
<li>
<a href="#Url.Action("Index", "Resultados")">
<span class="fa fa-circle" style="font-size:8px; vertical-align:middle;"></span> Export. Resultados
</a>
</li>
}
</ul>
</div>
And this is the code in the view, where I am calling the partial with the menu:
#model List<INL.InLabLimsAqua.OnlineResults.WebApp.ViewModels.FicheiroIdqaViewModel>
#{ ViewBag.Title = "Ficheiros Idqa"; }
<h5>#Html.ActionLink("Ersar", "Index", "Ersar") > #ViewBag.Title</h5>
<hr />
<div class="col-md-2" style="padding-left:0px; width:200px;">
#Html.Partial("~/Views/Ersar/_ErsarMenu.cshtml")
</div>
<div class="col-md-offset-1" style="padding-left:95px;">
...
grid configuration
...
</div>
I think the problem resides in the fact that the toolbar is being loaded in the same row as the left menu, and it pushes it down with its height.
Any help to fix this would be much appreciated.
I'm trying to make a website using asp.net mvc 4 and EF 6 where I want to update the messagebox of adminpanel if any user sends him any message. I'm using SignalR for live notification but I'm new to SignalR and for some reason I don't get the updates live, I've to refresh the page to get the newly added message. Here are my codes,
Hub Class
public class ChatHub : Hub
{
MyProj.Models.MsgToOwner messages = new MyProj.Models.MsgToOwner();
public void SendNotify(string username, string title, string datetimeNow)
{
var newName = messages.name;
var newTitle = messages.title;
var newTime = messages.addedtime;
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
context.Clients.All.getNotify(newName, newTitle, newTime);
}
}
View for All Messages
#{
var MsgList = (List<MyProj.Models.MsgToOwner>)ViewBag.MsgList;
}
<body>
<script src="~/Scripts/jquery.signalR-1.1.4.min.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/LiveScript.js"></script>
<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" id="newItem">
#foreach (var item in MsgList)
{
<li>
<a href="#">
<div>
<strong>#Html.DisplayFor(modelItem => item.title)</strong>
<span class="pull-right text-muted">
<em>#Html.DisplayFor(modelItem => item.addedtime)</em>
</span>
</div>
<div>Sent By : <strong>#Html.DisplayFor(modelItem => item.name)</strong></div>
</a>
</li>
<li class="divider"></li>
}
</ul>
</li>
</ul>
</body>
LiveScript.js (script for updating from SignalR)
$(function () {
var chat = $.connection.chatHub;
chat.client.getNotify = function (username, title, datetimeNow) {
$('#newItem').append(
'<li><div><strong>' + htmlEncode(title) + '</strong><span class="pull-right text-muted"><em>' + htmlEncode(datetimeNow) + '</em></span></div><div>Sent By : <strong>' + htmlEncode(username) + '</strong></div></li><li class="divider"></li>');
};
$.connection.hub.start().done(function () {
$('#btnSend').click(function () {
chat.server.SendNotify($('#getName').val(), $('#getTitle').val(), $('#getDate').val());
});
});
});
I must be doing something wrong here but I can't figure it out since I'm new to SignalR. How can I update the messagebox whenever a new message is saved in db? Any guidance will be helpful for me. Thanks.
I try to build a simple blog application with knockout.js and rails.
(knockout v1.3 beta, knockout mapping plugin v2.0.2)
<h3>Posts</h3>
<ul data-bind="foreach: posts">
<li>
<input data-bind="value: title" />
</li>
</ul>
<script>
var posts = ko.mapping.fromJSON('<%= #posts.to_json.html_safe %>');
ko.applyBindings(posts);
</script>
this displays alle the posts from a rails app, no problem so far.
but now i want to add a custom event to the posts, e.g. a remove event.
i tried this:
<h3>Posts</h3>
<ul data-bind="foreach: posts">
<li>
<input data-bind="value: title" />
</li>
</ul>
<script>
var posts = ko.mapping.fromJSON('<%= #posts.to_json.html_safe %>', { remove: function() {
alert('working');
});
ko.applyBindings(posts);
</script>
but i get an error "remove is not defined"
any ideas?
you could just add the function to the posts viewModel, like this:
var posts = ko.mapping.fromJSON('<%= #posts.to_json.html_safe %>');
posts.remove = function() { alert('working'); }