My first time ever learning and doing ANY web development, so it might look like an obvious question but my confusion is this:
In my MVC app at first I started using controls from examples of Twitter Bootstrap site so for example a drop down looked all pretty and nice then I learned that I want to use for example #HTML.CheckBoxFor, etc. in my Razor code so used that, now the controls look ugly and just like their plain HTML definition looks.
So my question is how can I keep using #HTML helper for my controls and model binding in Razor while keeping the look and flexibility of their Bootstrap controls?
If your property is of type bool then try this for a checkbox:
<div class="form-group">
#Html.LabelFor(model => model.property1, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.property1)
#Html.ValidationMessageFor(model => model.property1, "", new { #class = "text-danger" })
</div>
</div>
</div>
the checkbox class name is from bootstrap
All of the HTML helpers have an overload that allows you to pass in an object hash that get converted to HTML Attributes.
You can use that to add classes to your control:
#Html.CheckBox("Blah", new { #class = "form-control" })
Related
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.
Im working on my school ASP.NET MVC project. I want to edit information about user. When i call edit action, controller return model in to Edit View, and i want to see the value on the datepicker.
<div class="form-group">
#Html.Label("Datum rođenja", htmlAttributes: new { #class = "col-sm-3 control-label" })
<div class="col-sm-5">
<div class="input-group">
<input type="text" id="Model.DatumRodjenja" name="DatumRodjenja" class="form-control datepicker">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
I don't use #Html.TextBoxFor, what should i do to see value od date in datepicker? How can i use #Html.TextBoxFor in this code to Datepicker works fine?
use same name of input type as your model name and value field for getting value in edit mode.
<input type="date" name="Trandate" value="#Model.Trandate" />
Hope this work for you.
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());
});
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)