I have code below that creates form with a Dropdown and edit. How can I set width for each individually.
#using (Html.BeginForm())
{
<div class="form-horizontal" style="background-color:azure">
<div class="form-group">
#Html.LabelFor(model => model.EmployeeID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("EmployeeID", null, htmlAttributes: new { #class = "form-control" })
</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" } })
</div>
</div>
</div>
}
I tried below , but it dosen't work.
#Html.EditorFor(model => model.Description, new { htmlAttributes = new { #class = "form-control", style = "Width:250px" } })
You are using Bootstrap, why not use it to control the size?
Here is an answer about it.
Input widths on Bootstrap 3
Or you can create a class with defined sizes and apply these classes.
Related
Good day guys,
I have a view that i need to search for customer Account details first and not reloading the page.
The user enters the customer Account number and then press the search button.
I have implemented below but it keeps throwing the error part that account number not exist.
// This is the View
#model CreditFacility_Web.Models.CreditFacilityModel.Transaction
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="w3-container" style="padding-left:60px">
#{
ViewBag.Title = "Credit Transaction";
}
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h2>Credit Transaction</h2>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.Account_Number, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Account_Number, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Account_Number, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<button value="Search" class="btn btn-primary">Search</button>
</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.Surname, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Surname, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Surname, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Phone_Number, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Phone_Number, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Phone_Number, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Account_Type, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Account_Type, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Account_Type, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Old_Balance, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Old_Balance, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Old_Balance, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Amount, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Amount, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Amount, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.New_Balance, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.New_Balance, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.New_Balance, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Transaction_Type, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Transaction_Type, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Transaction_Type, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.Narration, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Narration, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Narration, "", 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-success" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$(".btn-primary").click(function () {
var accNo = $('#Account_Number').val();
$.ajax({
url: "#Url.Action("AccountDetails", "Transactions")",
type: "POST",
dataType: "json",
data: { accountNo : accNo },
async: false,
error: function () {
alert('Account Number do not Exist Or Other Errors Occurred');
},
success: function (data) {
if (Object.keys(data).length > 0) {
$('#Firstname').val(data.Firstname);
$('#Old_Balance').val(data.Account_Balance);
}
}
});
});
});
</script>
}
Below is the Controller
[HttpPost]
public JsonResult AccountDetails(string accountNo)
{
using (CreditFacilityContext dataContext = new CreditFacilityContext())
{
var accSearchParameter = new SqlParameter("#Account_Number", accountNo);
var accDetails = dataContext.Database.SqlQuery<SavingsAccount>("spGetAccountDetails", accSearchParameter).Select(s => new SavingsAccount
{
Firstname = s.Firstname,
Account_Balance = s.Account_Balance,
//rest of properties
}).SingleOrDefault();
return Json(accDetails, JsonRequestBehavior.AllowGet);
}
}
First thing you want to do is remove that async: false. It does nothing other than tie up the main thread while the transaction is carried out.
I suggest checking that in the HTML that is generated, your input actually has the id of Account_Number and not an auto generated ID. You can manually set an ID of your choosing as well.
The JS should check the value of accNo before sending anything to the backend.
i use CKEditor in Create view for save Text to Database Model using below code
<div class="row">
<div class="col">
#Html.LabelFor(model => model.Body, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col">
#Html.EditorFor(model => model.Body, new { htmlAttributes = new { #class = "form-control" } })
<script>
CKEDITOR.replace("Body", { htmlEncodeOutput: true });
</script>
#Html.ValidationMessageFor(model => model.Body, "", new { #class = "text-danger" })
</div>
</div>
i use CKEDITOR.instances['Body'].setData(#Model.Body); but it not work
but when i put this code in Edit view CKEditor Dont show returned model text
how can i set model string field to ckeditor?
you can use TextAreaFor instead of EditorFor:
<div class="row">
<div class="col">
#Html.LabelFor(model => model.Body, htmlAttributes: new { #class = "control-label col-md-2" })
</div>
<div class="col">
#Html.TextAreaFor(model => model.Body, new { htmlAttributes = new { #class = "form-control" } })
<script>
CKEDITOR.replace("Body", { htmlEncodeOutput: true });
</script>
#Html.ValidationMessageFor(model => model.Body, "", new { #class = "text-danger" })
</div>
</div>
I am using scaffolding for ASP.NET MVC model first development.
The created views look good, but they are laid out with one field per line. I am trying to get multiple fields to display on a single line in some places, but cannot find the best way to do this, while still having the input fields appear nicely formatted.
The razor code generated is like this:
<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.MiddleName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", 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>
If I strip out all the Bootstrap CSS classes, I can do it, but then I lose the nice formatting of the input fields.
First, each form-group automatically gets its own line. It employs a clearfix to ensure that nothing else wraps around it. Second, even if it didn't, each of your label/field combos are consuming 12 columns. Since there's only 12 columns to work with in the Bootstrap grid, each would wrap to a new line anyways.
There's two options here. If you want multiple fields on the same line, under the same label, you can simply put them all within your col-md-10 div within the form-group:
<div class="form-group">
<label class="control-label col-md-2" for="#Html.IdFor(m => m.FirstName)">Name</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", new { #class = "text-danger" })
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.LastName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.LastName, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
Alternatively, you can simply put each form-group into a column within an overall row:
<div class="row">
<div class="col-md-4">
<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>
<div class="col-md-4">
<div class="form-group">
#Html.LabelFor(model => model.MiddleName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.MiddleName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.MiddleName, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="col-md-4">
<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>
</div>
With this option, though, you should probably avoid the form-horizontal layout and simply stack your label on top of your fields. Otherwise, the labels are going to consume too much of the horizontal space.
All of this is just basic Bootstrap grid markup, though. There's nothing special about the fact that you're dealing with form elements.
I do scaffolding and i have this in my view:
<div class="form-group">
#Html.LabelFor(model => model.Plano, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Plano, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Plano, "", new { #class = "text-danger" })
</div>
</div>
But i want return in checkbox or onclick a int value to my model.Plano, it's possible ?
I have a problem concerning a modal (bootstrap) I want to open. I want to include a partial view.
(I am boing to post my code in a few minutes).
Here is the objective :
1- I have an Index.cshtml page where a link call a javascript
<div class="profile-userbuttons">
#Html.ActionLink("Modifier", "Edit", "Profil", null, new { #class = "modal-link btn btn-success"#*, id = Model.userLog*# })
</div>
(Note that I have commented the second (id) parameter in my anonymous type).
(This parameter should be a object of type userLog).
Then a click on this link call a javascript script :
<!-- Calling Modals -->
<script type="text/javascript">
$(function () {
// Initialize numeric spinner input boxes
//$(".numeric-spinner").spinedit();
// Initialize modal dialog
// attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
alert(1);
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
alert(2);
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
alert(3);
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
</script>
And of course, the modal div is present in the Index.cshtml :
<!-- Modal -->
<div id="modal-container" class="modal fade"
tabindex="-1" role="dialog">
<div class="modal-content">
</div>
</div>
Remark that the modal is empty. My script is in charge of filling it.
But lets return to my ActionLink. the Action link target a Action : "Edit", in my Controller "Profil"
Here it is :
public ActionResult Edit(/*userslog id*/)
{
return PartialView("Edit"/*,id*/);
}
(I have commented the parameter, to test it was a "parameter passing" issue).
As you read it you see it should return a partial view named "Edit".
here it is :
#model WebSiteModels.Models.userslog
#{
ViewBag.Title = "Edit";
}
<div class="modal-body">
<div class="alert alert-warning">
<h2>Edit</h2>
<h3>YO !</h3>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>userslog</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.id)
<div class="form-group">
#Html.LabelFor(model => model.photo, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.photo, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.photo, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.age, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.age, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.age, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.nom, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.nom, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.nom, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.prenom, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.prenom, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.prenom, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.sex, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.sex, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.sex, "", 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.telephone, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.telephone, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.telephone, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.adresse, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.adresse, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.adresse, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.lattitude, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.lattitude, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.lattitude, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.longitude, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.longitude, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.longitude, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.idpersonne, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.idpersonne, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.idpersonne, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.idcontact, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.idcontact, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.idcontact, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateCreation, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateCreation, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DateCreation, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.DateModification, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.DateModification, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.DateModification, "", new { #class = "text-danger" })
</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>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Cancel
</button>
<button type="submit" id="approve-btn"
class="btn btn-danger">
Save
</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#approve-btn').click(function () {
$('#modal-container').modal('hide');
});
});
</script>
And when I test it, here is the capture screen I obtain :
Capture screen result : modal seems to be called, but in the browser console, is empty
So here is my problem. My partial view is not called despite the modal is opened. Moreover, when I open it in the browser : every thing appears well.
What do I miss ?
Have you tried to fill the modal content using JQuery with something like(see NEW LINE):
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
alert(2);
**//// NEW LINE
$(".modal-content").load("/Profil/Edit");
////**
alert(3);
});
and convert the Html.ActionLink to simple <a class='modal-link' data-target='#modal-container' data-toggle='modal'></a> tag with same attributes.