I'm just starting out with MVC, and I'm trying to build a sample, proof of concept page for mvc interaction with jquery-mobile. I've searched for an answer on this, but I don't think I know enough yet to formulate proper queries.
On my view, I am trying to generate output that functions like this (sampled from the jqm demo site) :
<ul data-role="listview" data-inset="true">
<li><a href="index.html">
<h3>Stephen Weber</h3>
<p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p>
<p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p>
<p class="ui-li-aside"><strong>6:24</strong>PM</p>
</a></li>
<li><a href="index.html">
<h3>jQuery Team</h3>
<p><strong>Boston Conference Planning</strong></p>
<p>In preparation for the upcoming conference in Boston, we need to start gathering a list of sponsors and speakers.</p>
<p class="ui-li-aside"><strong>9:18</strong>AM</p>
</a></li>
</ul>
So, I'm working it like this :
#foreach (var item in Model) {
<li>
#Html.ActionLink( LargeExpandedMultiContentText, "Edit", new { id = item.SysID })
</li>
}
My question, which I don't know a simple way of asking, is, how, in MVC terms, do I fill the variable, so that the href generated by ActionLink() matches the style I've sampled from the jqm website?
I've tried this, and while it almost works, I'm sure its not the 'right' way, especially when I get to a spot of pulling "Steven Weber" and other strings out the the item/Model...plus it encodes the text, but I'm sure there's a way to deal with that easy enough.
#foreach (var item in Model) {
<li>
#{ String txt = "<h3>Stephen Weber</h3><p><strong>You've been invited to a meeting at Filament Group in Boston, MA</strong></p><p>Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the jQuery team.</p> <p class=\"ui-li-aside\"><strong>6:24</strong>PM</p>";
}
#Html.ActionLink( txt, "Edit", new { id = item.SysID })
</li>
}
Thanks, I appreciate your help
Brian
I'm not sure it's possible to use Html.ActionLink to build such a complex action link. That said, the Html Helpers are just supposed to be helper functions to make your life easier by giving you shortcuts to render HTML in ways commonly required. You don't need to use them. In this case, I think instead you should use a normal html tag, and Url.Action to create the correct URL.
If you wanted to include this information within an enumerable model I'd probably do something like:
#foreach (var item in Model) {
<li><a href="#Url.Action(item.Action)">
<h3>#item.Name</h3>
<p><strong>#item.Title</strong></p>
<p>#item.Message</p>
<p class="ui-li-aside"><strong>#item.Time</strong>#item.TimePeriod</p>
</a></li>
}
Note: the function you were looking for to display contents without encoding them is #Html.Raw
In answer to my other 'half question' I found this resource...
http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx
I believe the "razor delegate" item there at the bottom would fit the need I had.
#{
Func<dynamic, object> b =
#<strong>#item</strong>;
}
#b("Bold this")
Related
I am using Dotclear blog software, which provide a widget for the blog categories with a resulting code looking like this:
<div class="widget categories ">
<h3>Catégories</h3>
<ul>
<li>Cat1</li>
<li>Cat2
<ul>
<li>Subcat1</li>
</ul>
</li>
<li>Cat3
<ul>
<li>Subcat2</li>
</ul>
</li>
<li>Cat4</li>
</ul>
</div>
What I am trying to achieve here is using the <a> tag (for Cat2 or Cat3) as header (or a dynamically added <h4> around it) and fold the subcategory list. If I call the accordion like this :
$(".categories").accordion({
header: "li:has(ul) > a",
});
the accordion does work, but when I click on the link it just folds/unfolds the item and doesn’t let me go to the link target (the category page, that is).
I tried wrapping the <a> in an <h4> tag and use that tag as header, but it doesn’t seem to make a difference. Is there a way to do what I seek or should I abandon the idea of collapsing subcategories and have functioning links within the header ?
Thanks for your time.
Well, after reading your comments, I realized I was using the wrong tool to achieve my objective. I have replaced jquery-ui’s accordion with a treemenu jQuery plugin which is actually made for my use. Sorry to have wasted your time and thanks for your kind answers.
I have a categories controller and a products controller. If the category is a type I reroute to the products page. I keep routing categories to get to subcategories in my controller but at a certain point there are no more subcategories and you have a type rather than a category. i was trying to copy the same logic from my layout which works fine. I've double checked all spelling errors.
<a class="navbar-brand" asp-area="" asp-controller="Categories" asp-action="Index">Eisen Manufacturing Network</a>
(note I added in the istype attribute to my categories model after. I changed the bind properties and the cshtml in order to alter the model)
How do I properly link to a separate controller? because the current method I'm trying below is not working. it takes me to the categories index even though I confirmed that the HTML went to else statement through the debugger.
{
#* #("~/img/"+item.CategoryName+".jpg") *#
<a asp-action="index" asp-route-name="#item.CategoryName">
<text>#item.CategoryName</text>
</a>
}
else
{
<a asp-area="" asp-controller="Products" asp-action="Index" asp-route-type="#item.CategoryName">
<text>#item.CategoryName</text>
</a>
} ```
This is resolved I'm just an idiot and didn't realize that I linked the text and an image below the if statement not shown above. had to use the same logic. works fine. stupid mistakes...
I have read a few articles as I was searching for a solution. They all seemed to favor a hard-coded or HTML Helper alternative; however, I wanted something simple and database driven. This is my best solution (submitted as an answer, by me).
Here are some other articles' solutions:
An easy way to set the active tab using controllers and a usercontrol in ASP.NET MVC?
asp.net mvc and css: Having menu tab stay highlighted on selection
ASP.NET MVC: Tabs ASCX - Adjust CSS class based on current page?
Just pass a TempData down from one of your controllers like this:
TempData("CurrentPage") = "Nutrition"
Then, in your View add a conditional like this:
<ul>
#For Each item In Model
Dim currentItem = item
If (Not String.IsNullOrEmpty(TempData("CurrentPage")) And TempData("CurrentPage") = currentItem.NAV_Element) Then
#<li><a class="current" href="#Html.DisplayFor(Function(modelItem) currentItem.NAV_Destination)">#Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</a></li>
Else
#<li>#Html.DisplayFor(Function(modelItem) currentItem.NAV_Element)</li>
End If
Next
</ul>
I have accomplished this in the past by using the route values to generate a href and then setting the parent tab to active based on that.
This is a bootstrap flavoured version:
<ul class="nav nav-tabs">
<li>Some page</li>
<li>Some other Page</li>
</ul>
<script type="text/javascript">
$(function(){
$('a[href="#Url.Action(ViewContext.RouteData.Values)"]').parents("li").addClass("active");
};
</script>
Si
I know I am too late to answer this but if you are using ASP MVC and looking for highlighting Menu items using controller and action, here is the solution which is working perfectly fine for me -
<li> <i class="fa fa-user-plus"></i> <span>Signup</span> </li>
I'm doing something like
#foreach (var item in Model)
<li id='pref#item.Id' >
..
the problem is that it's rendered as content 'pref#item.Id' the item.Id is not evaluated, anybody knows a way out of this ?
Razor thinks you're trying to render an email address. Try one of these two approaches:
<li id='pref#(item.Id)'>
<li id='<text>pref</text>#item.Id'>
See this handy quick reference by Phil Haack for more tips:
http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx
I'm trying the render an HTML list that looks like the following, using the Razor view engine:
<ul>
<li id="item_1">Item 1</li>
<li id="item_2">Item 2</li>
</ul>
The code that I am attempting to use to render this list is:
<ul>
#foreach (var item in Model.TheItems)
{
<li id="item_#item.TheItemId">Item #item.TheItemId</li>
}
</ul>
The parser is choking, because it thinks that that everything to the right of the underscore in the id attribute is plain text and should not be parsed. I'm uncertain of how to instruct the parser to render TheItemId.
I don't want to but a property on the model object that includes the item_ prefix.
I also have to keep this syntax as I am using the list with JQuery Sortable and with the serialize function that requires the id attribute to be formatted in this syntax.
You should wrap the inner part of the call with ( ):
<li id="item_#(item.TheItemId)">
How about using String.Format? like this:
<li id="#String.Format("item_{0}", item.TheItemId)">
I prefer:
<li id="#String.Concat("item_", item.TheItemId)">
The verbosity tells the support developers exactly what is happening, so it's clear and easy to understand.
You can even use this way to concat more strings:
<li id="#("item-"+item.Order + "item_"+item.ShopID)" class="ui-state-default"></li>
Here is another post.
Hope helps someone.
You can so this in a simpler way:
id="item_#item.TheItemId"
This post seems to be older but now this does works now in latest MVC:
id="item_#item.TheItemId"