I'm using a editor template for a object called Address.
#Html.EditorFor(model => model.Address)
In the template I have a few text boxes for the information about the user address.
this is how the text boxes are written in template
<p class="clear">
<label for="zip">
<span>#Html.LabelFor(x => x.ZipCode)</span>
#Html.TextBoxFor(m => m.ZipCode, new { #class = "big zip" })
</label>
</p>
but when it's rendered they broke my CSS putting
<div class="editor-label"> AND <div class="editor-field">
in the place of my paragraph tags.
There's any way I could change that?
I don't think your editor template is actually being used. Those are the default template values. You will have to provide some more information about your template in order to help. Where is it located? What is it called? etc.. (update your question, don't add this information as a comment)
What you would normally do is have a file called Address.cshtml and place this in a folder called EditorTemplates, either in the same folder as the view you are referencing, or in the Shared views folder if you need to share this template across various folders.
You should also add an #model Addresss (or whatever the fully qualified namespace is).
BTW, you are two labels being generated. That's not semantically correct.
Although not with Razor syntax, this article from Brad Wilson explains display/editor templates pretty well
Related
I'm building a database-driven web application, heavy CRUD stuff, such as creating, editing, and displaying people's contact information and other related data. Most information out there seems to be focused on how to design Bootstrap forms for inputting/editing data, but not much out there about proper read-only (i.e. data "display") layouts.
For example, I could do something like this:
<div class="form-group">
<label class="control-label col-md-3">First Name</label>
<div class="col-md-9 form-control-static">
#Html.DisplayFor(model => model.FirstName)
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Last Name</label>
<div class="col-md-9 form-control-static">
#Html.DisplayFor(model => model.LastName)
</div>
</div>
... and so on (for all profile properties). But this kind of a layout seems more typical/appropriate for create and edit screens with actual form controls.
I'm just wondering if there are good examples of applications (GitHub or elsewhere), of nice semantic layouts using consistent Bootstrap components, with standard-based, accessible HTML, that someone can point me to.
In addition to the simple First & Last Name scenario above, you can imagine a ton of other "person" related properties (address, email(s), phone(s), etc.). Just looking for something established to follow.
Consider using the description list element, dl. Bootstrap has styles for these and it is designed for creating lists of information:
<dl>
<dt>First Name<dt>
<dd>Jiveman</dd>
<dt>Last Name<dt>
<dd>Jivemanerson</dd>
<dl>
Bootstrap styles will target the element, so you do not need to add classes. However, you can add dl-horizontal to the dl element if you'd like to display things horizontally.
These elements also have default implicit ARIA tags for improved accessibly:
dl: role=list
dd: role=definition
dt: role=listitem
Could you provide me step by step how to create Bootstrap 3 Menu Navigation Bar and Breadcrumb using MVCSiteMap MVC5?
I've got problem when change this code to Bootstrap model
#model MvcSiteMapProvider.Web.Html.Models.MenuHelperModel
#using System.Web.Mvc.Html
#using MvcSiteMapProvider.Web.Html.Models
<ul id="menu" class="nav navbar-nav">
#foreach (var node in Model.Nodes)
{
<li>
#Html.DisplayFor(m => node)
#if (node.Children.Any())
{
#Html.DisplayFor(m => node.Children)
}
</li>
}
</ul>
what I want is, there is BootstrapMenuHelperModel that read mvcSiteMapNode transform into navigation menu.
You are likely having issues because you have only solved part of the CSS problem. There are 3 different templates that are used by the Menu and 2 of them are also used by other HTML helpers. For that reason, it might be a good idea to create named templates (as in the example answer below) to create separate templates for each HTML helper (Menu, SiteMapPath, SiteMap, etc). For each level of nodes, the Menu recursively calls the SiteMapNodeListHelper, which might not be producing the HTML that Bootstrap is expecting (depending on which of the nav options you are using).
See this answer for a starting point, and then you can modify the HTML and class attributes from there.
Keep in mind you can also use custom attributes to supply additional data (such as CSS class names) based on the node selected, or you can use the IsCurrentNode and IsInCurrentPath properties of the SiteMapNodeModel to determine if the current node is active, if needed.
Here is a tutorial how to style your Sitemap:
Tutorial
Install Bootstrap and apply the classes to the tutorial:
Nav Bootstrap
mvc4, razor viewengine. It would be useful if, when in debug mode, a snippet like this that includes a partial would leave a comment saying what partial it injected. Are there extensibility points that I just can't find? Obviously I could just type out this comment in the partial views, but that sounds like WAAYY too much work and isn't fun for anybody.
index.cshtml
<div class="somecontainer">
#foreach(var thing in Model.Things) {
Html.Partial("ThingPartial",thing)
}
</div>
ThingPartial.cshtml
#model ThingModel
<h1>#Model.Name<h1>
<p>#Model.Description</p>
would generate html like this
<!--razorView:things/index-->
<div class="somecontainer">
<!--partialView:ThingPartial-->
<h1>Name 1<h1>
<p>Description 1</p>
<!--partialView:ThingPartial-->
<h1>Name 2<h1>
<p>Description 2</p>
<!--partialView:ThingPartial-->
<h1>Name 3<h1>
<p>Description 3</p>
</div>
Motivation
I want my testers to be able to use the comments to write more accurate bug reports without my developers / me having to do anything extra!
What I have in my mind is something configurable in global.asax.cs, like so
ViewEngines.Engines.Clear();
RazorViewEngine viewEngineToAdd = new RazorViewEngine();
//I COMPLETELY MADE THIS LINE UP, THESE THINGS DON'T EXIST (but I want them to!
viewEngineToAdd.PreRender += (OutputStream,IView) => OutputStream.Write(#"<!--"+IView.Name+"-->")
ViewEngines.Engines.Add(viewEngineToAdd);
Try this:
<div class="somecontainer">
#foreach(var thing in Model.Things) {
Html.Raw("<!--" + thing + "-->");
Html.Partial("ThingPartial",thing)
}
</div>
I've found myself working on a .Net MVC3 project and sorely missing having Formtastic available in my rails apps.
Are there any good .Net MVC replacements for Formtastic?
I suggest using MVC3s HTML Helpers.
#model mynspace.MyModel
#Html.EditorForModel()
This html helper generates editor fields for every field in your model, choosing the most likely option. Editing the Editor template, you can change the way it is layed out as well. See this question on changing the template
It can of course be used more customizable by each field with things like:
#Html.Label("Daily Rate")
#Html.EditorFor(model => model.DailyRate)
#Html.ValidationMessageFor(model => model.DailyRate, "Please enter a valid Daily Rate (2 d.p.)")
This can be custom layed out by putting tags around it, i.e. things like <p> or <td>
You can also force an input type using options like:
#Html.TextBoxFor(model => model.DailyRate)
#Html.CheckBoxFor(model => model.DailyRate)
#Html.DropDownBoxFor(model => model.DailyRate, ViewBag.DailyRates)
see here for a full list of options
I have a project called FormFactory that lets you do much of the stuff formastic does http://formfactory.apphb.com/
It transforms model objects into PropertyVm objects, which are a viewmodel for an input basically. You could manually create the PropertyVms if you want.
I have the following code on my web pages:
<div class="rep_tb0" id="Activity" style="display:none;">
<div class="rep_tr0">
<div class="rep_td0" id="ActivityLog">Activity Log<br /><br /></div>
</div>
</div>
It's repeated for many pages and I would like to just code it once in one place. Can anyone tell me what are my options for doing this. Can I code an HTML Helper or is there a better / another way of doing this?
I think you need to use a partial in this case. Just create a .cshtml file and put that code in. Then call
#Html.Partial("PartialName");
Yes, build an HTML helper by creating an extension method. It's a lot easier than you think.
Check out this article:
http://weblogs.asp.net/jgalloway/archive/2011/03/23/comparing-mvc-3-helpers-using-extension-methods-and-declarative-razor-helper.aspx
Or this article:
http://www.asp.net/mvc/tutorials/creating-custom-html-helpers-cs