LabelFor + EditorFor on the same line? - asp.net

I have this code:
<div class="editor-label">
#Html.LabelFor(model => model.Ticket)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Ticket)
#Html.ValidationMessageFor(model => model.Ticket)
</div>
How do I get the label and checkbox(in this case its a checkbox) on the same line? I have tried removing the divs and they still come out on different lines.
Thank you.

Removing the didn't work for my app, but adding new { #style = "display:inline-block" } as the second argument on the LabelFor() did.
I prefer the checkbox before the label so it would be:
<div>
#Html.EditorFor(model => model.GetAll)
#Html.LabelFor(model => model.GetAll, new { #style = "display:inline-block" })
</div>

Just remove the divs separating them, this works for me, I get Ticket [] with this.
Also, use CheckBoxFor if you know it is a CheckBox
<div>
#Html.LabelFor(model => model.Ticket)
#Html.CheckBoxFor(model => model.Ticket)
#Html.ValidationMessageFor(model => model.Ticket)
</div>
I have also used this code as the OP stated this is his code
<div class="editor-field">
#Html.Label("SMS Alerts?")
#Html.EditorFor(model => model.GetAll)
</div>
I get GetAll []
GetAll is a bool in my ViewModel
Also used this
<div>
#Html.LabelFor(model => model.GetAll)
#Html.EditorFor(model => model.GetAll)
</div>
I get GetAll []
And this
<div class="editor-field">
#Html.LabelFor(model => model.GetAll)
#Html.EditorFor(model => model.GetAll)
</div>
I get GetAll []
In every case my tests are label and checkbox are inline

In my case just add the row to the main div because I want to use the col-md-2
classes so after searching for solution when use col-*
classes then the parent element needs the row classes :
it was without row class
<div class="form-group ">
and just add row class :
<div class="form-group row">
#Html.LabelFor(model => model.BATCH_NO, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.BATCH_NO, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.BATCH_NO, "", new { #class = "text-danger" })
</div>
</div>

Related

set Model value to CKeditor in MVC Edit View

i use CKEditor in Create view for save Text to Database Model using below code
<div class="row">
<div class="col">
#Html.LabelFor(model => model.Body, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col">
#Html.EditorFor(model => model.Body, new { htmlAttributes = new { #class = "form-control" } })
<script>
CKEDITOR.replace("Body", { htmlEncodeOutput: true });
</script>
#Html.ValidationMessageFor(model => model.Body, "", new { #class = "text-danger" })
</div>
</div>
i use CKEDITOR.instances['Body'].setData(#Model.Body); but it not work
but when i put this code in Edit view CKEditor Dont show returned model text
how can i set model string field to ckeditor?
you can use TextAreaFor instead of EditorFor:
<div class="row">
<div class="col">
#Html.LabelFor(model => model.Body, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col">
#Html.TextAreaFor(model => model.Body, new { htmlAttributes = new { #class = "form-control" } })
<script>
CKEDITOR.replace("Body", { htmlEncodeOutput: true });
</script>
#Html.ValidationMessageFor(model => model.Body, "", new { #class = "text-danger" })
</div>
</div>

Having 3+ Input Fields on a Single Line in Templated Bootstrap Razor View

I am using scaffolding for ASP.NET MVC model first development.
The created views look good, but they are laid out with one field per line. I am trying to get multiple fields to display on a single line in some places, but cannot find the best way to do this, while still having the input fields appear nicely formatted.
The razor code generated is like this:
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.MiddleName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
If I strip out all the Bootstrap CSS classes, I can do it, but then I lose the nice formatting of the input fields.
First, each form-group automatically gets its own line. It employs a clearfix to ensure that nothing else wraps around it. Second, even if it didn't, each of your label/field combos are consuming 12 columns. Since there's only 12 columns to work with in the Bootstrap grid, each would wrap to a new line anyways.
There's two options here. If you want multiple fields on the same line, under the same label, you can simply put them all within your col-md-10 div within the form-group:
<div class="form-group">
<label class="control-label col-md-2" for="#Html.IdFor(m => m.FirstName)">Name</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", new { #class = "text-danger" })
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
Alternatively, you can simply put each form-group into a column within an overall row:
<div class="row">
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.MiddleName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.LastName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
With this option, though, you should probably avoid the form-horizontal layout and simply stack your label on top of your fields. Otherwise, the labels are going to consume too much of the horizontal space.
All of this is just basic Bootstrap grid markup, though. There's nothing special about the fact that you're dealing with form elements.

Form in right side of photo

I'm having some issues working with bootstrap. I'm a little confused right now. I need to add a form on the right side of a photo in Asp.net MVC. I have a render body on my main page and then in the other view I have this bootstrap code:
#using (Html.BeginForm("EditarUtilizador", "Account", null, FormMethod.Post,
new { enctype = "multipart/form-data" }))
{
System.Diagnostics.Debug.WriteLine(#Html.DisplayFor(modelItem => modelItem.ImagePath));
<div class="form-horizontal">
<h4>Editar Perfil Pessoal</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<fieldset class="col-md-3">
#if (Model.ImagePath != null)
{
<img src="~/Images/#Html.DisplayFor(modelItem => modelItem.ImagePath)" width="150" height="150" />
}
else
{
<img src="~/StaticImages/default-user-image.png" width="150" height="150" />
}
<div class="editor-field">
<input id="ImagePath" title="Upload a product image"
type="file" name="file" />
</div>
</fieldset>
<div class="form-group" >
#Html.LabelFor(m => m.Utilizador, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DisplayFor(m => m.Utilizador, new { #class = "form-control"})
#Html.ValidationMessageFor(model => model.Utilizador, "", 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.EditorFor(m => m.Password, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.NovaPassword, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.NovaPassword, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Email, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.DisplayFor(m => m.Email, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.Telemóvel, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.Telemóvel, new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.Telemóvel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(m => m.DataNascimento, new { #class = "col-md-2 control-label" })
<div class="col-md-10">
#Html.EditorFor(m => m.DataNascimento, new { #class = "form-control", type = "date", })
#Html.ValidationMessageFor(model => model.DataNascimento, "", new { #class = "text-danger" })
</div>
What I have at the moment is this:
I want to form to appear on the right, but in my case it appears below the image.
Because <div> elements are block-level, they will stack on top of one another by default. Alter the CSS to get what you desire.
Using Bootstrap Grid Mechanism
You can align content in the following manner
#Html.BeginForm(){
<div class="row">
<div class="col-md-8">
Add the input fields in this column
</div>
<div class="col-md-4">
Add the image portion here
</div>
</div>
}
The maximum value of column in Bootrap grid is 12, you can divide this value into individual columns like I did. You can tweak the col-md-* values according to your preference.
You can learn more about the bootstrap Grid in the following link.
https://getbootstrap.com/examples/grid/

Html page doesn't post to a controller

I have class in a model Customer
When I am clicking a submit button on Cshtml page,
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Registration</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Fname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Fname)
#Html.ValidationMessageFor(model => model.Fname)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Lname)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Lname)
#Html.ValidationMessageFor(model => model.Lname)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Address)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Address)
#Html.ValidationMessageFor(model => model.Address)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.phoneNo)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.phoneNo)
#Html.ValidationMessageFor(model => model.phoneNo)
</div>
<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>
<div class="editor-label">
#Html.LabelFor(model => model.ConfirmPassword)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.ConfirmPassword)
#Html.ValidationMessageFor(model => model.ConfirmPassword)
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
The page doesn't post to the controller
[HttpPost]
public ViewResult DisplayCustomer(FormCollection Collection)
{
objinfo.Fname = Request.Form["Fname"].ToString();
objinfo.Lname = Request.Form["Lname"].ToString();
objinfo.Address = Request.Form["Address"].ToString();
objinfo.phoneNo = Request.Form["PhoneNo"].ToString();
objinfo.Username = Request.Form["UserName"].ToString();
objinfo.Password = Request.Form["Password"].ToString();
objutility.InsertEmployee(objinfo);
return View("DisplayCustomer");
}
I am not able to get Values into request.form. What particular code I am missing?
1 - you don't need to use Request.Form, or FormCollection .
Your controller(s) should look like this:
// this method should just display the page, not handle the post back
public ViewResult DisplayCustomer(){
return View();
}
// this method will handle the post back
[HttpPost]
public ViewResult DisplayCustomer(Customer model){
// Handle the post back.
if(ModelState.IsValid){
/* Hanlde the submission, at this point "model" should have all the properties, such as model.Fname, model.Lname, etc...
DB.InserOnSubmit(model);
DB.Customers.AddObject(model);
DB.Customers.Add(model);
you get the point
*/
}
}

CKEditor MVC 3 implementation

Learning mvc and I am trying to implement a page with 3 fields Name-Surname-Description
So in my learning example I am loading employees and I should be able to create and edit them.
The description should use CKEditor .
I can load employees
I can save them
However I cannot seem to be able to save the description,such as whatever the user types in the description field. I have seen few examples on the net but none with a solution to download,as I cannot seem to put together. I have found this guy with a cool html helper but cannot seem to be able to put an example together
http://www.andrewbarber.com/post/CKEditor-Html-Helpers-ASPNET-MVC-Razor-Views.aspx
The problems are :
How do you get the value that is typed inside the ckEditor.
In my viewModel the description is null all the time
the ckEditor slow down the creation of the page quite a lot.How can I make it faster? I dont need all the options.
Is there an example using mvc3 out there that I can use as a template.
I have done all the plumbing as follows:
Create.chtml
#model MvcApplicationCKEditorIntegration.Models.EmployeeViewModel
#{
ViewBag.Title = "Create";
}
<h2>
Create</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>EmployeeViewModel</legend>
<div class="editor-label">
#Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LastName)
#Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PhotoPath)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.PhotoPath)
#Html.ValidationMessageFor(model => model.PhotoPath)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
<textarea class="ckeditor" id="ckeditor" rows="10"></textarea>
</div>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
EmployeeController
public class EmployeeController : Controller
{
public ActionResult Index()
{
var employeeRepository=new EmployeeRepository();
var employees = employeeRepository.GetAll();
var employeeList = employees.Select(employee => new EmployeeViewModel
{
EmployeeId = employee.EmployeeId,
FirstName = employee.FirstName,
LastName = employee.LastName,
PhotoPath = employee.PhotoPath,
Email = employee.Email,
Description = employee.Description
}).ToList();
return View(employeeList);
}
public ActionResult Create()
{
return View(new EmployeeViewModel());
}
[HttpPost]
public ActionResult Create(EmployeeViewModel vm)
{
if(ModelState.IsValid)
{
var employeeRepository=new EmployeeRepository();
var emp=new Employee
{
FirstName = vm.FirstName,
LastName = vm.LastName,
Description = vm.Description,
Email = vm.Email,
PhotoPath = vm.PhotoPath
};
employeeRepository.Insert(emp);
return RedirectToAction("Index");
}
return View(vm);
}
}
}
Thanks for any suggestions!!!
EDITED EXAMPLE USING CKEditor helper
#using MvcApplicationCKEditorIntegration.Helpers
#model MvcApplicationCKEditorIntegration.Models.EmployeeViewModel
#{
ViewBag.Title = "Create";
}
<h2>
Create</h2>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#Html.CKEditorHeaderScripts()
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>EmployeeViewModel</legend>
<div class="editor-label">
#Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.FirstName)
#Html.ValidationMessageFor(model => model.FirstName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.LastName)
#Html.ValidationMessageFor(model => model.LastName)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Email)
#Html.ValidationMessageFor(model => model.Email)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.PhotoPath)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.PhotoPath)
#Html.ValidationMessageFor(model => model.PhotoPath)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Description)
</div>
#Html.CKEditorFor(model=>model.Description)
<p>
<input type="submit" value="Create" onclick="#Html.CKEditorSubmitButtonUpdateFunction()" />
</p>
</fieldset>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
<script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
You aren't actually using the CKEditor helper at all like is described on that blog page (which is my own blog)
The purpose of that helper is that once you have included the code correctly into your project, you can simply do this:
#Html.CKEditorFor(model=>model.Description)
However, you seem to simply be creating a plain-old text area and working with it 'manually' after that. There isn't anything to bind it to your property, as would exist if you had used the helper described in that post.
Also note that you aren't using the code that Updates the text area behind the scenes; so if your model has Required set on the Description field, you will get a client-side validation error the first time you submit an otherwise properly-configured CKEditorFor() This isn't unique to my helper; any bound property that is 'required' needs the bit of Javascript that is mentioned in that blog post, too. I do it as an onclick off the submit button, but you can run that same code anywhere. You just need to include it in the page, which you haven't done.
You might want to try setting the name attribute of the textarea to "Description"
so:
<div class="editor-field">
<textarea class="ckeditor" id="ckeditor" rows="10" name="Description"></textarea>
</div>
if that doesn't work then you might have to use javascript to get the value of what's in the editor and set it in a hidden field before the post.

Resources