Why same theme doesn't apply to different views in Razor? - asp.net-mvc

I have created a two view for displaying and editing using Razor in MVC.
When I run the program the page background image appears and works as I want, but when I click on the edit link it loads the edit view and it just shows a white background.
The first time I thought it doesn't apply the theme. Then I selected the edit view and run it again. There I could see the background image as I expected. But when I go to the displaying view, there wasn't any background image.
Why is this happening? Any suggestions?
These are two images relevant to displaying view and edit view.
This is the view of the page display page
#model OnlineElection.DAL.person
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" scr="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<div>
<h4>Profile</h4>
<hr />
<dl class="dl-horizontal" style="width:40%; margin-left:10%">
<dt>
#Html.DisplayNameFor(model => model.SID)
</dt>
<dd>
#Html.EditorFor(model => model.SID, new { htmlAttributes = new { #readonly = "" } })
</dd>
<dt>
#Html.DisplayNameFor(model => model.FirstName)
</dt>
<dd>
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #readonly = "" } })
</dd>
<dt>
#Html.DisplayNameFor(model => model.LastName)
</dt>
<dd>
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #readonly = "" } })
</dd>
<dt>
#Html.DisplayNameFor(model => model.DOB)
</dt>
<dd>
#Html.EditorFor(model => model.DOB, new { htmlAttributes = new { #readonly = "" } })
</dd>
<dt>
#Html.DisplayNameFor(model => model.email)
</dt>
<dd>
#Html.EditorFor(model => model.email, new { htmlAttributes = new { #readonly = "" } })
</dd>
<dt>
#Html.DisplayNameFor(model => model.password)
</dt>
<dd>
#Html.EditorFor(model => model.password, new { htmlAttributes = new { #readonly = "" } })
</dd>
</dl>
</div>
<p>
#Html.ActionLink("Edit", "Edit", new { id = Model.SID })
</p>
Code of edit view
#model OnlineElection.DAL.person
#{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Edit</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>person</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.Person_ID)
<div class="form-group">
#Html.LabelFor(model => model.Phone, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Phone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Phone, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
<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.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 class="form-group">
#Html.LabelFor(model => model.DOB, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DOB, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DOB, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.password, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.password, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AdminApproved, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.AdminApproved)
#Html.ValidationMessageFor(model => model.AdminApproved, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}

Related

How to view edit view inside the modal

I've tried so many ways to load the 'edit' partial view inside my modal but still no luck for it. I'm new to MVC, I've tried to do CRUD operation inside the modal window. Without modal i can perform CRUD operation. Now i want to do CRUD operation inside the modal window.
This my Script section
<script>
$(document).ready(function () {
$(document).on('click', '#edit', function (event) {
event.preventDefault();
event.stopImmediatePropagation();
$.ajax({
url: '/Companies/_Edit',
type: 'GET',
success: function (data) {
$('#createCompanyFormModalbody').html(data);
$('#createCompanyFormModal').modal('show');
},
error: function () {
alert("There is some problem in the service!");
}
});
});
});
</script>
This is my Edit Partial view
#model Mvc.Models.Company
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Company</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.CompanyID)
<div class="form-group">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Address, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.PhoneNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.URL, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.URL, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.URL, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Email, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Email, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Active, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Active)
#Html.ValidationMessageFor(model => model.Active, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Tstamp, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Tstamp, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Tstamp, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.IsDeleted, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.IsDeleted)
#Html.ValidationMessageFor(model => model.IsDeleted, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
This is my Controller class
public ActionResult _Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Company company = db.Companies.Find(id);
if (company == null)
{
return HttpNotFound();
}
// return View(company);
return PartialView(company);
}
// POST: Companies/Edit/5
// To protect from overposting attacks, please enable the specific properties you want to bind to, for
// more details see https://go.microsoft.com/fwlink/?LinkId=317598.
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult _Edit([Bind(Include = "CompanyID,Name,Address,PhoneNumber,URL,Email,Active,Tstamp,IsDeleted")] Company company)
{
if (ModelState.IsValid)
{
db.Entry(company).State = EntityState.Modified;
db.SaveChanges();
return RedirectToAction("Index");
}
return View(company);
}

Uploader in Create action - Asp.net MVC

I'm working on an asp.net Mvc Project.
I want to implement a File up_loader to upload images. my File up_loader should create the correct address and fill the imgURL field of database.
my view looks like this
here is my view
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Hotel</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.StateId, "StateId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("StateId", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.StateId, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.HotelRate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.HotelRate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.HotelRate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.HotelName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.HotelName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.HotelName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Description, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ImageURL, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#*#Html.EditorFor(model => model.ImageURL, new { htmlAttributes = new { #class = "form-control" } })*#
<label for="file">Filename:</label>
<input type="file" name="file" id="file" />
#Html.ValidationMessageFor(model => model.ImageURL, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
and here is my controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create([Bind(Include = "Id,StateId,HotelRate,HotelName,Description,ImageURL")] Hotel hotel,HttpPostedFileBase file)
{
if (file != null)
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/Content/img/hotel"), fileName);
file.SaveAs(path);
hotel.ImageURL = path;
}
if (ModelState.IsValid)
{
db.Hotels.Add(hotel);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.StateId = new SelectList(db.States, "Id", "StateName", hotel.StateId);
return View(hotel);
}
after saving data everything will be save correctly except ImgURL. its data is null after saving and also even before code comes t this command if (ModelState.IsValid){...}.
I suppose whole part
if (file != null)
{
//...
}
Not working
You should use
Html.BeginForm("", "", FormMethod.Post, new { enctype="multipart/form-data"})
You don't have file becouse on POST selected file data is not been serialized without enctype="multipart/form-data" attribute on form tag.

Client validation in Partial View submiting

When Partial View load in _Layout directly, I have no Problem in Client Validation and shows field by filed error, But When call Partial View as same as one part of index page:
#Html.Partial("_CreateUser", Model)
_CreateUser PartialView:
#model ProjInMvc.Models.User
<div id="update_panel"></div>
#using (Ajax.BeginForm("CreateUser", "Home",null, new AjaxOptions { UpdateTargetId = "update_panel", Url = "/Home/CreateUser", HttpMethod = "Post",InsertionMode =InsertionMode.Replace }, new { #class = "pull-right" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<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.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 class="form-group">
#Html.LabelFor(model => model.UserName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.UserName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default")" />
</div>
</div>
</div>
}
Can anyone help me to understand this problem?
Tnx.
You may be call in Html.BeginForm, form in form is incorrect, please check that

Want to use same model twice on same view with different type?

Currently I am working with asp mvc view
I want to render data on one view...that have display data and create form on same view but it can not be done..because controller return IEnumerable type data and create form's editorfor does not contain definition for that.
I have one model "T4.Models.Order"
if i use this model as #model IEnumerable<T4.Models.Order>
create form razor syntax shows error
if i use this model as #model T4.Models.Order
display data show's error
Here is my code
#model IEnumerable<T4.Models.Order>
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.CustomerID)
</th>
<th>
#Html.DisplayNameFor(model => model.CustomerID)
</th>
<th>
#Html.DisplayNameFor(model => model.OrderDate)
</th>
<th>
#Html.DisplayNameFor(model => model.RequiredDate)
</th>
<th>
#Html.DisplayNameFor(model => model.ShippedDate)
</th>
<th>
#Html.DisplayNameFor(model => model.ShipVia)
</th>
<th>
#Html.DisplayNameFor(model => model.Freight)
</th>
<th>
#Html.DisplayNameFor(model => model.ShipName)
</th>
<th>
#Html.DisplayNameFor(model => model.ShipAddress)
</th>
<th>
#Html.DisplayNameFor(model => model.ShipCity)
</th>
<th>
#Html.DisplayNameFor(model => model.ShipRegion)
</th>
<th>
#Html.DisplayNameFor(model => model.ShipPostalCode)
</th>
<th>
#Html.DisplayNameFor(model => model.ShipCountry)
</th>
</tr>
</thead>
#*#{
IEnumerable<T4.Models.Order> m = #model;
}*#
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.CustomerID)
</td>
<td>
#Html.DisplayFor(modelItem => item.EmployeeID)
</td>
<td>
#Html.DisplayFor(modelItem => item.OrderDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.RequiredDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShippedDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShipVia)
</td>
<td>
#Html.DisplayFor(modelItem => item.Freight)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShipName)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShipAddress)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShipCity)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShipRegion)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShipPostalCode)
</td>
<td>
#Html.DisplayFor(modelItem => item.ShipCountry)
</td>
</tr>
}
</table>
</body>
</html>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Order</h4>
<hr />
#Html.ValidationSummary(true)
<div class="form-group">
#Html.LabelFor(model => model.CustomerID, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CustomerID)
#Html.ValidationMessageFor(model => model.CustomerID)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.EmployeeID, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.EmployeeID)
#Html.ValidationMessageFor(model => model.EmployeeID)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OrderDate, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.OrderDate)
#Html.ValidationMessageFor(model => model.OrderDate)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.RequiredDate, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.RequiredDate)
#Html.ValidationMessageFor(model => model.RequiredDate)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ShippedDate, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ShippedDate)
#Html.ValidationMessageFor(model => model.ShippedDate)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ShipVia, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ShipVia)
#Html.ValidationMessageFor(model => model.ShipVia)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Freight, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Freight)
#Html.ValidationMessageFor(model => model.Freight)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ShipName, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ShipName)
#Html.ValidationMessageFor(model => model.ShipName)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ShipAddress, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ShipAddress)
#Html.ValidationMessageFor(model => model.ShipAddress)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ShipCity, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ShipCity)
#Html.ValidationMessageFor(model => model.ShipCity)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ShipRegion, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ShipRegion)
#Html.ValidationMessageFor(model => model.ShipRegion)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ShipPostalCode, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ShipPostalCode)
#Html.ValidationMessageFor(model => model.ShipPostalCode)
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ShipCountry, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.ShipCountry)
#Html.ValidationMessageFor(model => model.ShipCountry)
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
Controller Code:
public ActionResult Index()
{
return View(db.Order.ToList());
}
Note : I don't want to change anything on controller side.
Just create the object of model class and use to render your form..
Here is the code
#{
T4.Models.Order o = new T4.Models.Order();
}
Your Form
#using (Html.BeginForm("Create","Orders"))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Order</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => o.CustomerID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.CustomerID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.CustomerID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.EmployeeID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.EmployeeID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.EmployeeID, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.OrderDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.OrderDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.OrderDate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.RequiredDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.RequiredDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.RequiredDate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.ShippedDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.ShippedDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.ShippedDate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.ShipVia, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.ShipVia, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.ShipVia, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.Freight, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.Freight, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.Freight, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.ShipName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.ShipName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.ShipName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.ShipAddress, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.ShipAddress, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.ShipAddress, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.ShipCity, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.ShipCity, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.ShipCity, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.ShipRegion, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.ShipRegion, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.ShipRegion, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.ShipPostalCode, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.ShipPostalCode, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.ShipPostalCode, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => o.ShipCountry, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => o.ShipCountry, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => o.ShipCountry, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
If you want to list the existing orders and show the create form in the same view, you should create a new view model which has properties for this. You can inherit this from your existing T4.Models.Order.
public class CreateAndListVm : T4.Models.Order
{
public List<Order> Orders { set;get;}
public CreateAndListVm()
{
this.Orders = new List<Order>();
}
}
Now your view will be strongly typed to this view model
#model CreateAndListVm
<h2>New item</h2>
#using(Html.BeginForm())
{
#Html.TextBoxFor(s=>s.CustomerID)
<input type="submit" />
}
<h3>Existing orders</h3>
#foreach(var item in Model.Orders)
{
<p>#item.CustomerID</p>
}
Ofcourse that means, you should send an object of CreateAndListVm from your action method.
public ActionResult Index()
{
var vm = new CreateAndListVm();
// to do : Load the orders to vm.Orders;
return View(vm)
}
If you do not want to change the controller and it is returning a collection of Order to the view, you have another alternative. Don't use the Html helper methods to generate the input form fields. Just write the html code for the input fields yourself.
Assuming your action method is returning a list of Order class
public ActionResult Index()
{
var orders = new List<Order>();
return View(orders);
}
Now in your view which is strongly typed to a collection of Order
#model IEnumerable<Order>
<h2>Create</h2>
<form action="Create" method="POST">
<input type="text" name="CustomerID" />
<input type="submit" />
</form>
<h3>Existing orders</h3>
#foreach(var item in Model)
{
<p>#item.CustomerID</p>
}

Bootstrap two column layout for MVC create view

I have scaffolded a standard create view for one of my forms using MVC bootstrap. This form however has too many input fields to have in a single column layout, its just too long and seems daft to waste the white space to the right.
I've had a look at this question and tried to get it working with my form with not much luck.
In a nutshell I want the address fields to be on the right, in line with all the other fields.
Razor Snippet
<div class="row">
<div class="col-sm-4">
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Department, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Department, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Department, "", new { #class = "text-danger" })
</div>
</div>
So AddressLineOne should be on the same row as SiteNumber, AddressLineTwo should be on the same rowas SiteName and so on and so forth.
This is what I get with the above attempt for the first row:
And this is what I want:
How do I achieve this, whilst keeping the labels and standard spacing to the left.
This is what you want.
.clearfix{
clear: both;
padding: 0;
margin: 0;
height: 5px;
display: block;}
<div class="row">
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.Department, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-9">
#Html.EditorFor(model => model.Department, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Department, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
Basically
<div class="row">
<div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you -->
<div class="form-group">
#Html.LabelFor(model => model.SiteNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.SiteName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.SiteName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.SiteName, "", new { #class = "text-danger" })
</div>
</div>
<!-- Continue your first column of form groups here -->
</div>
<div class="col-md-6"> <!-- Adjust this to be sm/md/lg, whatever fits best for you-->
<div class="form-group">
#Html.LabelFor(model => model.AddressLineOne, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineOne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineOne, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.AddressLineTwo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.AddressLineTwo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.AddressLineTwo, "", new { #class = "text-danger" })
</div>
</div>
<!-- Continue your second column of form groups here -->
</div>
</div>
For me it was enough to do it like this:
<div class="form-group">
#Html.LabelFor(model => model.LOA_ID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.LOA_ID, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
#Html.ValidationMessageFor(model => model.LOA_ID, "", new { #class = "text-danger" })
</div>
#Html.LabelFor(model => model.LI_ID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.LI_ID, new { htmlAttributes = new { #class = "form-control", #readonly = "readonly" } })
#Html.ValidationMessageFor(model => model.LI_ID, "", new { #class = "text-danger" })
</div>
</div>

Resources