I am totally confused. I have 6 inputs on a page for a signup page. Three of the boxes have the required indicator in the right side of the box the other three do not. All 6 fields are required in code.
I have looked through the code and either MVC is adding a background image or Bootstrap is.
Here is the Razor code I am using.
<div class="row ">
<div class="col-md-6">
<div class="row">
#Html.TextBoxFor(m => m.currentUser.UserName, new { #class = "form-control", placeholder = "user name", tabindex = 1 })
</div>
<div class="row">
#Html.PasswordFor(m => m.currentUser.Password, new { #class = "form-control", placeholder = "password", tabindex = 3 })
</div>
<div class="row">
#Html.TextBoxFor(m => m.currentUser.LastName, new { #class = "form-control", placeholder = "last name", tabindex = 6 })
</div>
</div>
<div class="col-md-6">
<div class="row">
#Html.TextBoxFor(m => m.currentUser.EmailAddress, new { #class = "form-control", placeholder = "email address", tabindex = 2 })
</div>
<div class="row">
#Html.PasswordFor(m => m.confrimPassword, new { #class = "form-control", placeholder = "confirm password", tabindex = 4 })
</div>
<div class="row">
#Html.TextBoxFor(m => m.currentUser.FirstName, new { #class = "form-control", placeholder = "first name", tabindex = 5 })
</div>
</div>
</div>
I dont have much experience with Bootstrap so I am not sure if that is what is causing the issue or if MVC is.
Any help is appreciated.
Here is the model class:
public class User
{
public int ID { get; set; }
[Required(ErrorMessage = "Please enter a User Name.")]
public string UserName { get; set; }
[Required(ErrorMessage = "Please enter a password")]
public string Password { get; set; }
[Required(ErrorMessage = "Please enter your first name.")]
public string FirstName { get; set; }
[Required(ErrorMessage = "Please enter your last name.")]
public string LastName { get; set; }
[Required(ErrorMessage = "Please enter an email address.")]
public string EmailAddress { get; set; }
}
here is the generated code for an input that has the indicator:
<input class="form-control" data-val="true" data-val-required="Please enter a password" id="currentUser_Password" name="currentUser.Password" placeholder="password" tabindex="3" type="password" autocomplete="off" keyev="true" clickev="true" style="background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QsPDhss3LcOZQAAAU5JREFUOMvdkzFLA0EQhd/bO7iIYmklaCUopLAQA6KNaawt9BeIgnUwLHPJRchfEBR7CyGWgiDY2SlIQBT/gDaCoGDudiy8SLwkBiwz1c7y+GZ25i0wnFEqlSZFZKGdi8iiiOR7aU32QkR2c7ncPcljAARAkgckb8IwrGf1fg/oJ8lRAHkR2VDVmOQ8AKjqY1bMHgCGYXhFchnAg6omJGcBXEZRtNoXYK2dMsaMt1qtD9/3p40x5yS9tHICYF1Vn0mOxXH8Uq/Xb389wff9PQDbQRB0t/QNOiPZ1h4B2MoO0fxnYz8dOOcOVbWhqq8kJzzPa3RAXZIkawCenHMjJN/+GiIqlcoFgKKq3pEMAMwAuCa5VK1W3SAfbAIopum+cy5KzwXn3M5AI6XVYlVt1mq1U8/zTlS1CeC9j2+6o1wuz1lrVzpWXLDWTg3pz/0CQnd2Jos49xUAAAAASUVORK5CYII=); padding-right: 0px; background-attachment: scroll; cursor: auto; background-position: 100% 50%; background-repeat: no-repeat no-repeat;">
The really weird part is I discovered that they show up in Chrome but not Firefox.
#nemesv - you were exactly right. LastPass is one of the extensions I had installed in Chrome. Once I disabled it the icons were removed. Pulled my hair out for days trying to figure that one out.
Related
I have a few problems and this is my source code:
Controller:
public ActionResult Index()
{
List<Order> list = new List<Order>();
for (int i = 0; i < 20; i++)
{
list.Add(new Order());
}
list = DatabaseService.DBGetList<Order>("Order");
List<Order> orders = new List<Order>();
for (int i = 0; i < list.Count(); i++)
{
if (list[i].numberOfCompleted == 0)
{
orders.Add(new Order() { id = list[i].id, numberOfCompleted = list[i].numberOfCompleted, customerName = list[i].customerName, foods = list[i].foods });
}
}
return View(orders);
}
Order.cs
public List<Food> foods { get; set; }
public string customerName { get; set; }
public int id { get; set; }
public long totalCost = 0;
public int numberOfCompleted { get; set; }
View
#foreach (var item in Model)
{
<!--Display attributes-->
<!--Display Complete button-->
<div class="media-container-column col-12 col-lg-3 col-md-4">
<div class="mbr-section-btn align-right py-4">
<button class="btn btn-primary display-4 remove"
data-toggle="modal"
data-target="#exampleModal"
type="submit"
>Complete</button>
</div>
</div>
</div>
</div>
</section>
}
I want when clicking the Complete button, the numberOfComplete attribute will be assigned with food.Count(). What do I have to do to achieve this?
First you create a post form in view page of index action. Change this to your index.cshtml file.
#foreach (var item in Model)
{
<!--Display attributes-->
<!--Display Complete button-->
<div class="media-container-column col-12 col-lg-3 col-md-4">
#Html.BeginForm("Index","Controller",FormMethod.post)
{
<input type="text" name="id" display="none" value="#item.id"/>
<div class="mbr-section-btn align-right py-4">
<button class="btn btn-primary display-4 remove" data-toggle="modal" data-
target="#exampleModal" type="submit">Complete</button>
</div>
}
</div>
}
Then create post action method of index.
[HttpPost]
public ActionResult Index(Order obj)
{
Order order=Order().Find(x=>x.id=obj.id);
order.numberOfComplete = order.food.count();
return view();
}
I have a web app where users can posts items on the home page. Currently, the items on the home page are listed from oldest date to newest. This is not good because the users want to see the most recent posts when they visit the home page.
I have a DatePosted property in my post model that I use to track the time and date of a posting. How can I sort by Newest to Oldest using that property?
Here is my Action that takes users to the home page where they can see posts:
// GET: Posts
public ActionResult Index()
{
var posts = db.Posts.ToList();
return View(posts);
}
The View:
#model IEnumerable<DothanTrader.Models.Post>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#{
int i = 5;
}
<div class="row">
#foreach (var item in Model)
{
if (i == 5)
{
#:</div><div class="row">
i = 1;
}
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
#Html.ActionLink(#item.Title, "Details", "Post", new { id = item.PostId }, null)
</div>
<div class="panel-body" style="min-height: 200px; max-height: 200px; ">
<img src="#Url.Content("~/Content/images/" + System.IO.Path.GetFileName(item.Image))" alt="" class="img-responsive" />
</div>
<div class="panel-footer">
<span class="glyphicon glyphicon-eye-open"> #item.Views</span> | <span class="glyphicon glyphicon-usd"> #item.Price</span>
<div class="pull-right">
<span>#item.DatePosted.Value.ToShortDateString()</span>
</div>
</div>
</div>
</div>
{ i++; }
}
</div>
The Model (just in case you need it):
public class Post
{
public int PostId { get; set; }
public string Title { get; set; }
public string Description { get; set; }
public DateTime? DatePosted { get; set; }
public string Image { get; set; }
public float Price { get; set; }
public int Views { get; set; }
public int Likes { get; set; }
public virtual ApplicationUser ApplicationUser { get; set; }
public string ApplicationUserId { get; set; }
}
Use db.Posts.OrderByDescending(p => p.DatePosted).ToList()
I have View where I create interview with greeting and details
Here is table
CREATE TABLE [dbo].[Interviews] (
[Interview_Id] INT IDENTITY (1, 1) NOT NULL,
[Greeting] NVARCHAR (MAX) NULL,
[Detail] NVARCHAR (MAX) NULL,
[VacancyId] INT NULL,
PRIMARY KEY CLUSTERED ([Interview_Id] ASC),
CONSTRAINT [FK_Interviews_ToTable] FOREIGN KEY ([VacancyId]) REFERENCES [dbo].[Vacancies] ([VacancyId]) ON DELETE CASCADE
);
Here is my controller for this View
// Страница ввода приветствия и описания вакансии
[HttpGet]
public ActionResult WelcomeScreen()
{
// Формируем список команд для передачи в представление
SelectList teams = new SelectList(db.Vacancy, "VacancyId", "VacancyName");
ViewBag.Teams = teams;
return View();
}
//Заносим инфу о вакансии в таблицу
[HttpPost]
public ActionResult WelcomeScreen(Interview interview)
{
db.Interview.Add(interview);
db.SaveChanges();
//Int32 id = interview.Interview_Id;
//TempData["id"] = id;
return RedirectToAction("Index", "Questions", new { id = interview.Interview_Id });
}
Here is my View
#using (Html.BeginForm())
{
<div class="outer-div">
<div class="inner-div">
<div class="right-welcome-div">
<div class="right-grid-in-grid">
<div class="col-md-10">
#Html.DropDownListFor(model => model.Vacancy.VacancyId, ViewBag.Teams as SelectList, new { #class = "greeting" })
#Html.ValidationMessageFor(model => model.VacancyId, "", new { #class = "text-danger" })
</div>
</div>
<div class="main-left-div">
<div style="margin-left: 40px">
#Html.EditorFor(model => model.Greeting, new {htmlAttributes = new {#class = "greeting", data_bind = "textInput: Greeting", placeholder = "Приветствие", id="Greeting"}})
</div>
#Html.TextAreaFor(model => model.Detail, new { #class = "greeting2", data_bind = "textInput: Detail" })
</div>
</div>
<div class="left-welcome-div">
<div class="text-div" style="padding-top: 30px; word-break: break-all;">
<p style="font-size: 20px; margin-top: 20px; padding-left: 30px; padding-right: 40px; text-align: center;"><b><span data-bind="text: Greeting"/></b>
</p>
<p style="font-size: 20px; margin-top: 40px; padding-left: 30px; padding-right: 40px; text-align: center;"><span data-bind="text: Detail"/>
</p>
</div>
<div class="button-div" style="padding-top: 40px;">
<input style="float: right; margin-right: 30px; margin-top: 20px; border-radius: 12px; width: 200px;" type="submit" value="Создать" class="btn btn-default" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
function ViewModel() {
this.Greeting = ko.observable('');
this.Detail = ko.observable('');
};
var vm = new ViewModel();
ko.applyBindings(vm);
</script>
}
When I click submit button it creates new empty row in Vacancies table.
I don't understand, why??
Why so?
Because you generate dropDownList with name Vacancy.VacancyId according the following code an it will create a instance of Vacancy in property of Interview and When you add Interview in dbContext, EF will create new row for Vacancy because interview.Vacancy is not null.
#Html.DropDownListFor(model => model.Vacancy.VacancyId, ViewBag.Teams as SelectList, new { #class = "greeting" })
Replace the code with this
#Html.DropDownListFor(model => model.VacancyId, ViewBag.Teams as SelectList, new { #class = "greeting" })
Hello I would like to only highlight the border of the text box without any error message near it, I have tried the following, but it still adds a span tag, can I avoid adding a span tag? Thank you!
[Required(ErrorMessage = " ")]
[Display(Name = "Email")]
public string Email { get; set; }
view
#using (Html.BeginForm("Login", "Account", new {
ReturnUrl = ViewBag.ReturnUrl
}, FormMethod.Post, new {
#class = "navbar-form navbar-nav",
id = "userForm"
})) {
#Html.AntiForgeryToken()
<div class="form-group">
#Html.ValidationMessageFor(m => m.Email, "", new {
#class = "text-danger"
})
#Html.TextBoxFor(m => m.Email, new {
#class = "form-control input-sm",
#placeholder = "Email"
})
</div>
<div class="form-group">
#Html.ValidationMessageFor(m => m.Password, "", new {
#class = "text-danger"
}) #Html.PasswordFor(m => m.Password, new {
#class = "form-control input-sm",
#placeholder = "Password"
})
</div>
<input type="submit" value="Log in" class="btn btn-sm btnMain"/>
}
Before
1
After
2
Edit: Added view.
Decorate your Validation Summary with a class and add the style display:none; for that in CSS:
in View:
#Html.ValidationSummary("", new { #class = "text-danger hidevalidation" })
in CSS:
.text-danger .hidevalidation{
display:none;
}
What have worked for me is adding another class to ValidationMessageFor in order to disable the text message only in certain locations.
New view:
#using (Html.BeginForm("Login", "Account", new {
ReturnUrl = ViewBag.ReturnUrl
}, FormMethod.Post, new {
#class = "navbar-form navbar-nav",
id = "userForm"
})) {
#Html.AntiForgeryToken()
<div class="form-group">
#Html.ValidationMessageFor(m => m.Email, "", new {
#class = "text-danger nav-text-danger"
})
#Html.TextBoxFor(m => m.Email, new {
#class = "form-control input-sm",
#placeholder = "Email"
})
</div>
<div class="form-group">
#Html.ValidationMessageFor(m => m.Password, "", new {
#class = "text-danger nav-text-danger"
}) #Html.PasswordFor(m => m.Password, new {
#class = "form-control input-sm",
#placeholder = "Password"
})
</div>
<input type="submit" value="Log in" class="btn btn-sm btnMain"/>
}
They newly added class:
.nav-text-danger { display: none; }
in order to add the red border I have added/modified the following CSS class:
.input-validation-error { border: 2px solid #ff0000 !important; }
Special thanks to #stephen-muecke for helping me with this one
I have define the following on my Model class:-
[DataType(DataType.MultilineText)]
public string Description { get; set; }
On the view I have the following:-
<span class="f"> Description :- </span>
#Html.EditorFor(model => model.Description)
#Html.ValidationMessageFor(model => model.Description)
now the output will be a small text area, but it will not show all the text . so how I can control the size of the DataType.MultilineText ?
:::EDIT:::
I have added the following to the CSS file:-
.f {
font-weight:bold;
color:#000000;
}
.f textarea {
width: 850px;
height: 700px;
}
And I have defined this :-
<div >
<span class="f"> Description :- </span>
#Html.TextArea("Description")
#Html.ValidationMessageFor(model => model.Description)
</div>
But nothing actually changed regarding the multi-line display.
This worked for me, with DataType set to MultilineText in the model:
[DataType(DataType.MultilineText)]
public string Description { get; set; }
And in the View specifying the HTML attribute "rows":
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { rows = "4" } })
Generates HTML like that:
<textarea ... rows="4"></textarea>
A text area with 4 rows.
so how I can control the size of the DataType.MultilineText ?
You could define a class to the textarea:
#Html.TextArea("Description", new { #class = "mytextarea" })
and then in your CSS file:
.mytextarea {
width: 850px;
height: 700px;
}