I'm developing a pagination using MVC 3.0 with code below. All good except how do I populate re-generate the pagination numbers when user selects 5 and then clicks on Next button:
1 2 3 4 5 Next
When user clicks on Next the pagination should look like below:
Prev 2 3 4 5 6 Next
The code look like below
<ul class="pagination-clean">
<% if (ViewData.HasPreviousPage)
{ %>
<li class="previous">« Previous</li>
<% }
else
{ %>
<li class="previous-off">« Previous</li>
<% } %>
<%for (**int page = 1; page <= ViewData.TotalPages; page++**)
{
if (page == ViewData.PageIndex)
{ %>
<li class="active"><%=page.ToString()%></li>
<% }
else
{ %>
<li><%=page.ToString()%></li>
<% }
}
if (ViewData.HasNextPage)
{ %>
<li class="next">Next »</li>
<% }
else
{ %>
<li class="next-off">Next »</li>
<% } %>
</ul>
Is this the custom pagination that you have developed? Have you tried using jqGrid? It has direct binding with the controller action to retrieve the data and it's own pager control. You can explore it. Page number and other parameters will be automatically updated
Related
I'm currently working on a menu for an hexo.io site using data from a YAML file and EJS. My point is to generate a menu with sections and subsections directly from the data included in the YAML file.
The yaml file in _data/menu.yml
sections:
Section1:
Section2:
section1:
Activate:
url: /activate
First steps:
url: /first-steps
My ejs file
<% for (var section in site.data.menu.sections) { %>
<ul>
<li>
<%= section %>
<% for (var i in site.data.menu.section) { %>
<ul>
<li><%= i %></li>
</ul>
<% } %>
</li>
</ul>
<hr>
<% } %>
My goal is to reuse the section variable in the second loop so that I can get a menu displaying :
Section1
Activate
First steps
Section2
Until now, I couldn't find how to properly insert this variable in the loop conditions. And I do not wish to hard code section names in the second loop.
Thanks for your input.
Found a way to do it unifying everything. it could still be optimised but works for me so I post it in case others have the same issue:
YAML
sections:
section1:
title: Section 1
sub:
Activate: /activate
First steps: /first-steps
section2:
title: Section 2
EJS
<% for (var i in site.data.menu.sections) { %>
<ul>
<li>
<%= site.data.menu.sections[i].title %>
<% for (var j in site.data.menu.sections[i].sub) { %>
<ul>
<li><%= j %></li>
</ul>
<% } %>
</li>
</ul>
<hr>
<% } %>
How can I convert this to ASP.NET?
Or how can I convert ASP to Razor, what will I add or remove and what are the things to remember while converting ASP to Razor or reverse.
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<PopulatingDDLusingEF.ViewModels.IndexViewModel>" %>
<%# Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<PopulatingDDLusingEF.ViewModels.IndexViewModel>" %>
In Razor you should use #Model keyword
#model PopulatingDDLusingEF.ViewModels.IndexViewModel
#{
ViewBag.Title = "Result";
Layout = "~/Views/Shared/Site.Master";
}
This is an example how to convert ASP syntax to razor syntax which i got from Marcind's post
<% if(someCondition) { %>
<ol>
<% foreach(var item in Model) { %>
<li><%: item.ToString() %></li>
<% } %>
</ol>
<% } %>
Can be expressed as follows in Razor:
#if(someCondition) {
<ol>
#foreach(var item in Model) {
<li>#item.ToString()</li>
}
</ol>
}
Also check this for a quick useful Razor reference
I have a partial which returns results from the Amazon-ecs API (searches for books). It takes about 2.5 seconds to return values, so I want to add a spinner (and ideally hide the search button) but I've had a tough time getting it to work.
I already have javascript refreshing the partial with the results. I'd just like the button to give me a spinner (and hide the search button) until the partial finishes reloading.
Here is my main view (index.html.erb) which renders a partial of search results, each of which is added temporarily as an object in AmazonItems:
<%= form_tag amazon_items_path, :method => :get, :remote => true do %>
<p>
<%= text_field_tag :query, params[:query] %>
<span id="spinner" style="display:none">
<%= image_tag 'ajax-loader.gif' %>
</span>
<span id="search_button">
<%= submit_tag "Search" %>
</span>
</p>
<% end %>
<h1>Searching Amazon</h1>
<div id="amazon_returned">
<%= render 'amazon_returned' %>
</div>
My only JS code is in the update.js.erb file, which looks like:
$("#amazon_returned").html("<%=j render 'amazon_returned' %>");
I'm sure this is easy, but I can't get it work. Thanks!
EDIT: my partial "_amazon_returned.html.erb" looks like
<table>
<% for amazon_item in #amazon_items %>
<td> amazon_item.title </td>
...ETC...
<% end %>
</table>
You can hook into the before event to do this:
$(function() {
$("form").on("ajax:before", function() {
$("#spinner, #search_button").toggle();
});
});
Then, in your update.js.erb, add this again to toggle them back:
$("#spinner, #search_button").toggle();
Went with Dylan's answer, added the toggle to the update.js.erb and inserted the following into the view:
<script>
$(function() {
$("#search_button").click(function() {
$("#spinner, #search_button").toggle();
});
});
</script>
Very cool! Thanks again for the help.
I am sorry for my bad english. I just try to description my question. :)
I have an application layout that have a yield for display post in body. I have another yield :footerpost3 for display title of recent post on the footer.
When I in localhost:3000, the yield :footerpost3 display a recent of title correctly. but when i am click a post link, which is the url is localhost:3000/posts/3, the yield :footerpost3 display nothing.
Here is my code:
app/views/layout/application.html.erb
<!-- begin footer comment widget -->
<div class="footer_list widget_recent_comments">
<div class="title"><h5>Artikel Terkini</h5></div>
<%= yield :footerpost3 %>
</div>
<!-- end footer comment widget -->
app/views/store/index.html.erb
<% content_for :footerpost3 do %>
<% #postsMain.each do |dopostAll| %>
<div class="entry">
<ul>
<li class="recentcomments"><%= link_to dopostAll.title, dopostAll %></li>
</ul>
</div>
<% end %>
<% end %>
i hope my question is easy to understand.. :)
Looks like your root url is stores#index .
You must be initializing #postsMain in the stores#index action and generating the content_for footerpost3 in stores/index.html.erb.
When you click on a post, you will be taken to posts#show page. So you have to initialize #postsMain even in posts#show action and generate the content for footerpost3 even in posts/show.html.erb
The answer is there in your question. You are defining the "content for" footerpost3 in that block, which exists in index.html.erb. When you're on /posts/3, index.html.erb is not rendered, but rather show.html.erb is.
To solve this, you'd need to add the content in the show.html.erb template as well.
You could solve this in multiple ways. Using nested layouts would be one. For example, you might create a posts layout at app/views/layout/posts.html.erb, like so:
<% content_for :footerpost3 do %>
<% #postsMain.each do |dopostAll| %>
<div class="entry">
<ul>
<li class="recentcomments"><%= link_to dopostAll.title, dopostAll %></li>
</ul>
</div>
<% end %>
<% end %>
<%= render :file => 'layouts/application' %>
In this way, all the views of your PostsController would use this layout, which simply adds your footer content, then renders the application_layout.
I need to modify the default editor template for scaffolding but I havent found the Object.cshtml template, where can I find the default razor Object.cshtml Editor template?
The following blog post describes how to customize the editor templates: http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-4-custom-object-templates.html
Basically you have to add a file named Views\Shared\EditorTemplates\Object.cshtml and put all the logic for displaying the object there.
When #marcind says they're compiled in, the templates themselves are not embedded but are rather written in code. For example, EditorFor calls TemplateFor which may call TextAreaExtensions.TextArea or one of many other extensions which generate the code that is ultimately output. This may be because the we have the option of removing the default view engine and using something like nhaml.
The mapping between the template names and the function creating the resulting output can be seen in System.Web.Mvc.Html.TemplateHelpers. See also System.Web.Mvc.Html.DefaultEditorTemplates.
The closest thing that exists right now are the Webforms templates that exist in Mvc3Futures which are available on the aspnet.codeplex.com website. Within it exists an DefaultTemplates\EditorTemplates folder that contains the templates.
Here's the Object.ascx template:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<script runat="server">
bool ShouldShow(ModelMetadata metadata) {
return metadata.ShowForEdit
&& metadata.ModelType != typeof(System.Data.EntityState)
&& !metadata.IsComplexType
&& !ViewData.TemplateInfo.Visited(metadata);
}
</script>
<% if (ViewData.TemplateInfo.TemplateDepth > 1) { %>
<% if (Model == null) { %>
<%= ViewData.ModelMetadata.NullDisplayText %>
<% } else { %>
<%= ViewData.ModelMetadata.SimpleDisplayText %>
<% } %>
<% } else { %>
<% foreach (var prop in ViewData.ModelMetadata.Properties.Where(pm => ShouldShow(pm))) { %>
<% if (prop.HideSurroundingHtml) { %>
<%= Html.Editor(prop.PropertyName) %>
<% } else { %>
<% if (!String.IsNullOrEmpty(Html.Label(prop.PropertyName).ToHtmlString())) { %>
<div class="editor-label"><%= Html.Label(prop.PropertyName) %></div>
<% } %>
<div class="editor-field"><%= Html.Editor(prop.PropertyName) %> <%= Html.ValidationMessage(prop.PropertyName, "*") %></div>
<% } %>
<% } %>
<% } %>