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.
Related
I have two dropdown list that value get from database, second dropdown list (Recver) is depend on first dropdown list choice , how to get the first dropdown list (RecvCom) value when user have pick one ?
in my view ,
<div class="col-xl-4 col-md-6 col-12">
<div class="row">
<div class="col-xl-4 col-md-4 col-12 form-title">
Receive Company
</div>
<div class="col-xl-8 col-md-8 col-12 form-data">
#Html.DropDownList("RecvCom", "Please choose")
#*#Html.TextBoxFor(model => model.RecvCom, new { placeholder = ModelsAttributeHelper<SubMIS.Models.RecvCom>.GetDisplayName("RecvCom") })*#
#Html.ValidationMessageFor(model => model.RecvCom)
</div>
</div>
</div>
<div class="col-xl-4 col-md-6 col-12">
<div class="row">
<div class="col-xl-4 col-md-4 col-12 form-title">
#Html.LabelFor(model => model.Recver)
</div>
<div class="col-xl-8 col-md-8 col-12 form-data">
#Html.DropDownList("Recver", "Please choose")
#*#Html.TextBoxFor(model => model.Recver, new { placeholder = ModelsAttributeHelper<SubMIS.Models.Recver>.GetDisplayName("Recver") })*#
#Html.ValidationMessageFor(model => model.Recver)
</div>
</div>
</div>
in my macontroller,
ViewBag.RecvCom = new SelectList(_db.Members.Where(p=>p.TradeName != null).Select(p => p.TradeName).Distinct());
how to get the first dropdown list (RecvCom) value when user have pick one ?
If you wish to learn more about MVC there is lessons I found very helpful on Udemy . This user created a video course on creating a shopping cart application that uses model views is .net c# . follow this users guide to fully understand .net
this is the users lessons :
https://www.udemy.com/course/aspnet-mvc-5-project-cms-and-shopping-cart-with-paypal/
he has explained in creating a category how to implement items into a drop down list and add new items to that list. also the list can be selected from.
In my asp.net mvc application, in the form there are couple of inputs I have created.
Here I also using theme and I want to change my check box for model.Add_GeneralRequest to switch button.
I found a switch button from the theme I have using, but I got troubling adding that style to this existing code.
This is my html code.
<div class="form-group">
#Html.LabelFor(model => model.Add_GeneralRequest, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.Add_GeneralRequest)
#Html.ValidationMessageFor(model => model.Add_GeneralRequest, "", new { #class = "text-danger" })
</div>
</div>
</div>
This is the class that I got from the theme,
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-animate bootstrap-switch-on bootstrap-switch-focused" style="width: 86px;">
<div class="bootstrap-switch-container" style="width: 126px; margin-left: 0px;">
<span class="bootstrap-switch-handle-on bootstrap-switch-success" style="width: 42px;">ON</span>
<span class="bootstrap-switch-label" style="width: 42px;">
</span>
<span class="bootstrap-switch-handle-off bootstrap-switch-danger" style="width: 42px;">OFF</span>
<input type="checkbox" name="my-checkbox" checked="" data-bootstrap-switch="" data-off-color="danger" data-on-color="success"></div></div>
I have added all scripts to the view, but It won't works like wise in the theme switch works. Also I want to know how to apply this switch for the required column (model.Add_GeneralRequest this should update true or false from the switch ) .
I'm trying to submit a form from a modal generated in a partial view. And I don't know how to get back the submitted form.
Here is the view:
#model Myproject.ViewModels.GetMonitorFromDeviceViewModel
#{
ViewBag.Title = "GetMonitorFromDevice";
Layout = "~/Views/Shared/ManagementPage.cshtml";
}
<div id="Accordion">
#{
foreach (var type in Model.AvailableTypesAvailableMonitors)
{
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" data-parent="#accordion" href="##type">
#type
</a>
</div>
<div id="#type" class="collapse show">
<div class="card-body">
#{
foreach (var monitor in Model.ActiveMonitors)
{
if (monitor.Type == #type)
{
<p>
#monitor.Name
<span class="btn btn-xs btn-primary btnEdit" onclick="createModal('#Url.Action("NameMonitor", "DeviceManager" , new { idDevice = monitor.DeviceOwner.ID, monitorName = monitor.Name })')">Details</span>
</p>
}
}
}
</div>
</div>
</div>
}
}
</div>
And here is my modal at the bottom of the page:
<div class="modal fade" id="myModal" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content" id="modelContent">
</div>
</div>
</div>
<script>
function createModal(url) {
$('#modelContent').load(url);
$('#myModal').modal('show');
}
</script>
And finally, here is my partial view that is displayed as a modal:
#model MyProject.ViewModels.NameMonitorModal
#using (Html.BeginForm("NameMonitor", "DeviceManager", FormMethod.Post))
{
<div class="modal-body">
<div class="form-group">
#Html.LabelFor(model => model.NewName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.NewName, new { htmlAttributes = new { #class = "form-control", #Value = Model.TrueName } })
#Html.ValidationMessageFor(model => model.NewName, "", new { #class = "text-danger" })
</div>
</div>
#Html.HiddenFor(model => model.TrueName)
#Html.HiddenFor(model => model.IdDevice)
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save name" class="btn btn-default" data-dismiss="modal" />
</div>
</div>
</div>
}
In my controller, I have an action for my partial view called ActionResult NameMonitor.
In order to catch the submited form, I tried to add another action with the [HttpPost] tag with the same name but doesn't work. I also tried to use the main page action with the [HttpPost] tag but it doesn't work either. As you can see, I have specified the action and controller in the form itself but its still not working.
Now, I'm a little bit out of idea of how I can get the information from my modal back.
data-dismiss="modal" will close the modal without submitting the form, see Dismiss and submit form Bootstrap 3
You can change the submit button to call a JavaScript function to submit the form, then close the modal.
function submitModal() {
$('#myFormId').submit();
$('#myModal').modal('hide');
}
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 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.