My code is in ASP.Net mvc4 . in this only label is coming not data.
<div class="display-label">
#Html.DisplayNameFor(model => model.Leader.Name)
</div>
<div class="display-field">
<!-- #Html.DisplayFor(model => model.Leader.Name) --->
#Html.DisplayFor(model => model.Leader.Name )
</div>
use Bootstrap responsive UI...
http://www.google.co.in/url?sa=t&rct=j&q=bootstrap&source=web&cd=4&cad=rja&ved=0CEUQjBAwAw&url=http%3A%2F%2Ftwitter.github.com%2Fbootstrap%2Fcomponents.html&ei=Zfn0ULnWN8btrAegsoHoCQ&usg=AFQjCNEGD-rO2TzedFvBGlLrxLrPVxbjQA&bvm=bv.41018144,d.bmk
you can use the following..
if you only want to display then use #Model.Leader.Name and if you want to allow user to change this value use #Html.TextBoxFor(
<div class="display-label">
#Html.DisplayNameFor(model => model.Leader.Name)
</div>
<div class="display-field">
#Model.Leader.Name
</div>
<div class="display-field">
#Html.TextBoxFor(model => model.Leader.Name)
</div>
Hope this helps !
Related
I have a standardised form layout like this:
<div class="ContentSection">
<div class="ContentSection__content">
<form class="Form form" method="post">
#Html.AntiForgeryToken()
<div class="Form__editors">
#Html.HiddenFor(i => i.Id)
<div class="panel panel-default">
<div class="panel-heading">
Publishing
</div>
<div class="panel-body">
#Html.EditorFor(x => x.PublishOptionsEditor)
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Content
</div>
<div class="panel-body">
#Html.EditorFor(x => x.Title)
#Html.EditorFor(x => x.Slug)
#Html.EditorFor(x => x.OneLiner)
#Html.EditorFor(x => x.HtmlContent)
#Html.EditorFor(x => x.CustomMetaTitle)
#Html.EditorFor(x => x.CustomMetaDescription)
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Primary Image
</div>
<div class="panel-body">
#Html.EditorFor(x => x.PrimaryImageEditor)
</div>
</div>
#Html.Partial("_FormControls", "Save")
</div>
</form>
</div>
</div>
...where the only bit that changes is this, in the middle:
#Html.EditorFor(x => x.Title)
#Html.EditorFor(x => x.Slug)
#Html.EditorFor(x => x.OneLiner)
#Html.EditorFor(x => x.HtmlContent)
#Html.EditorFor(x => x.CustomMetaTitle)
#Html.EditorFor(x => x.CustomMetaDescription)
Is there a recommended way to standardise the surrounding layout for different models?
I don't think I can use a #helper because of the model typing and #Html.EditorFor content.
#RenderSection can only be called in the master layout and I don't want to create a new master view just for this.
The ViewModels all implement an interface, that I can use with PartialViews, but I'd like to make use of the DataAnnotations that I have on each specific ViewModel and I don't know how to do this.
I feel there may be an obvious way to do this that I am overlooking.
This question already has answers here:
Label and text box on the same line using css
(4 answers)
Closed 5 years ago.
my label appears on top and below it input box is displayed i want both on the same line.
<fieldset>
<legend style="color:red">Enter Details</legend><br />
<div style="color:red">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field" style="color:InfoBackground">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</div><br/>
<div class="editor-field" style="color:red">
#Html.LabelFor(model => model.Country)
</div>
<div class="editor-field" style="color: InfoBackground">
#Html.EditorFor(model => model.Country)
#Html.ValidationMessageFor(model => model.Country)
</div><br/>
<div class="editor-label" style="color:red">
#Html.LabelFor(model => model.Mobile_Number)
</div>
<div class="editor-field" style="color: InfoBackground">
#Html.EditorFor(model => model.Mobile_Number)
#Html.ValidationMessageFor(model => model.Mobile_Number)
</div><br/>
<div align="center"><input type=submit" value="submit" /></div>
</fieldset>
what changes must be done.Please help!!!
As you know that the Div's are by default display:block.So if you want to show you lable or input etc inline then update that div style .Apply the following style to your div to you want to show in line.
style="display:inline-block;"
You have you label wrapped in a div. Div's are default display:block. That means they forces a new line.
Easiest thing to do is to place your #Html.LabelFor and #Html.EditorFor inside the same div and change your css to get the effect you want.
Can I insert html designing/code with this Razor CSHTML code in same page?
#model project_final.Models.Bike
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
#<legend>Bike</legend>
#<div class="editor-label">
#Html.LabelFor(model => model.Id)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Id)
#Html.ValidationMessageFor(model => model.Id)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Color)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Color)
#Html.ValidationMessageFor(model => model.Color)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
Yes, you can.
Just beware of what is the code that need to have # in Razor engine, and what is html tag don't need the # like what #Stephen Muecke mentioned.
#Bike does not need the # in front of it because is html tag. Or I make a simple statement that
# never stick with <, if you found #< in your ASP.Net View, it must be a
mistake
Read the Introduction to ASP.NET Web Programming Using the Razor Syntax (C#), may be you can know more things about Razor.
By the way , you might need to read the post How can I add a class attribute to an HTML element generated by MVC's HTML Helpers? to modified the class of the HTML helper such as #Html.LabelFor
#Html.LabelFor(model => model.Id, new { #class = "col-md-2 control-label" })
Im trying to use Foundation grid in my application but I cannot simply center the fieldset. I try to put in the center of the screen on mobile device and desktops, but it just looks weird. Any idea why?
Please, note that Im new to Foundation and I have no experience with Bootstrap
Code below:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="row">
<div class="large-6 large-centered columns">
<fieldset>
<legend>Logging into Review Platform</legend>
<div class="editor-label">
#Html.LabelFor(model => model.UserName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.UserName)
#Html.ValidationMessageFor(model => model.UserName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Password)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Password)
#Html.ValidationMessageFor(model => model.Password)
</div>
<p>
<input type="submit" value="Login" class="button" />
</p>
</fieldset>
</div>
</div>
}
A repeat and edit of my comment on the original question:
Are you wanting full width on mobile and centered on desktop? I do this quite often with something like:
.small-12.large-6.large-centered.columns
or you can do something like
.small-10.small-centered.large-6.columns
You don't need the large-centered because it inherits it from the small-centered class. If you want the larger grid to not be centered, use .large-uncentered
I want to create a control for allowing user to show/hide a div box at home page from admin site using ASP.NET MVC4. For example, if the user select to disable div box from admin site, the div box will be disappear when he go back to home page and same thing for showing div box as well.
I had been searching the whole day for the correct answer but still didn't find out the best answer yet. And I really have no idea how to link between admin site and home page.
The following is my admin page:
<div class="section-header">
<div class="title">
<img src="#Url.Content("~/Administration/Content/images/ico-configuration.png")" alt="" />
#T("Manage LoginBox")
</div>
<div class="options">
<input type="submit" name="save" class="t-button" value="#T("Admin.Common.Save")" />
</div>
</div>
<script type="text/javascript">
#*$(document).ready(function () {
$("##Html.FieldIdFor(model => model.EnableLoginBoxAtHomePage)").click(toggleLoginBoxEnabled);
toggleLoginBoxEnabled();
});*#
function toggleLoginBoxEnabled() {
if ($('##Html.FieldIdFor(model => model.EnableLoginBoxAtHomePage)').is(':checked')) {
Response.Write("Surprise");
$('#pnlShowLoginBoxAtHomePage').show();
}
else {
$('#pnlShowLoginBoxAtHomePage').hide();
}
}
function toggleLoginBoxDisabled() {
if ($('##Html.FieldIdFor(model => model.DisableLoginBoxAtHomePage)').is(':checked')) {
$('#pnlHideLoginBoxAtHomePage').hide();
}
else {
$('#pnlHideLoginBoxAtHomePage').show();
}
}
</script>
#Html.ValidationSummary(false)
<table class="adminContent">
<tr id="pnlShowLoginBoxAtHomePage" onclick="toggleLoginBoxEnabled">
<td class="adminTitle">
#Html.LabelFor(model => model.EnableLoginBoxAtHomePage)
</td>
<td class="adminData">
#Html.EditorFor(model => model.EnableLoginBoxAtHomePage)
#Html.ValidationMessageFor(model => model.EnableLoginBoxAtHomePage)
</td>
</tr>
<tr id="pnlHideLoginBoxAtHomePage" onclick="toggleLoginBoxDisabled">
<td class="adminTitle">
#Html.LabelFor(model => model.DisableLoginBoxAtHomePage)
</td>
<td class="adminData">
#Html.EditorFor(model => model.DisableLoginBoxAtHomePage)
#Html.ValidationMessageFor(model => model.DisableLoginBoxAtHomePage)
</td>
</tr>
</table>
}
And this is the div box that I want to show/hide at home page:
<div class="block block-loginbox" >
<div class="title">
<strong>#T("Login")</strong>
</div>
<div class="clear">
</div>
<div class="listbox" #*id="myloginbox"*#>
<fieldset class="form-fields returning-wrapper">
<legend>#T("Account.Login.ReturningCustomer")</legend>
<dl>
#using (Html.BeginForm("Login","Customer"))
{
<dd class="message-error">
#Html.ValidationSummary(true, T("Account.Login.Unsuccessful").Text)
</dd>
<dt>
#Html.LabelFor(m => m.Email): </dt>
<dd>
#Html.TextBoxFor(m => m.Email, new { #class = "email", autofocus = "autofocus" })
#Html.ValidationMessageFor(m => m.Email)
</dd>
<dt>
#Html.LabelFor(m => m.Password): </dt>
<dd>
#Html.PasswordFor(m => m.Password, new { #class = "password" })
#Html.ValidationMessageFor(m => m.Password)
</dd>
<dd>
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
</dd>
<dd class="forgot-password">
#Html.RouteLink(T("Account.Login.ForgotPassword").Text, "PasswordRecovery")
</dd>
<dd class="buttons">
<input class="button-1 login-button" type="submit" onclick="location.href='#registerUrl'" value="#T("Account.Login.LoginButton")" />
</dd>
}
</dl>
</fieldset>
<div class="clear">
</div>
</div>
</div>
It seems you somewhat misunderstood the concept of web sites. Your pages shouldn't (and definitely CAN'T) communicate together. Every time you ask for a page, you get a new instance, unless it's specified as static and ... no no no, let's leave it at that - you can't.
The common solution to your "problem" is to implement some kind of Settings file/database table/whatever, that will store your settings when you save the page in your admin section. Then, when the user requests your home page, your code looks at these settings and determines what to do.
Update:
This is not asp.net specific, it's how all the websites work. HTTP is stateless, you need to persist the data somehow.
The basic idea looks like this:
admin page -> load settings -> modify -> save settings
other page -> load settings -> if some setting applies, do something
Your pages should communicate with the storage mechanism, not with each other, because as I've already said, that's impossible unless you violate pretty much every principle.
It doesn't matter that much how you store your settings, it can be a simple file containing pairs of keys and values. Or maybe a xml file, or a database... You get the idea. As long as it is available to the pages you need and doesn't violate security of your website, it's fine. It all depends on your needs!
Hope I don't have to show how to connect to the database and retrieve values...