I have following razor code. I need to add this dynamically on button click in client side.
<div class="form-group" id="transitem" name="transitem">
<div class="col-md-11" id="tritem" name="tritem">
#Html.LabelFor(model => model.transaction_item_id, "transaction_item_id", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
<div id="trans_dd_1" name="trans_dd_1">#Html.DropDownList("transaction_item_id", null, htmlAttributes: new { #class = "form-control", #id = "trans_id_#", #Name = "trans_id_#" })</div>
#Html.ValidationMessageFor(model => model.transaction_item_id, "", new { #class = "text-danger" })
</div>
<div>
#Html.LabelFor(model => model.transaction_itmQty, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-3">
#Html.EditorFor(model => model.transaction_itmQty, new { htmlAttributes = new { #class = "form-control", #id = "trans_qty_#", #Name = "trans_qty_#" } })
#Html.ValidationMessageFor(model => model.transaction_itmQty, "", new { #class = "text-danger" })
</div>
</div>
<div class="col-md-2"><input type="button" class="btnPlus" value="+" /></div>
</div>
</div>
I have written following script, but it is not working as expected. I need to change the name and id of trans_id_# and trans_qty_#. They are being generated by html helper, html.editorfor. Below is my script, which can copy the new element, but i am not able to change the id or name.
<script type="text/javascript">
var itm_cnt = 1;
$(document).ready(function () {
$(document).on("click", ".btnPlus", function () {
var new_clone = $('#tritem').clone();
itm_cnt = itm_cnt + 1;
var new_name = "trans_id_" + itm_cnt.toString();
$(new_clone).attr("name", "new_name");
$('#transitem').append(new_clone);
window.alert(itm_cnt);
});
});
Related
I have two partial views in my application. One contains a select list to decide between payments methods. If the user chooses Direct debit another partial opens with the relevant input fields and validation. If they choose Cheque this form is hidden. However the validation isn't removed
Direct Debit Partial View
<div class="form-horizontal">
<div class="form-group">
#Html.Label("Sort Code", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(Model => Model.SortCode12, new { #class = "control-label col-md-1", #readonly = "readonly" })
<div class="col-md-1"> - </div>
#Html.TextBoxFor(Model => Model.SortCode34, new { #class = "control-label col-md-1", #readonly = "readonly" })
<div class="col-md-1"> - </div>
#Html.TextBoxFor(Model => Model.SortCode56, new { #class = "control-label col-md-1", #readonly = "readonly" })
</div>
<div class="col-md-10">
#Html.ValidationMessageFor(model => model.SortCode12, "", new { #class = "text-danger" })
#Html.ValidationMessageFor(model => model.SortCode34, "", new { #class = "text-danger" })
#Html.ValidationMessageFor(model => model.SortCode56, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.Label("Account Number", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(Model => Model.BankAccountNumber, new { #class = "control-label col-md-2", #readonly = "readonly" })
</div>
<div class="col-md-10">
#Html.ValidationMessageFor(model => model.BankAccountNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.Label("Account Name", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.TextBoxFor(Model => Model.BankAccountName, new { #class = "control-label col-md-10", #readonly = "readonly" })
</div>
<div class="col-md-10">
#Html.ValidationMessageFor(model => model.BankAccountName, "", new { #class = "text-danger" })
</div>
</div>
Payment method partial view
<div id="CurrentPaymentMethod">
<div class="panel-group">
<div class="panel panel-default">
<div class="cl panel-heading">
<h4 class="panel-title">
Payment Method
</h4>
</div>
<div class="panel-body">
<div class="form-group">
#Html.Label("Payment Method", new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(Model => Model.PaymentMethodID,
new SelectList(Model.PaymentMethods, "Id", "Description"),
"Select Payment Method",
new { #class = "form-control", #required = "required", #onchange = "ChangePaymentMethod(this.value)" })
</div>
<div class="col-md-10">
#Html.ValidationMessageFor(model => model.PaymentMethodID, "", new { #class = "text-danger" })
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function ChangePaymentMethod(paymentMethodID)
{
#* Show Direct Debit section if the DD payment option (ID=0) has been selected*#
if (paymentMethodID == 0) {
document.getElementById("CurrentDirectDebitDetails").style.display = "block";
}
else {
document.getElementById("CurrentDirectDebitDetails").style.display = "none";
document.getElementById("SortCode34").removeAttribute("data-val-required");
document.getElementById("SortCode12").removeAttribute("data-val-required");
document.getElementById("SortCode56").removeAttribute("data-val-required");
document.getElementById("BankAccountNumber").removeAttribute("data-val-required");
document.getElementById("BankAccountName").removeAttribute("data-val-required");
}
}
At the bottom I have created some javascript to show and hide the direct debt from depending on the drop down selection item. This works however the validation remains
Any help with this would be appreciated
You can give specific class Name for all validation messages, errorMessagesForm1 form2 etc ...
then using this class to select the messages and hide it or remove it or whatever you want to do with it.
something like this,
#Html.ValidationMessageFor(model => model.PaymentMethodID, "", new { #class = "text-danger ErrMsgsForm2" })
js
var ErrorMSGs= document.getElementsByClassName("ErrMsgsForm2");
// Array of all error messages, loop through it
for(var i = 0; i < ErrorMSGs.length; i++){
ErrorMSGs[i].style.visibility = "hidden"; // or any other method, maybe change innerHTML etc
}
I have a Product Model like this
public class ProductViewModel
{
public int Id { get; set; }
public string Description { get; set; }
public bool IsActive { get; set; }
public ProductTypeFlag ProductType { get; set; }
public string BikeMake { get; set; }
public string BikeModel { get; set; }
public string CarMake { get; set; }
public string CarModel { get; set; }
public string TrainMake { get; set; }
public string TrainModel { get; set; }
}
public enum ProductTypeFlag
{
Bike = 0,
Car = 1,
Train = 2
}
As you can see, I only have three products to choose from: bike, car or train.
My Create New Product View is currently looking like this ... where I have a drop down list selection for ProductType
#model WebApplication14.Models.ProductViewModel
#{
ViewBag.Title = "Create";
}
<h2>Create</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>ProductViewModel</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<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" } })
#Html.ValidationMessageFor(model => model.Description, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.IsActive, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.IsActive)
#Html.ValidationMessageFor(model => model.IsActive, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.ProductType, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EnumDropDownListFor(model => model.ProductType, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.ProductType, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.BikeMake, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.BikeMake, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.BikeMake, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.BikeModel, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.BikeModel, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.BikeModel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CarMake, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CarMake, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CarMake, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.CarModel, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.CarModel, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.CarModel, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TrainMake, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TrainMake, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.TrainMake, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.TrainModel, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.TrainModel, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.TrainModel, "", 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-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
Now, what I want to do is, only display Product information that is relevant to selected product. For example, if I select Bike as a product then I only want to see the BikeMake and BikeModel available - i.e. I do not want to see Car/Train-Make&Model to be there as it is irrelevant.
You can group the properties related to each vehicle type in a container div and conditionally hide/show based on the selection from the dropdown.
For example
<div my-section="section-0" style="display:none;">
<div class="form-group">
#Html.LabelFor(model => model.BikeMake, new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.BikeMake, new { #class = "form-control" } )
#Html.ValidationMessageFor(model => model.BikeMake)
</div>
</div>
</div>
<div my-section="section-1" style="display:none;">
<!-- Inputs for code car related fields goes here -->
</div>
<div my-section="section-2" style="display:none;">
<!-- Inputs for Train related fields goes here -->
</div>
And now listen to the change event on your SELECT element and show only that container div.
$(function () {
// Show the section for the current(default) selection of the dropdown
var t = $("#ProductType").val();
var item = $("[my-section='section-" + t + "']").show();
// Wire up change event code for dropdown
$("#ProductType").change(function (e) {
// Hide all the sections (including previously shown)
$("[my-section]").hide();
//Select only the section corresponding the the dropdown selection
var item = $("[my-section='section-" + $(this).val() + "']").show();
})
});
For example, If you select the second item in your dropdown, The jQuery selector code $("[my-section='section-" + $(this).val() + "']") will return the div with my-section attribute value set to "section-1"
having Html code :
<div class="form-group has-feedback">
#Html.LabelFor(model => model.Name, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Name, new { htmlAttributes = new { #class = "form-control", #placeholder = "Name" } })
#Html.ValidationMessageFor(model => model.Name, "", new { #class = "text-danger" })
<span class="form-control-clear glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
trying to make clear button with javascript :
$(document).ready(function() {
$('.form-control-clear').on("click", function () {
$(this).val('')
});
});
but not working
I'm using this MVC 5 code:
<div class="form-group">
#Html.LabelFor(model => model.Expiry_date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Expiry_date, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Expiry_date, "", new { #class = "text-danger" })
</div>
</div>
And I would like to replace it with a datepicker like this one and still using the #Html.EditorFor() statement:
<div class="form-group">
#Html.LabelFor(model => model.Expiry_date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<a href="javascript:;"
id="vacation"
data-type="date"
data-viewformat="yyyy-mm-dd"
data-pk="1"
data-placement="right"
data-original-title="Expiry date">
2016-03-28
</a>
</div>
</div>
I would like to propose an alternate suggestion to creating an EditorTemplate: Create an extension method instead. This will allow you to provide some overrides as well where needed. I just pasted your example in there with a couple of placeholders (could would need to be tweaked and tested).
public static MvcHtmlString DatePickerFor<TModel>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, DateTime>> expression, string controlId, string title)
{
// you could get additional model info from the metadata object
// var metadata = ModelMetadata.FromLambdaExpression(expression, htmlHelper.ViewData);
Func<TModel, DateTime> method = expression.Compile();
var date = method(htmlHelper.ViewData.Model);
var str = $"<div class=\"col-md-10\">{date.ToString("yyyy-MM-dd")}</div>";
return new MvcHtmlString(str);
}
You can then call this from your view:
<div class="form-group">
#Html.LabelFor(model => model.Expiry_date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DatePickerFor(model => model.Expiry_date, "someId", "some title")
#Html.ValidationMessageFor(model => model.Expiry_date, "", new { #class = "text-danger" })
</div>
</div>
You can take the code for the desired datepicker that you have above and add it to the MVC Shared > EditorTemplates folder. You can add it as a new editor or overwrite an existing DateTime editor if you have one.
The editor templates in that folder are the ones used by MVC when you call #Html.EditorFor(...), and you can pass in an optional string to the call to force MVC to use a specific template.
See this MSDN article for more info.
https://msdn.microsoft.com/en-us/library/ee292027(v=vs.118).aspx
If you have the datepicker .js file downloaded.. all you have to do is render it in your _Layout View <script src="~/FolderName//*js file*/".. then in your HTML:
<div class="form-group">
#Html.LabelFor(model => model.Expiry_date, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Expiry_date, new { htmlAttributes = new { #class = "form-control datepicker" } })
#Html.ValidationMessageFor(model => model.Expiry_date, "", new { #class = "text-danger" })
</div>
</div>
I have problem with my MVC app which is shown in the pictures.
So when i click on the one of the checkboxes, script will be set the visible of the div to visible. But this is not good idea because the second div have a empty space above.
Checkboxes with script insdie:
<label><input type="checkbox" onclick="biurowyScript();" id="biurowyCheck" /> Pracownik biurowy</label>
<label><input type="checkbox" onclick="przewodnikScript();" id="przewodnikCheck" style="margin-left: 30px" /> Przewodnik</label>
biurowy div
<div id="biurowy" style="visibility: hidden">
<div class="form-group">
#Html.LabelFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Pracownik_biurowy, "", new { #class = "text-danger" })
</div>
</div>
</div>
przewodnik div:
<div id="przewodnik" style="visibility: hidden">
<div class="form-group">
#Html.LabelFor(model => model.Przewodnik.Uprawnienia, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Przewodnik.Uprawnienia, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Przewodnik.Uprawnienia, "", new { #class = "text-danger" })
</div>
</div>
</div>
In scripts i only set visible of the divs to visible. But like i said this is not the good idea for this app. So what i can use to fix this ?
Use display="none" instead of visibility="hidden"
<div id="biurowy" style="display: none">
<div class="form-group">
#Html.LabelFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Pracownik_biurowy.Nazwa_uzytkownika, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.Pracownik_biurowy, "", new { #class = "text-danger" })
</div>
</div>
</div>
EDIT:
When you use visibilt=hidden it keeps the space, while using display=none you it does not keep the space. You can show it with jquery the same way, i mean $(item).show()