So I have some text, an Html.LabelFor on the left, and some raw text (as #Html.DisplayText simply does not work).
I end up with the above awfulness. I've tried to set the div alignment explicitly, to no avail. What am I missing here?
<div class="form-group" style="align-items:center">
#Html.LabelFor(model => model.seniority, htmlAttributes: new { #class = "control-label col-md-2" })
#Model.seniority.ToString()
</div>
Here is the approach you should use when using bootstrap
<div class="form-group" style="align-items:center">
<div class="col-md-2">
#Html.LabelFor(model => model.seniority)
</div>
<div class="col-md-3">
#Model.seniority
</div>
</div>
Related
I got a form-group that I've customized for large and small displays. The markup is as follows:
<div class="form-group row">
#Html.LabelFor(model => model.ValidFrom, "Valid from", htmlAttributes: new { #class = "col-lg-3 col-sm-3 col-form-label" })
<div class="col-lg-4 col-sm-9">
#Html.EditorFor(model => model.ValidFrom, new { htmlAttributes = new { #class = "form-control", type = "date" } })
</div>
#Html.LabelFor(model => model.ValidTo, "to", htmlAttributes: new { #class = "col-lg-1 col-sm-3 col-form-label" })
<div class="col-lg-4 col-sm-9">
#Html.EditorFor(model => model.ValidTo, new { htmlAttributes = new { #class = "form-control", type = "date" } })
</div>
</div>
It works pretty well, when the display is wide it shows all content on one line making up 12 columns, and when smaller it breaks it up into two lines.
However, the two lines are packed tight together, and doesn't have the nice spacing the rest of the form groups have.
Any css class I'm missing?
-- EDIT --
HTML:
<div class="form-group row">
<label class="col-lg-3 col-3 col-form-label" for="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidFrom">Valid from</label>
<div class="col-lg-4 col-9">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field ValidFrom must be a date." id="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidFrom" name="Triggers[39a5c999-81dc-46bf-80f0-b6450f2821b7].Actions[9207165e-9c24-4928-a2ff-503a7f9779dd].MvaMapping[b3c825b7-e5fc-4812-8339-baae0a7ac16a].ValidFrom" type="date" value="">
</div>
<label class="col-lg-1 col-3 col-form-label" for="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidTo">to</label>
<div class="col-lg-4 col-9">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field ValidTo must be a date." id="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidTo" name="Triggers[39a5c999-81dc-46bf-80f0-b6450f2821b7].Actions[9207165e-9c24-4928-a2ff-503a7f9779dd].MvaMapping[b3c825b7-e5fc-4812-8339-baae0a7ac16a].ValidTo" type="date" value="">
</div>
</div>
You can make use of the margin and padding classes.
.my-2.my-sm-0 // would add a vertical margin on xs devices
I have a page which has a list of Students. The partial view which renders a list is called "StudentManager". The partial view which I use in a modal to create a new student is called "NewStudent".
I have a couple of issues going on with this controller code. For some reason, after I press submit on the "NewStudent" partial view, every time afterwards that I refresh the page a new student is there without me going in and pressing submit... This is a problem.
Also, I have searched similar topics here on stack and I cannot seem to understand why return PartialView("StudentManager",db.Students.ToList()); will not automatically refresh my "StudentManager" view.
This code is supposed to give me a list in one partial view, and another partial view is supposed to let me create a new list item and then tell the list partial view to update.
Controller:
public ViewResult Index()
{
return View();
}
public ActionResult StudentManager()
{
return PartialView(db.Students.ToList());
}
public ActionResult NewStudent()
{
return PartialView();
}
//
// POST:
[HttpPost]
public ActionResult NewStudent(Student student)
{
if (ModelState.IsValid)
{
db.Students.Add(student);
db.SaveChanges();
return RedirectToAction("Index");
}
return PartialView();
}
Index.cshtml:
#Html.Action("StudentManager", "StudentController")
<div class="modal modal-wide fade" id="myModal4" role="dialog">
<div class="modal-dialog">
#Html.Action("NewStudent", "StudentController")
</div>
</div>
Here is the "NewStudent.cshtml" view:
#model GunneryTracker.Models.Student
<fieldset>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<center>
<h4 class="modal-title">New Student</h4>
</center>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="clearfix"></div>
<div class="x_content">
<br />
<form class="form-horizontal form-label-left" >
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12">
<label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right:10px">Course</label>
<div class="col-md-3 col-sm-3 col-xs-12">
#Html.DropDownList("CourseID", null, "-- Select Course --", htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CourseID, "", new { #class = "text-danger" })
</div>
<label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right:10px">Location</label>
<div class="col-md-3 col-sm-3 col-xs-12">
#Html.DropDownList("LocationID", null, "-- Select Location--", htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.LocationID, "", new { #class = "text-danger" })
</div>
</div>
<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>
<br />
<br />
<div class="form-group">
<center>
<p>
<input type="submit" value="Create" />
</p>
</center>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
</fieldset>
Pardon the slouchy html... The prettyfication isnt completed...
Answer to 2nd question(if I understood what you meant):
It's not that smart as you expected.
After POST better to send back JSON result or simple null if don't use Ajax.
I would suggest you after POST do return RedirectToAction("Index");
Then page auto refresh students list.
Or do your POST via $.ajax and on success update student list using jquery or js
here is how I'm usually do it for simple "admin page" forms.
public ActionResult Teams()
{
var list = _data.GetTeams(true);
return View(list);
}
public ActionResult TeamCreate()
{
var model = _data.GetTeamCRUDViewModel();
return PartialView("_TeamCreate",model);
}
[HttpPost]
public ActionResult TeamCreate(TeamCRUDViewModel model)
{
_data.SaveTeam(model);
return RedirectToAction("Teams");
}
But on customer UI I would recommended to use $.ajax post.
Update:
Ok I see your issue
#model Student
<fieldset>
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<center>
<h4 class="modal-title">New Student</h4>
</center>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="clearfix"></div>
<div class="x_content">
<br />
#using (#Html.BeginForm("NewStudent", "Home", FormMethod.Post))
{
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12">
<label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right: 10px">Course</label>
<div class="col-md-3 col-sm-3 col-xs-12">
#Html.DropDownList("CourseID", null, "-- Select Course --", htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CourseID, "", new { #class = "text-danger" })
</div>
<label class="control-label col-md-2 col-sm-2 col-xs-12" style="margin-right: 10px">Location</label>
<div class="col-md-3 col-sm-3 col-xs-12">
#Html.DropDownList("LocationID", null, "-- Select Location--", htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.LocationID, "", new { #class = "text-danger" })
</div>
</div>
<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>
<br/>
<br/>
<div class="form-group">
<center>
<p>
<input type="submit" value="Create"/>
</p>
</center>
</div>
}
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
</div>
</div>
Also change
#Html.Action("StudentManager", "StudentController") to #Html.Action("StudentManager", "Student")
like if should be name of controller
There's a fundamental misunderstanding here about how things work. A client makes a request to a server and the server returns a response. The client, then, generally does something with that response. In the case of a web browser, it clears the current view in the tab/window, parses the response and renders it into that tab/window. There's actually a lot more that goes on, but I'm trying to keep it simplistic.
However, AJAX (or specifically the XMLHttpRequest object in JavaScript) is what you would call a thin client. It's like a little web browser within your web browser, only without all the bells and whistles. All it does is submit requests and deliver the response to a callback. That callback is a JavaScript function whose job is to do something with the response. If the goal is to replace some portion of HTML on the page, the JavaScript code in the callback must do that. It does not happen automatically.
It's also important to realize that a "partial view" is only a thing server-side. Whether MVC is returning a partial view, a normal view, or even a view composed from various partial views is all inconsequential. What the server returns to the client is just an HTML document. In the case of the client being a web browser, it then parses that HTML document and builds what's called the Document Object Model, or DOM. It then uses the DOM to "render" the page as formatted images and text.
Likewise, all an AJAX request returns is an HTML document, which is itself really just a text document with a mime type of "text/html" that informs the client that it should be treated as HTML. As I said, it's the job of the AJAX callback to do something with this response from the server, but the point here is that you can't just say "replace that partial with this HTML", because the concept of partials doesn't exist client side. All you have is a object graph (the DOM), and you must select something from the DOM and then insert the HTML into that.
I want to use label as used "Static Control" label on that page. However, although I use the same Bootstrap version, I cannot aligned my form controls like that (I want the label is right float, data fields is left float -side by side - and there is a ":" sign between them. Howwver, the result is as shown on the image below. Could you please have a look at my code and inform what is wrong?
The code on that page:
<div class="form-group">
<label class="col-md-3 control-label">Static Control</label>
<div class="col-md-9">
<p class="form-control-static"> email#example.com </p>
</div>
</div>
The code I use on my Razor page:
<div class="form-group">
#Html.LabelFor(m => m.Name, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
<br />
<div class="form-group">
#Html.LabelFor(m => m.Surname, new { #class = "col-md-3 control-label" }):
<div class="col-md-9">
#Html.DisplayFor(m => m.Surname, new { #class = "form-control-static" })
</div>
</div>
You have two elements which equal 100% width plus the colon, so it pushes the value down a line. You'll need to just code the label instead of using an HtmlHelper to add the colon. Change it to this:
<div class="form-group">
<label class="col-md-3 control-label">#Model.Name:</label>
<div class="col-md-9">
#Html.DisplayFor(m => m.Name, new { #class = "form-control-static" })
</div>
</div>
Here is the final solution fixed the problem. Thanks a lot for all of your helps...
<style>
.col-sm-3 .control-label {
float: right !important;
margin-top: 0 !important;
}
/*Add colon ( : ) to the end of labels */
.col-sm-3 > label:after {
content: " :";
}
</style>
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Name, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Name)
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-3">
#Html.LabelFor(m => m.Surname, new { #class = "control-label" })
</div>
<div class="col-sm-9">
#Html.DisplayFor(m => m.Surname)
</div>
</div>
<br />
I use bootstrap template on ASP.MVC (but it's minor fact). I have this code on View:
<div class="form-group">
#Html.LabelFor(model => model.udk_number, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.udk_number, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.udk_number, "", new { #class = "text-danger" })
</div>
</div>
But #Html.EditorFor have limited length. How i can increase length of this input?
Similar problem i have and with TextArea:
<div class="form-group">
<label class="col-lg-2 control-label" for="annotation_ru">Аннотация(RU)</label>
<div class="col-lg-10">
<textarea class=form-control id="annotation_ru" name="annotation_ru" rows="3" cols="100"></textarea>
<span class="field-validation-valid text-danger" data-valmsg-for="annotation_ru" data-valmsg-replace="true"></span>
</div>
</div>
I can stretch this area only to the same length as that of the input in example above.
Style your <input> fields using CSS. I usually make them 100% wide so that they are nice and responsive.
input[type=text],
textarea {
width: 100%;
}
Im using the following code and I cannot change the size of the text box to make it bigger than 700,how can I change it to 1000?
<div class="form-group">
#Html.LabelFor(model => model.Service, new { #class = "col-md-2 oper-label" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.Service, new { #style = "width: 700px;" })
</div>
</div>
</div>
I am not familiar with the language that you are using, but if you just use an HTML <textarea> it will work.
Bootply example
<div class="form-group">
<div class="col-md-10">
<textarea class="form-control" style="width: 700px;"></textarea>
</div>
</div>
This code will produce a <textarea> that is 700 pixels wide like this:
Adjust the width to change the width of the textarea. Another option would be to do this, which produces a textarea that will be approximately 80% of the browser width:
<div class="form-group">
<div class="col-md-10">
<textarea class="form-control"></textarea>
</div>
</div>
You cannot just change class="col-md-10" to class="col-md-11" (or col-md-12) or simply remove <div class="col-md-10"> ?
Check this link out for more information about bootstrap grid system : http://getbootstrap.com/css/#grid-example-basic