I want to display a DropDownList and a Link next to it, using MCV5 and Bootwatch (CSS)
View:
<div class="form-group">
<label class="control-label col-md-2" for="productoID">Producto</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-6">
#Html.DropDownListFor(model => model.productoID, null, "-- Seleccione un Producto --", new { #id = "producto", #Selected = false, #class = "form-control" })
#Html.ValidationMessageFor(model => model.productoID)
</div>
<div class="col-md-2">
#Html.ActionLink("+", "../Producto/Create")
</div>
</div>
</div>
</div>`
Actually they are displayed on same line, but not next to each other, there is an space I cannot remove.
You cannot get rid of the space because you are putting the dropdown list and the anchor in separate columns.
You want to put them in the same column using an inline form.
Related
Screen Shot ImageWith below code, an unwanted button is coming with default dropdownlist. please help me to remove this button.
<div class="row form-group">
<div class="col col-md-3"><label>Nationality</label></div>
<div class="col-12 col-md-9">
#Html.DropDownListFor(m => m.DESelectedNationality, Model.Nationalities, new { #class = "form-control" })
</div>
</div>
i expect dropdownlist with out button, but the actual result is dropdownlist with button. Screenshot attached.
I am currently trying to create/remove certain elements based on the selections in a listbox. My listbox is as follows:
<div class="form-group" id="subIngredients">
#Html.LabelFor(model => model.Recipe.SubIngredientIds, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.ListBoxFor(model => model.Recipe.SubIngredientIds, new MultiSelectList(ViewBag.PossibleIngredients, "Value", "Text", ViewBag.SelectedIngredients), new { #class = "form-control multiselect", style = "height:200px" })
#Html.ValidationMessageFor(model => model.Recipe.SubIngredientIds, "", new { #class = "text-danger" })
</div>
</div>
and my html elements (an input field and a dropdownlist) are as follows:
<div class="editor-label">
<label class="control-label" for="Subitem_#Model.IngredientIdNamePairs.ElementAt(i).Key">#Model.IngredientIdNamePairs.ElementAt(i).Value</label>
</div>
<div class="editor-field">
<div style="display:inline-block">
<input class="form-control text-box single-line subq" data-val="true" data-val-number="The field #Model.IngredientIdNamePairs.ElementAt(i).Value must be a number." data-val-range="Please enter a valid decimal" data-val-range-max="1.79769313486232E+308" data-val-range-min="0" data-val-required="The #Model.IngredientIdNamePairs.ElementAt(i).Value field is required." id="RegularSize_SubIngredientRuns_#Model.IngredientIdNamePairs.ElementAt(i).Key" name="RegularSize.SubIngredientRuns[#Model.IngredientIdNamePairs.ElementAt(i).Key]" type="text" value="#(Model.RegularIngredientIdValuePairs != null && Model.RegularIngredientIdValuePairs.ContainsKey(Model.IngredientIdNamePairs.ElementAt(i).Key) ? Model.RegularIngredientIdValuePairs[Model.IngredientIdNamePairs.ElementAt(i).Key] : 0)" />
</div>
<div style="display:inline-block">
#Html.DropDownListFor(m => m.SelectedRecipeUnit, Model.BaseUnitOptions, "Select Unit", new { #class = "form-control dropdownlistReg", #data_key = #Model.IngredientIdNamePairs.ElementAt(i).Key })
</div>
<span class="field-validation-valid text-danger" data-valmsg-for="Subitem_#Model.IngredientIdNamePairs.ElementAt(i).Key" data-valmsg-replace="true"></span>
</div>
And an image to illustrate:
how can I create a new input field and dropdownlist for each item selected in the listbox? All help is appreciated.
You won't be able to do it on the fly with .Net MVC. You'll have to include some javascript.
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<body>
<select id="bigList" name="sometext" size="5" multiple>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
<option>text5</option>
</select>
<select id="ddl">
</select>
</body>
$("#bigList").click(function()
{
var results = $(this).find(':selected');
$("#ddl").empty();
for(var cnt=0; cnt < results.length; cnt++)
{
$("#controlz").append(results[cnt].text + "<input type=textbox></input> </br>");
// $("#ddl").append("<option>" +results[cnt].text + "</option>");
}
});
I put it in a JS fiddle here: https://jsfiddle.net/w0z144s1/9/
I just cant fix something that seems so easy.
I want a textbox (editorfor) for a model property and I would like to increase its width but nothing is happening. I'm using the code as listed below. I tried setting the width to 500px but nothing happens. Ideally I would like the textbox to stretch over the full width of the container. Any ideas?
#if (Model.isAnswerVisible)
{
<div class="form-group">
<div class="col-md-10">
<div class="input-group">
<span class="input-group-addon">#Model.AreaNameAnswer</span>
#Html.EditorFor(model => model.Answer, new { htmlAttributes = new { id = "answer", style = "width: 500px", onkeyup = "limitCharacters()", #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.Answer, "", new { #class = "text-danger" })
<span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Leg kort uit wat jouw antwoord is op de vraag"></span>
<label id="lblCountAnswer" style="color: green">#Model.MaxTokensAnswer</label>
</div>
</div>
}
The default MVC5 template has a css rule in Site.css:
input, select, textarea { max-width: 280px; }
I usually remove this rule.
It causes problems with Bootstrap v3 input group where the input box does not extend to its container's width.
Reverse the order of your elements and you get a gap:
Instead of this
<div class="row">
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-primary">OK</button>
</span>
</div>
</div>
</div>
I am using a form to capture various items from users, but I cant seem to get them to display the way I want.
I'm using bootstrap to have 2 columns of text boxes and their associated labels.
Unfortunately when it get to the last EditorFor, it displays out of line with the rest.
Am I using the divs and column options wrong?
Also how would I go about adding some space between the top and bottom of the text boxes?
Using padding in css?
What I'd like is to have the last label start at the left and then the textbox to be in line with it and take up the rest of the space in that column, maybe add a little space in between the rows.
Here is the code in my View
#model iskbv5.Models.Vendor
#{
ViewBag.Title = "Add New Vendor";
}
<h2>#ViewBag.Title</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<hr />
<div class="form-group">
<div class="control-label col-md-2">
Vendor Name
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Website
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Website, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Address
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Address, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Username
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Username, new { htmlAttributes = new { #class = "form-control " } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
User Managing the Vendor
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.ManagingUser, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Vendor Password
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Password, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="form-group">
<div class="control-label col-md-2">
Reason We Use the Vendor
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Usage, new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<div class="col-md-12">
<input type="submit" value="Create" class="btn btn-xs btn-primary" /> or
Cancel
</div>
}
I have the Usage property set to
[DataType(DataType.MultilineText)]
public string Usage { get; set; }
This is how it currently displays.
Ahh, after making a few adjustments, and adding a <br/> in between each "row", I got the desired look. Thanks.
In this instance I have two pages, in the post method of the first I return the view/viewmodel of the second like so :
[HTTPPost]
public Task<ActionResult> Page1(Page1Model model)
{
var Page2Model = GrabDataMethod(model);
return View("Page2", Page2Model); //Point 1
}
[HTTPPost]
public Task<ActionResult> Page2(Page2Model model //Point 2)
{
var updatedModel= RunFiltersMethod(model)
return View(updatedModel);
}
Now, in this case Page2 renders properly from (Point 1) with all values passed in above from the GrabDataMethod. However, when I POST for Page2 the Page2Model I receive at (Point 2) has none of the original entries, e.g. everything not modified directly by Page2 itself is null or default (in fact it seems the model from the post method is a new model entirely). I've made a horrible workaround for the time being, but I need a proper fix, is there any reason that this would be happening?
Page2 View Code
#model Mvc2013.Models.Page2Model
#using (Html.BeginForm("Page2", "Controller"))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true)
<div class="row">
<div class="col-md-12">
#Html.Kendo().Chart(<!-- code removed, this is working -->)
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="col-md-8">
#Html.LabelFor(model => model.Prop1, new { #class = "control-label" })
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Prop1, new { #class = "control-label" })
#Html.ValidationMessageFor(model => model.Prop1)
</div>
</div>
<div class="col-md-3">
<div class="col-md-8">
#Html.LabelFor(model => model.Prop2, new { #class = "control-label" })
</div>
<div class="col-md-4">
#Html.EditorFor(model => model.Prop2, new { #class = "control-label"})
#Html.ValidationMessageFor(model => model.Prop2)
</div>
</div>
</div>
<!-- This carries on similarly for lots more attributes -->
<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>
}
Inside the Beginform you should add #Html.HiddenFor(model => model.Something) where the Something are the properties which you want back on the postback.
If you don't then the property values will be default values.