I'm developing an ASP.NET MVC3 application using the new Razor view engine but I'm having some difficulty changing a TextBox so that it is multiline.
So far all I've been able to find via google is that I need to set the multiline property to true, but I'm not sure how.
View code looks like this.
<div class="editor-field">
#Html.TextBoxFor(model => model.Body)
</div>
Any suggestions?
You could decorate the Body property on your view model with the [DataType] attribute:
[DataType(DataType.MultilineText)]
public string Body { get; set; }
and in your view use the EditorFor helper instead of TextBoxFor:
<div class="editor-field">
#Html.EditorFor(model => model.Body)
</div>
Another possibility is to leave the model as is without adding any attributes to it and in your view use the TextAreaFor helper:
<div class="editor-field">
#Html.TextAreaFor(x => x.Body)
</div>
Personally I prefer the first approach.
This is how to curve the corners of the textbox in asp.net mvc4:
#HTML.TextBoxFor(Model => Model.Name)
Related
I have an ASP.Net MVC project that I'm working on and I have a model that I want to turn into I form. I want to use EditorForModel() for this because I want it to automatically add fields to the form if I decide to add/remove properties to the model later.
The problem I'm having is that editor for model takes each property and creates the following HTML: (this is just generic. not the actual code)
<div class="editor-label"><label>Label Title</label></div>
<div class="editor-field"><input type="type"/></div
However what I want it do do for each field is this:
<div class="editor-field">
<label>Label Title</label>
<input type="type"/>
</div>
But if I try to do this in an editor template I get this instead:
<div class="editor-label"><label>Label Title</label></div>
<div class="editor-field">
<label>Label Title</label>
<input type="type"/>
</div>
How can I get EditorForModel() to not make it's own label field? I know I could always style it as hidden in CSS but it'd be nice if it wasn't even there to begin with so I could limit code confusion.
Thanks in advance.
PS: I've also tried using [HiddenInput(DisplayValue = false)] but this just hides the entire field and not just the label.
You need to write this in your editor template cshtml to get it work as expected:
#foreach (var property in ViewData.ModelMetadata.Properties)
{
<div class="editor-field">
<label>#property.GetDisplayName()</label>
#Html.Editor(property.PropertyName)
</div>
}
I am trying to use the EditorFor template with a dynamic view
my view looks like
#model dynamic
.....
.....
<div class="form-group">
#Html.LabelFor(x => x.AddressLine1, new { #class = "control-label" })
<div class="input-field">
#Html.TextBoxFor(x => x.AddressLine1, new { #class = "form-control" })
<div class="help-block with-errors">
#Html.ValidationMessageFor(x => x.AddressLine1)
</div>
</div>
</div>
But I am running into the error
CS1963 An expression tree may not contain a dynamic operation
Is it possible to use editorfor templates with dynamic views ? If so how could I get this to work
thanks
This issue is passing a dynamic to EditorFor, in the first place. As the error says, expression trees can't work with dynamic objects, and all the *For helpers work with expression trees.
Also, working with a dynamic in an editor template makes no sense, anyways. The whole point of an editor template is to provide a standard view for known types. It's not clear what you're actually trying to do, but I would suggest backing up and asking about the actual problem you're trying to solve, rather than your proposed solution to that problem.
This is a bit confusing. Till today i knew the following ways to pass data to view in MVC
ViewBag,ViewData,TempData,Strongly Typed Views and its Models.
So wherever we used a strongly typed view, we used to pass a model with data or empty object to a view, so that it does not throw any null reference error.
But today encountered a behavior that made me feel strange.
Case-1
The following is the EmployeeController's Create action
//
// GET: /Employee/Create
public ActionResult Create()
{
return View("Create");
}
The following is the CreateView inside Employee Folder or Views.
#model EmployeeDataBase.Models.Employee
<fieldset>
<legend>Employee</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Name)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Name)
#Html.ValidationMessageFor(model => model.Name)
</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>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
I am not returning any model in the action,but still the view was rendered.
Case-2
My action
public ActionResult Create(Employee employee, Employee emp)
{
return View("Create");
}
Called the above using the following URL
http://localhost:50128/Employee/Create?Name=something
Both the Employee parameters in the action were instantiated with Name property value as "something". Did not return anything in the action, still create is rendered. If if a dynamically change the value of Name during debugging, its still shows "something" in Create view in the Name text box.
Case 1:
If you had passed a model into the view, it would have displayed that model. If you do not pass a model, the view simply uses your model class to create the controls. In this case it is creating labels, textboxes and validation for all the properties. It uses those lambda expressions in LabelFor (xxxFor) as Expression Trees and analyses your class. It analyses and looks for things like: In the model you may have used a Display("Full Name") attribute for Name property, therefore it will conclude you want to show "Full Name" in label instead of "Name". It creates validation javascript in the same manner.
Therefore, in order to use the expression tree given in lambdas, it does not need an instance of the model.
Case 2:
Has been addressed in this SO question.
As you know Razor Engine doesn't work under MVC4.
So I am wondering if we can use Model object to generate email html body in some other way.
Any clue which tool/dll we can use for it.
I really don't want to put attribute names manually and use Replace method if I have 100 fields in the Model...
Sample:
<div class="display-label">
#Html.DisplayNameFor(model => model.Name)
</div>
<div class="display-field">
#Html.DisplayFor(model => model.Name)
</div>
<div class="clear">
</div>
Razor Engine now has Razor 2 compatibility (introduced in 3.1)
I've been using ActionMailer.net to generate html emails using Razor views. You can find it on NuGet or here: https://bitbucket.org/swaj/actionmailer.net/wiki/Home
I've setup the default MVC 3 application and I'm new to it, but I've a problem when I'm trying to print a value from an input-field after I've clicked the submit button.
It's a simple register form with a submit button at the bottom. When I click the submit button nothing shall happen expect the text from one of the input-fields shall be printed to a label or something beneath the submit button. I'm totally lost on how to do this, I've tried to make a label with an id but I'm not able to get access to neither the input-fields value or the label.
Controller action looks like this:
[HttpPost]
public ActionResult Create(Person person)
{
if (ModelState.IsValid)
{
db.Persons.Add(person);
db.SaveChanges();
return RedirectToAction("Index");
}
return View(person);
}
The complete form looks like this:
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<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.Phone)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Phone)
#Html.ValidationMessageFor(model => model.Phone)
</div>
<p>
<button id="btn_Register">
<span class="ui-button-text">Register</span>
</button>
</p>
</fieldset>
}
In order to get all the values from the posted form, they will be ( in your example ) within the person object.
To output a value in a label, you will need to modify the person object with the new value, and then on the View output this value.
e.g.
person.labelvalue = "foo";
<span>#model.labelvalue</span>
I suggest you take a look at asp.net/mvc as a starting base before moving from asp.net to asp.net mvc
You can have the way to go to the controller on button submit, get the input field value and set it on view to label you want to. However, if its just setting the label text on click of a button, then you don't need to have any server side code and so to say MVC code. Just use simple button instead of submit button. Write a JavaScript/jQuery event/function for button click and set the label text from required input-field. Something like...
$("#fooLabel").text($("#fooTextEditor").val());
To do this you will have to know the Ids of these two controls. As there is no built-in overload to provide Id to fields using #Html.EditorFor or #Html.LabelFor, you can either override HtmlHelper like suggested in this post..
How to specify ID for an Html.LabelFor<> (MVC Razor)
Or even simpler you can use any browser dev tool to find the generated Id for two controls and directly use them in your JaveScript/jQuery. Usually it is same as the model field name.
As you do not want to submit the page or any other action, you have to perform this action on the client side using java script or Jquery. In java script just add onclick event to btn_Register button and set the value of label to the text field. If you are using jquery in the click event assign the value as below
btn_Register.click(function(){
$("#label1").text($('txtfield1').val());
});