I'm learning MVC and I'm making contact form by first code.
Could someone of you explain me why the message area is smaller than title editor and why it lost the bootstrap css?
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.title, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.title, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.message, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.message, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.message, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="wyslij" class="btn btn-default" />
</div>
</div>
</div>
}
Here is the updated Fiddle - https://dotnetfiddle.net/DWy02w
Output :
HTML :
#model HelloWorldMvcApp.SampleViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- CSS Includes -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container col-md-10">
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<div class="form-group">
#Html.LabelFor(model => model.title, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.title, new { #class = "form-control" } )
#Html.ValidationMessageFor(model => model.title, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.message, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.message, new { #class = "form-control" } )
#Html.ValidationMessageFor(model => model.message, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="wyslij" class="btn btn-default" />
</div>
</div>
</div>
}
</div>
<!-- JS includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
Model :
using System;
using System.ComponentModel.DataAnnotations;
namespace HelloWorldMvcApp
{
public class SampleViewModel
{
public string title
{
get;
set;
}
public string message
{
get;
set;
}
}
}
AFAIK your usage of bootstrap grid classes (col-*) is wrong. Probably you should wrap your form in in a row and column, like this:
<div class="row">
<div class="col-md-10">
#using(Html.BeginForm())
{
...
}
</div>
</div>
As for width of message textarea, I think it is because of styles in Site.css. You can try to remove the link to Site.css and see if it helps.
You might want to use a text box instead of an editor template. Replace this:
#Html.EditorFor(model => model.title, new { htmlAttributes = new { #class = "form-control" } })
With this:
#Html.TextBoxFor(model => model.title, new { htmlAttributes = new { #class = "form-control" } })
Related
I want to make a user choose a picture from their pc and upload it to my website, however it didn't open the browse option to choose a picture and return to the list view.
Here's my code:
[HttpPost]
public ActionResult AddRestuarantItem(RestaurantItem restaurantItem, HttpPostedFileBase certificateImage)
{
if (ModelState.IsValid)
{
try
{
if (certificateImage != null)
{
string path = Path.Combine(Server.MapPath("~/UploadedFiles"),
Path.GetFileName(certificateImage.FileName));
certificateImage.SaveAs(path);
}
ViewBag.FileStatus = "Image uploaded successfully";
}
catch (Exception)
{
ViewBag.FileStatus = "Error while image uploading.";
}
}
restaurantItems.Insert(restaurantItem);
restaurantItems.Commit();
return RedirectToAction("RestaurantItemList");
}
and Here's my View:
#model WorldOfHalal.Models.RestaurantItem
#{
ViewBag.Title = "AddRestuarantItem";
}
<h2>AddRestuarantItem</h2>
#using (Html.BeginForm("AddRestuarantItem", "Restaurant", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>RestaurantItem</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.ItemName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ItemName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.ItemName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CertificateImageUrl, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CertificateImageUrl, new { htmlAttributes = new { #class = "form-control", #type = "CertificateImageUrl" } })
#Html.ValidationMessageFor(model => model.CertificateImageUrl, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="image" value="Upload" class="btn btn-primary" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10 text-success">
#ViewBag.FileStatus
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
you have to put an input with type="file" to upload the picture, like this :
<input type="file" name="certificateImage"/>
I am working on an ASP.NET, Bootstrap 3 website and have a problem with changing the size of the dropdownlist.
I can change it manually in the CSS to match the size of the other input boxes but I don't want to edit it manually every time I need to change it.
Is there a way to always keep the width the same between the dropdownlist and the other input boxes?
Here is what it is doing:
iPhone 6 vs
iPhone 5: Problem. The problem is that the dropdownlist doesn't get resized within the div.
And here is an example of my code:
<section class="features">
#using (Html.BeginForm("Create", "UsersAdmin", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<h4>Create a new account</h4>
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<!--ALL THESE INPUT BOXES ADJUST AUTOMATICALLY-->
<div class="form-group">
#Html.LabelFor(m => m.Address, new { #class = "col-md-5 control-label" })
<div class="col-md-7">
#Html.TextBoxFor(m => m.Address, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.City, new { #class = "col-md-5 control-label" })
<div class="col-md-7">
#Html.TextBoxFor(m => m.City, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.City, "", new { #class = "text-danger" })
</div>
</div>
<!--HERE IS THE DROPDOWLIST THAT NEEDS TO BE ADJUSTED DYNAMICALLY-->
<div class="form-group">
#Html.LabelFor(m => m.State, new { #class = "col-md-5 control-label" })
<div class="col-md-7 dropdownlist">
#Html.DropDownListFor(m => m.State, Steel_Tech.STATE.States, "--Select a State--", new { #class = "dropdownlist" })
#Html.ValidationMessageFor(m => m.State, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Zip, new { #class = "col-md-5 control-label" })
<div class="col-md-7">
#Html.TextBoxFor(m => m.Zip, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.Zip, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="form-group">
<input type="submit" class="btn btn-default" value="Create" />
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
I use IDE to generate a view and controller from model automatically in MVC, however, when I try to change the size of textAreafor, I found the width has limitation , I cant make it more widely... here is my code, hope for some help
#model VeganCommunityApplication.Models.Article
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Article</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
.
.
.
<div class="form-group">
#Html.LabelFor(model => model.Content, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextAreaFor(model => model.Content,20,70,new {#style="width:400px;height:400px" })
#Html.ValidationMessageFor(model => model.Content, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Change your textarea to this:
#Html.TextAreaFor(model => model.Content,20,70,new { #class = "col-md-12" })
This will make it 100% as wide as it's parent element.
For reference: Bootstrap grid system
You can change it like this:
#Html.TextAreaFor(model => model.Content, new { #class = "whatever-class", #cols = 40, #rows = 40 })
.whatever-class{
width:400px;
height:400px
}
I have a standard login page on mvc 4 which is functioning fine but my html knowledge is very weak and I need a quick answer to tidying up the form after I installed twitter bootstrap, the username and password labels are stuck on the same line within the form, can someone please recommend a quick fix to tidying up my code, Thanks
#model MvcApplication2.Models.login_details
#{
ViewBag.Title = "Log in";
}
<br /><br /><br />
<h2>#ViewBag.Title.</h2>
<div class="row">
<div class="col-md-8">
<section id="loginForm">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="col-md-10">
#Html.LabelFor(m => m.username, new { #class = "col-md-2 control-label"})
<div class="col-md-10">
#Html.TextBoxFor(m => m.username, new { #class = "form-control" })
#Html.ValidationMessageFor(m => m.username, "", new { #class = "text-danger"})
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.password, new { #class = "col-md-2 control-label"})
<div class="col-md-10">
#Html.PasswordFor(m => m.password, new { #class = "form-control"})
#Html.ValidationMessageFor(m => m.password, "", new { #class = "text-danger"})
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Log in" class="btn btn-default" />
</div>
</div>
}
</section>
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Easy :)
Just change the LabelFor's class from col-md-2 to col-md-3 then add another item, text-left.
So your labels should look like:
#Html.LabelFor(m => m.Email, new { #class = "col-md-3 control-label text-left" })
#Html.LabelFor(m => m.Password, new { #class = "col-md-3 control-label text-left" })
Then goto Site.css (~/Content/site.css) and add the following to the bottom:
.form-horizontal .control-label.text-left{
text-align: left;
}
I would recomend though that you learn HTML/JS/Bootstrap as if your making websites ever professionally you almost always will have to be competent with basic HTML/JS/Bootstrap(sometimes)
I have two projects in mvc .
in one of them i use this code :
#Html.LabelFor(model => model.Subject, new { #class = "control-label col-lg-2" })
And it works correctly because the project has an extension method for labelfor as you can see here :
public static System.Web.Mvc.MvcHtmlString LabelFor<TModel, TValue>(this System.Web.Mvc.HtmlHelper<TModel> html, System.Linq.Expressions.Expression<Func<TModel,TValue>> expression, object htmlAttributes)
But in the other project when i use the above code i mean :
#Html.LabelFor(model => model.Name, new { #class = "control-label col-lg-2" })
I got this error :
CS1928: 'System.Web.Mvc.HtmlHelper<DomainClass.Task>' does not contain a definition for 'LabelFor' and the best extension method overload 'System.Web.Mvc.Html.LabelExtensions.LabelFor<TModel,TValue>(System.Web.Mvc.HtmlHelper<TModel>, System.Linq.Expressions.Expression<System.Func<TModel,TValue>>, string)' has some invalid arguments
In the object browser i couldn't find the above extension that the other project has.as you can see here :
where is the problem?should i change the mvc version ?
here is the view code :
#model DomainClass.Task
#using System.Web.Mvc.Html;
#{
ViewBag.Title = "Create";
Layout = "~/Areas/Admin/Views/Shared/_LayoutPage.cshtml";
}
#using (Html.BeginForm("Create", "Task", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" ,#class = "cmxform form-horizontal tasi-form" }))
{
<div class="row">
<div class="col-lg-12">
<section class="panel panel-default">
<div class="panel-heading" style="font-weight: bold">ثبت نمایشگاه </div>
<div class="panel-body">
<div class=" form">
<div class="form-group">
#Html.LabelFor(model => model.Name, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.Name, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Name, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.StartDate, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.StartDate, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.StartDate, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.FinishDate, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.FinishDate, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.FinishDate, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Duration, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.Duration, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Duration, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Importance, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.Importance, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Importance, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateOfSubmit, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.DateOfSubmit, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.DateOfSubmit, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Type, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextAreaFor(model => model.Type, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.Type, "", new { #class = "validation" })
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button class="btn btn-success" type="submit">ثبت اطلاعات</button>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
}
Best regards
I finally remove my asp.mvc from nuget and install it again .and it works fine.