Develop Reference

Cannot get my bootstrap rows on the same line

I read the other questions that were similar but my issue is more basic. I'm rather new to bootstrap but I'm testing it out to see if this will work for a simple form that I need to be opened by phones, tablets, and any other device.
I'm trying to get my textbox on the same line as the text that describes it. Instead, the textbox is under the text.
Here is what is happening:
Here is the cshtml page of the above:
#model MvcBootstrap.Models.HomeModels.VisitingCustomer
#{
ViewBag.Title = "Home Page";
}
<div class="">
<p class="lead">Please enter your branch number, account number, and at least the first three characters of your last name or at least the first three characters of your company name below so we can locate your account.</p>
</div>
<div class="container">
#using (Html.BeginForm("TypeOfPayment", "Home", FormMethod.Post))
{
<div class="row">
<h2>Account Lookup</h2>
<div class=".col-md-4">
Branch Number
</div>
<div class=".col-md-8">
#Html.TextBoxFor(m => m.Branch, new {#class = "", #maxlength = "2"})
</div>
</div>
<div class="row">
<input id="submitpayment" class="typicalbutton" type="submit" value="Continue" />
</div>
}
</div>
I have no additional css code nor have I modified any of the existing css.
This should be pretty straight forward but I'm just not grasping the concept I guess. What am I doing wrong?

You could group the Branch Number and the text box in one column like so
<div class="col-md-4">
<label for="branch-number">Branch Number</label>
# add text box here and give it an id="branch-number"
</div>
Also, you don't need to have a . before the class name in your classes.

You can try this format. form-inline class makes the form inline. you don't need to use the responsive column classes. also you should use class="col-md-*" not class=".col-md-*"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-inline">
<div class="form-group">
<label for="branch"> Branch Number</label>
<input type="text" class="form-control" id="branch no">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

You can specify the class for different screen
i.e
col-lg-1 to col-lg-12 for large screen
col-md-1 to col-md-12 for desktop / laptop screen
col-sm-1 to col-sm-12 for tablet screen
col-xs-1 to col-xs-12 for mobile screen
Example
<input type="text" class="col-lg-6 col-md-6 col-sm-6 col-xs-12" >

What you are looking for is an inline form.
#using (Html.BeginForm("TypeOfPayment", "Home", FormMethod.Post, new { #class="form-inline" }))
{
<div class="row">
<div class="col-md-12">
<h2>Account Lookup</h2>
<div class="form-group">
#Html.LabelFor(m => m.Branch)
#Html.TextBoxFor(m => m.Branch, new {#class = "form-control", #maxlength = "2"})
</div>
<input id="submitpayment" class="typicalbutton" type="submit" value="Continue" />
</div>
</div>
}
In your model for this form you will want to add a [DisplayName] attribute for your Branch property so that you can use the Html.LabelFor() helper I included above:
[DisplayName("Branch Number")]
public string Branch { get; set; }
You will also want to read more about the grid system. Your original code did not use the proper classes for the columns.

Like #Asif Raza said, you should specify what size of screen are targeting. Keep in mind that the sizing will work for the size you specify and UP. So if you specify a medium size screen, it will affect medium size screens and larger, not smaller.
I dont think thats your issue though, I think whats happening with you is there are extra margins you are not seeing that is causing the textbox to be placed below. The max width of the container is going to be 12 columns, which you are using, but if there are any other margins in between it's going to cause the textbox to fall below. I recommend inspecting the element with F12 to zone in and see if there is anything extra being added.

Any good replacment for Razor Engine

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

Getting input value on submit MVC 3

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());
});

Changing the size of Html.TextBox

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)

asp .net MVC 2.0 Validation

I’m trying to do some validation in asp .net MVC 2.0 for my application. I want to have some nice client side validation. Validation should be done most time on model side with DataAnnotations with custom attributes( like CompareTo, StringLenght, MinPasswordLenght (from Membership.MinimumumpassworkdLenght value).
For that purpose I tried to use xval with jquery.validation.
Some specific thing is that most of forms will be working with ajax and most problems are when I want to validate form with ajax.
Here is link for sample project http://www.sendspace.com/file/m9gl54 .
I got two forms as controls ValidFormControl1.ascx, ValidFormControl2.ascx
<% using (Ajax.BeginForm("CreateValidForm", "Test", new AjaxOptions { HttpMethod = "Post" })) {%> <div id="validationSummary1">
<%= Html.ValidationSummary(true)%> </div> <fieldset>
<legend>Fields</legend>
<div class="editor-label">
<%= Html.LabelFor(model => model.Name)%>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.Name)%>
<%= Html.ValidationMessageFor(model => model.Name)%>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.Email)%>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.Email)%>
<%= Html.ValidationMessageFor(model => model.Email)%>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.Password)%>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.Password)%>
<%= Html.ValidationMessageFor(model => model.Password)%>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.ConfirmPassword)%>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.ConfirmPassword)%>
<%= Html.ValidationMessageFor(model => model.ConfirmPassword)%>
</div>
<p>
<input type="submit" value="Create" />
</p> </fieldset> <% } %> <%= Html.ClientSideValidation<ValidModel>()
.UseValidationSummary("validationSummary1", "Please fix the following problems:") %>
Both look same the difference is only validation summaryID (validationSummary1, validationSummary2). Both controls are rendered on one page :
Form2
<%Html.RenderPartial("~/Views/Test/ValidFormControl2.ascx", null); %>
Form1
<%Html.RenderPartial("~/Views/Test/ValidFormControl.ascx", null); %>
Validation property
First problem, when we have two controls with same type to validate it don’t work becosue html elements are rendered by field name ( so we have two element with same name “Password” ). Only first form will be validated by client side.
The worst thing is that even if we have different types and their fields name is same validation won’t work too ( this thing is what I need to repair it will be stupid to name some unique properites for validation ).
Is there any solution for this ?
Custom attributes validation
Next thing custom attributes validation ( All those error are when I use Ajax for on normal form validation is working without problem. ):
CompareTo - Simple compare to that is done in mvc template for account model ( class attribute saying with two property will be compared ) , and it wasn’t show on page. To do it I created own CachingRulesProvider with compareRule and my Attribute. Maybe there is more easy way to do it?
StringLenght with minimum and maximum value, I won’t describe how I done it but is there any easy whey to do it?
Validation summary
When I have two two control on page all summary validation information goes to first control validation summary element, even xval generated script say that elementID are different for summary. Any one know how to repair it?
Validation Information
Is there any option to turn on messages on place where is Html.ValidationMessageFor(model => model.ConfirmPassword). Becsoue for me it isn’t show up. I would like to have summary and near field information too not only red border. Any one know how to do it?
Ajax submit
Anyone know how to do easy without massive code in javascript to do submit via javascript. This will be used to change input submit to href element (a).
Both look same the difference is only validation summaryID

First off, I don't know why you want to have two controls, having two identical fields, one form. Each form should have its own model and use a model as a validator.
namespace Sample.Models
{
[metatype(typeof(PersonaValidation))]
public partial class Person
{
}
public class PersonValidation
{
[Required(ErrorMessage = "First name Required")]
[StringLength(20, ErrorMessage = "First name must be 20 or less characters in length")]
[DisplayName("First Name")]
public string Firstname { get; set; }
[Required(ErrorMessage = "Last name Required")]
[StringLength(20, ErrorMessage = "Last name must be 20 or less characters in length")]
[DisplayName("Last Name")]
public string Lastname { get; set; }
}
}
In your aspx, add the following script files before form tag:
<h2>Validation Sample</h2>
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm()) {%>
<%= Html.ValidationSummary(true) %>
<fieldset>
<div class="editor-label">
<%= Html.LabelFor(model => model.Firstname) %>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.Firstname) %>
<%= Html.ValidationMessageFor(model => model.Firstname) %>
</div>
<div class="editor-label">
<%= Html.LabelFor(model => model.Lastname) %>
</div>
<div class="editor-field">
<%= Html.TextBoxFor(model => model.Lastname) %>
<%= Html.ValidationMessageFor(model => model.Lastname) %>
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
<% } %>
This will work every time. Error message will be displayed next to the invalid field.

Concerning the ajax submit, you could just put a button on your form an then perform a click on it through jQuery. This would lead also lead to your form being posted.
You could also just make an ajax call to the controller action (on link click) and in here you post the necessary data from your form.