I attempt to create the dropdown list in the View. The dropdown list for "CD_STATE_CLASS" "IN_DIVIDED" is working but for "TOLL_ROAD", it can return option values in the dropdown list, but the selected value defined in the function is not presented.When I log the TOLL_ROAD in the console, i can see the value but not in the dropdown list. I have no idea where the problem is because code looks identical. And also, when i save the form, it seems like selected TOLL_ROAD value in the dropdown list is not passing to the Road object.
private void GetEditRoadSelectLists(Road road)
{
var roadLookup = objMgr.GetRoadLookupDataBAL();
ViewBag.RoadTypes = roadLookup.RoadTypeLookup;
ViewData["CD_STATE_CLASS"] = new SelectList(roadLookup.StateClassLookup, "StateClassCode", "StateClassDescription", road.CD_STATE_CLASS);
ViewData["IN_DIVIDED"] = new SelectList(roadLookup.YesNoLookup, "YesNoShort", "YesNoLong", road.IN_DIVIDED);
ViewData["TOLL_ROAD"] = new SelectList(roadLookup.TollLookup, "Id","TOLL_ROAD", road.RoadsRamps.TOLL_ROAD);
//ViewData["TOLL_ROAD"] = new SelectList(roadLookup.TollLookup, "TOLL_ROAD", "TOLL_ROAD", road.RoadsRamps.TOLL_ROAD);
System.Diagnostics.Debug.WriteLine("toll"+road.RoadsRamps.TOLL_ROAD);
System.Diagnostics.Debug.WriteLine("YES" + road.IN_DIVIDED);
}
<div class="form-group row">
#Html.LabelFor(model => model.CD_STATE_CLASS, htmlAttributes: new { #class = "control-label col-md-2 required" })
<div class="col-md-4">
#Html.DropDownList("CD_STATE_CLASS", null, "-- Please select --", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.CD_STATE_CLASS, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group row">
#Html.LabelFor(model => model.RoadsRamps.TOLL_ROAD, htmlAttributes: new { #class = "control-label col-md-2 required" })
<div class="col-md-4">
#Html.DropDownList("TOLL_ROAD", null, "-- Please select --", new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.RoadsRamps.TOLL_ROAD, "", new { #class = "text-danger" })
</div>
</div>
Related
I have a form created in MVC 5. There is a text box below:
<div class="form-group">
#Html.LabelFor(model => model.Client_PID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
</div>
</div>
I want to make this for conditionally invisible with a default value, else to be filled in by the customer.
What is the best way to accomplish this. I have been able to make the text box invisible conditionally, but then my form fails,
if (ModelState.IsValid) is not valid...how do I pass a default value into this?
You can use HiddenFor when you want it to be hidden and in other case you can generate text box, for example:
#if(ShouldBeVisible)
{
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } } )
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
}
else
{
#Html.HiddenFor(model => model.Client_PID,1)
}
Now on the base of bool we are creating hidden field and setting it's default value otherwise it will generate text box and user would need to fill in value.
Hope it helps!
You can also do it with a input checkbox and a jQuery function to control this display/hide effect and its target default value.
<label for="hidden">
<input type="checkbox" id="hidden" class="display-hidden" data-target=".hidden" />
Show Client ID?
</label>
<div class="form-group hidden">
#Html.LabelFor(model => model.Client_PID, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Client_PID, "", new { #class = "text-danger" })
</div>
</div>
Then the jQuery function:
$(".display-hidden").click(function() {
var target = $(this).attr("data-target");
if($(this).is(':checked'){
$(target).fadeIn(320);
} else {
$(target).fadeOut(320);
$(target).val(//your default value);
}
});
Here is how I did it...I figured it out before I looked at your awesome answers...thank you for helping!!
#if (true)
{
put in the filed
}
else
{
#Html.EditorFor(model => model.Client_PID, new { htmlAttributes = new { style = "display:none" } })
}
Perhaps this is not best practice?
I try to add label in the right side as well of the text box to include the unit of the value.I would like to have like this
and This code gives like this.
this is my code
<div class="form-group ">
#Html.LabelFor(model => model.files, htmlAttributes: new { #class = "control-label col-md-3" })
<div class="col-md-8">
#{ Html.EnableClientValidation(false); }
#Html.EditorFor(model => model.files, new { htmlAttributes = new { #class = "form-control " } })<span>GB</span>
#{ Html.EnableClientValidation(true); }
#Html.ValidationMessageFor(model => model.files, "", new { #class = "text-danger" })
</div>
</div>
Thanks.
The class = "col-md-8" contains position:relative.
Since this line has class="form control " and your GB doesn't have a class. It goes to its natural position. Adding a class should tell it where to go.
#Html.EditorFor(model => model.files, new { htmlAttributes = new { #class = "form-control col-md-11" } })<span class="col-md-1">GB</span>
I have this view :
<div class="form-horizontal">
<h4>Giriş</h4>
<hr />
<div class="form-group">
#Html.Label("TCKimlikNo","TC Kimlik No :", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.Editor("TCKimlikNo", new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
<hr />
<div class="form-group">
#Html.Label("Sifre", "Şifre :", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.Password("Sifre", new { htmlAttributes = new { #class = "form-control" } })
</div>
</div>
</div>
And it looks like this :
I want to make Sifre look like the textbox above. And I want that textbox to be empty. How can I do that? Thanks in advance.
You are calling the (string name, Object value) overload, so your anonymous object's ToString() goes into the textbox as the value.
Apparently you wanted to call the (string name, Object value, Object htmlAttributes) overload:
#Html.Password("Sifre", null, new { #class = "form-control" })
I have a view which contains two partial views. One to select a customer and one to create a new customer both shown within tabs on the parent page. If somebody selects a customer, and then continues with the data entry form, but then has to go back to create a new customer instead, then the data from the selected customer remains. I can replace the data by entering the new data, however, the important bit is that the customer id remains and therefore none of the other data is taken into account. Is there a way for me to reset the customer object on click of e.g. an edit button without losing data from the rest of the page?
My parent view (relevant section) is:
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-12">
#if (Model.CommunicationModel.Communication.Customer.Name == null)
{
<input id="btnCust" type="button" value="Select" class="btn btn-default selectCustomer" />
}
else
{
<span id="custSpan" style="font-size:16px; font:bold;">
#Html.DisplayFor(model => model.CommunicationModel.Communication.Customer.Name)
#Html.HiddenFor(model => model.CommunicationModel.Communication.Customer.CustomerId)
<input id="btnEditCust" type="button" value="Edit" class="btn btn-default selectCustomer" />
</span>
}
<div id="customerTabs" style="display:none;">
<hr />
<p>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Select Customer</li>
<li role="presentation">Create New Customer</li>
</ul>
</p>
<div class="tab-content">
<div id="tabs-1" role="tabpanel" class="tab-pane active">
#Html.Partial("~/Views/Communication/SelectCustomer.cshtml", Model.CustomerViewModel.AllCustomers)
</div>
<div id="tabs-2" role="tabpanel" class="tab-pane">
#Html.Partial("~/Views/Communication/CreateCustomer.cshtml", Model)
</div>
</div>
</div>
</div>
</div>
And my create customer partial view is:
#model CommunicationsLog.ViewModels.CommunicationViewModel
<div class="form-horizontal" id="addCustomerForm">
<div class="row">
<div class="col-md-12">
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Name, new { htmlAttributes = new { #class = "form-control" }, #id = "name" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Name, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, new { htmlAttributes = new { #class = "form-control" }, #id = "email" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactEmail, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.ContactTel, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.ContactTel, new { htmlAttributes = new { #class = "form-control" }, #id = "phone" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.ContactTel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.CompanyName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.CompanyName, new { htmlAttributes = new { #class = "form-control" }, #id = "company" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.CompanyName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CommunicationModel.Communication.Customer.Address, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(model => model.CommunicationModel.Communication.Customer.Address, new { htmlAttributes = new { #class = "form-control" }, #id = "address" })
#Html.ValidationMessageFor(model => model.CommunicationModel.Communication.Customer.Address, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
Any help would be greatly appreciate. Im stumped :)
You're using Partials, meaning the html already been loaded and rendered when it reach the client.
To handle the case of Id is being sent, you should mark ..Customer.CustomerId has disabled="disabled" or readonly, this will avoid the Client side of submitting the Input tag, which will result of the Server side "think" (If you implemented it in that fashion) that this is a new customer.
You can easily achieve it using jQuery 1.6+:
$('#TheCustomerId').prop('disabled', true);
$('#TheCustomerId').prop('disabled', false);
Disable on < 1.6: Disable/enable an input with jQuery?
I have a form-group where the label is missplaced, the label is too far down compared to the dropdownlist, see image.
This is my code:
<div class="form-group">
<div class="col-lg-2"></div>
#Html.LabelFor(model => model.deviceModel, "OS:", htmlAttributes:
new { #class = "col-lg-2 control-label" })
<div class="col-lg-4">
#Html.DropDownListFor(model => model.deviceModel, new SelectListItem[]{
new SelectListItem{Value = "1", Text="iOS"},
new SelectListItem{Value = "2", Text="Android"}},
new { htmlAttributes = new { #class = "form-control" } })
</div>
<div class="col-lg-2"></div>
</div>
What have i done wrong, why is it missplaced?
I am not into C# and Razor but based on my comment and looking at the code the newin front of the htmlAttributes for the Dropdownlist looks not right. It seems like the class is not applied to the Dropdownlist, which then could cause the shifting, probably caused by different margin parameters.
<div class="form-group">
<div class="col-lg-2"></div>
#Html.LabelFor(model => model.deviceModel, "OS:",
htmlAttributes: new { #class = "col-lg-2 control-label" })
<div class="col-lg-4">
#Html.DropDownListFor(model => model.deviceModel, new SelectListItem[]{
new SelectListItem{Value = "1", Text="iOS"},
new SelectListItem{Value = "2", Text="Android"}},
htmlAttributes: new { #class = "form-control" } )
</div>
<div class="col-lg-2"></div>