I am new to ASP/MVC and I am having trouble figuring out how to link a div to a page in HTML markup. This is the current link in pure HTML. I want to accomplish this, but in razor syntax
<div class="col-md-2">
<a href="ambulance.html">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
I've been looking into action links, but if there is a better way to accomplish this, I'm open to it!
Possible duplicate. I'll add a bit of explanation that pertains to the question since it has to do with Razor:
What your backend developer needs is Url.Action helper. This will let you route the link through the MVC framework.
So say:
<div class="col-md-2">
<a href="#Url.Action("Cars", "Ambulance")">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
ASP.NET MVC: generating action link with custom html in it
Html.ActionLink method only creates anchor tags for some action method, you need Url.Action method. Using the rest of the markup is fine.
<div class="col-md-2">
<a href="#Url.Action("Index","Home")">
<div class="amb item">
<div class="tiletext">AMB</div>
<div class="tilesubtext">Ambulance</div>
</div>
</a>
</div>
Related
I'm sorry for what I think is a bad question. Would anyone have an example of how to create something like on the picture, so some sort of tiles, within MVC? This used to be available on https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/ but it isn't anymore, and I need to know how to create something like that but haven't been able to find it.
Any help would be appreciated even if it's just the correct name of the above!
It really doesn't matter too much if its in ASP, Java Spring or plain old HTML, this is more related to CSS and Bootstrap rather than ASP.NET MVC.
This is what I would do.
Open up your Views\Home\index.html and you can delete everything and paste something like below (which makes a good starting template) - grabbed from here.
#{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
You will get thumbnail style grid which you then need to refine (with CSS) to give it the look and feel that you're after (make you to read bootstrap's documentation).
You don't need to use MVC to create tiles. You can use CSS or Javascript. There are a number of JS/CSS libraries that will allow you to tile your HTML.
I'd post some here, but honestly you should probably just use google to find some js/css tile layout libraries so that you can find one that best fits your needs.
Previously to create Accordion controls I used to use this piece of code:
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
or as seen here: Bootplay Live Demo
Now I still want to use my example but in this page I have a for-each loop so I need to create these at run-time.
The items I need to put variables there in order for this to work are
id="accordionMessagesSetup"
data-parent="#accordionMessagesSetup"
href="#collapseMessagesSetup"
id="collapseMessagesSetup"
How can I initialize those in a for-each loop a mode using Razor?
Imagine you have whatever property you like to do it in the model.
The biggest issue you are/will likely run into is Razor parsing. When you try to use a Razor variable in the middle of some bit of text, often Razor cannot determine where the variable name ends. For example, if you were to do something like:
<div id="accordion#Model.IdMessageSetup">
Razor thinks it needs to look for a property on the model named IdMessageSetup, when actually, you just wanted Id. The easiest way to fix this is to wrap the variable in paranthesis:
<div id="accordion#(Model.Id)MessageSetup">
Now, it's clear which part is the variable. As far as adding the # sign goes, I'm not really sure what the confusion is there. You just put it where it needs to go:
<a href="#collapse#(Model.Id)MessagesSetup">
Nothing special required.
I'm redesigning an existing ASP.net mvc page, which displays multiple client objects on a single page.
The reason why, is so the page can save all the clients/edits on a single click.
However as I wrote this 18 months ago it feels like their should be a better way to do it, as I have to use a FormBinder to map\save the objects, which is not pretty.
For example, I've started to use bootstrap tabs, each tab is a client and contains the details
<ul class="nav nav-tabs">
#foreach (var client in Model.Clients)
{
<li><a data-target="##client.ClientId" data-toggle="tab" href="##client.ClientId"><i class="fa fa-star"></i> #client.Name</a></li>
}
</ul>
<div class="tab-content">
#foreach (var client in Model.Clients)
{
<div class="tab-pane" id="#client.ClientId">
<div class="form-horizontal" role="form">
<div class="form-group">
<label for="#client.Name" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
#Html.TextBoxFor(model => client.Name, new { #class = "form-control", tabindex = "1"})
</div>
</div>
</div>
</div>
}
</div>
Is their a better, easier way to do this?
Ideally I don't want to use a form binder as well?
Thoughts? Examples?
I will say that as far as load time goes, Angular is going to help you a lot here. In your example, you will be loading the html for all of those tags once for each client. Angular would only load it once as a template, and duplicate the html on the client.
The angular equivalent would be something like this...
<div class="tab-content" ng-controller='ClientCtrl">
<div class="tab-pane">
<div class="form-horizontal" role="form">
<div class="form-group" ng-repeat="client in clients">
<label for="clientName" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input name='clientName' type='text' class='form-control' tabindex='1'>{{client.Name}}</input>
</div>
</div>
</div>
</div>
</div>
Granted, you'd have to do some work to implement the controller, but it's easy enough to do.
The benefits are that the scope is handling all of your ID's, so there is no need to keep track of any of that yourself. In some ways Angular is a difficult transition to learn, but once you do, it makes managing the code SO much easier.
I have page containig partial views
<div class="window">
<div id="progress" class="progress">
</div>
#*<div id="tlv-dialog-content" >*#
<form id="___iskadetails">
<div id="iska-general-details">
#Html.Partial("_workGeneralDetails_EditForm", Model)
</div>
</form>
<div id="tabstrip" class="tabstrip">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
each partial in the tabstrip contain different model
i want to load the partial view after spacific ajax im doing in the client side
in the document.ready
what is the best way to do it
Use the JQUERY UI tab and load different Partial view with their model.
pls look following links that will help you.
http://kevgriffin.com/using-jquery-tabs-and-asp-net-mvc-partial-views-for-ajax-goodness/
http://ericdotnet.wordpress.com/2009/03/17/jquery-ui-tabs-and-aspnet-mvc/
I have the following _Layout.cshtml page that has a bunch of #Html.Action() calls to several partial views.
<div class="wrapper">
<div class="header">
<a style="text-decoration:none;" href="#Url.Action("Index", "Home")"><div class="logo"><p>fisharwe</p><span class="greenText float-right">:</span></div></a>
<div class="searchBar">
#Html.Action("Search", "Item")
</div>
<div id="hearGreenBar"></div>
</div>
<div class="pageContent">
#RenderBody()
</div>
<div class="rightColumn">
<div id="help">
<div id="allHelpContent">
<span id="helpIcon"></span> <span id="helpTitle">help</span> <span id="helpArrow"></span>
</div>
</div>
<div id="userPanel">
#if(!Request.IsAuthenticated)
{
<div id="loginForm">#Html.Action("Login", "User")</div>
<div id="registerForm">#Html.Action("Register", "User")</div>
<hr class="greyLine" />
<div id="recentlyViewedItems">
<div id="recentItemsTitle">
<span class="recentItemsIcon"></span><span class="theRecentTitle">Recently Viewed</span>
</div>
</div>
}
else
{
<div id="userInfoSummary">#Html.Action("Summary", "User")</div>
}
</div>
</div>
</div>
At the top you can see the #Html.Action("Seach", "Item") call which renders a search bar and allows users to search for items/categories/sub-categories...etc. I got this working now, but it generated a new problem! When the user searches for something, and the results are rendered, the Login and Register partials in the sidebar (userPanel) are displaying validation errors such as "Email cannot be empty". I understand that the View is rendered regardless of what partial posted back but there has to be a way to prevent that from happening... Do I have to get rid of partials and render everything into the _Layout.cshtml page? But in that case I need to make this page typed which will cause yet another issue... So what can be done? I'm open to any suggestions...
Thank you.
Do you have different forms for the search and what is in the "userPanel"?. You may want to make sure your search is doing a get and not a post.
#using (Html.BeginForm("Search", "YourController", FormMethod.Get))