Im working on my school ASP.NET MVC project. I want to edit information about user. When i call edit action, controller return model in to Edit View, and i want to see the value on the datepicker.
<div class="form-group">
#Html.Label("Datum rođenja", htmlAttributes: new { #class = "col-sm-3 control-label" })
<div class="col-sm-5">
<div class="input-group">
<input type="text" id="Model.DatumRodjenja" name="DatumRodjenja" class="form-control datepicker">
<div class="input-group-addon">
<i class="entypo-calendar"></i>
</div>
</div>
</div>
</div>
I don't use #Html.TextBoxFor, what should i do to see value od date in datepicker? How can i use #Html.TextBoxFor in this code to Datepicker works fine?
use same name of input type as your model name and value field for getting value in edit mode.
<input type="date" name="Trandate" value="#Model.Trandate" />
Hope this work for you.
Related
I am creating a large html form (using the EditForm tag) in my Blazor WASM app, containing many properties. Mostly all of which follow an identical pattern of a label, an input, and a validation section. I would like to create a render fragment that would let me cut down on my mark up. I am struggling with how to reference the "bind-Value" for the correct property.
Here is the start of the edit form, which has a model called registerModel with many properties, including string "Company" representing "Company Name"
<EditForm autocomplete="off" Model="#registerModel" OnValidSubmit="#HandleValidRegisterSubmit">
This is an example of a single section for the company name part, of which there are many in the form for all the individual properties:
<div class="row mb-3 align-items-center">
<div class="col-sm-2">
<label>
Company Name
</label>
</div>
<div class="col-sm-6 p-0">
<InputText #bind-Value="registerModel.Company" type="text" placeholder="Enter Company Name"
class="rounded-input form-control"
id="Last"
autocomplete="off"/>
</div>
<div class="col-sm-4">
<ValidationMessage For="() => registerModel.Company"/>
</div>
</div>
I want a render fragment function to automate creating each form section so I don't have to repeat so much html, and I can make my component more reusable. This is what I have tried so far
RenderFragment<(
EventCallback<string> eventCallback,
Expression<Func<string>> func,
string id,
string label,
string placeholder)> RenderFieldSection = (item) => __builder =>
{
<div class="row mb-3 align-items-center">
<div class="col-sm-2">
<label>#item.label</label>
</div>
<div class="col-sm-6 p-0">
<InputText #bind-Value="#item.eventCallback" type="text" placeholder="#item.placeholder"
class="rounded-input form-control"
id="#item.id"
autocomplete="off"/>
</div>
<div class="col-sm-4">
<ValidationMessage For="#item.func"/>
</div>
</div>
};
Which I am trying to call in the markup with:
#RenderFieldSection((
eventCallback: EventCallback.Factory.Create<string>(this, s => { registerModel.Company = s;}),
func:()=> registerModel.Company,
id: "Company",
label:Translate("CompanyNameLabel"),
placeholder:Translate("CompanyNamePlaceholder")
)
)
Everything works except the input #bind-Value="#item.eventCallback" part, which is supposed to take an EventCallback<string>. This gives the following error.
Cannot convert lambda expression to intended delegate type because some of the return types in the block are not implicitly convertible to the delegate return type
I guess I am constructing the event callback wrongly, but I don't know how to do it. Any ideas? I expect I could do it by finding the property via reflection, but I (naively?) wonder if I can avoid the overhead of that.
Please see the View code below:
<div class="row">
<div class="col-md-4">
<form asp-action="MemberView">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="DOB" class="control-label"></label>
#Html.TextBox("datepicker")
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
How do I make #Html.TextBox("datepicker") readonly (so only the datepicker can populate it) i.e. a user cannot type in it. I have spent one hour Googling this and have already looked here: Using DatePicker with .NET
Add a readonly property by passing an anonymous object as the third argument.
The null (second argument) is there to keep the input value empty. Of course you could fill it if necessary.
#Html.TextBox("datepicker", null, new { #readonly = "readonly" })
Note: The # symbol is required, because 'readonly' is a reserved keyword.
Please keep in mind that the user is able to manipulate the HTML by removing the readonly attribute. Proper value checking in the back-end is required to handle the value safely.
The width of the Select tag helper in the following veiw remains fixed no matter what value I change in its style attribute style="width:10000px;". Whether it's set to 10px or 10000px the width remains the same. On the other hand, in the same example below, the input tag ProjectNumber along with the Instructions message (correctly) occupies the entire width of the computer screen. Note 1: It's a multi select dropdown (but I think that should not mater). 2. I'm using VS2015-Update3 that comes with built-in Bootstrap functionality:
<div class="row">
<div class="col-sm-3">
#await Component.InvokeAsync("MainLeftMenu")
</div>
<div class="col-md-9">
<form id="target" asp-controller="myTest" asp-action="myAction" method="post" class="form-horizontal">
<div class="form-group">
<label asp-for="SelectedIDs" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="SelectedIDs" asp-items="Model.myList" style="width:10000px;"></select>
</div>
</div>
<div class="form-group">
<label asp-for="ProjectNumber" class="col-md-2 control-label"></label>
<div class="col-md-2">
<input asp-for="ProjectNumber" class="form-control" />
<span asp-validation-for="ProjectNumber" class="text-danger"></span>
</div>
<div class="col-md-5">Instructions: Add number in the format such as: ABC-123-xyz-000</div>
</div>
<button type="submit" class="btn btn-default">Submit Test</button>
</form>
</div>
</div>
In bootstrap for the select in form you can add class="form-control" like input type text.
For reference: http://getbootstrap.com/css/#forms
Issue resolved by adding style="min-width:700px;overflow:auto;" to the select tag helper. You can change 700px to whatever width you need.
I use bootstrap with ASP.NET Core and to indicate form field validation errors i want to add has-errors class to form-group div when given field has an error. The view looks like that:
<div class="form-group">
<label asp-for="Fragment.Content" class="col-lg-2 control-label "></label>
<div class="col-lg-10">
<textarea asp-for="Fragment.Content" class="form-control content-editor"></textarea>
<span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
<span asp-validation-for="Fragment.Content"></span>
</div>
</div>
I would like to do something like:
<div class="form-group" asp-add-class-if-error="has-errors" for-field="Fragment.Content"/>
I know i can write my own tag helper, however i am curious if there is a built-in solution.
I found that you can use:
#using Microsoft.AspNetCore.Mvc.ModelBinding
#if(ViewData.ModelState.GetFieldValidationState("Fragment.Content") == Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid)
{
// something here
}
Here is the button to open the modal box (which works):
<button data-toggle="modal" data-target="#modal-addItem-#sectionCount-#rowCount" class="btn btn-success">Add New List Item</button>
Here is the modal:
<div id="modal-addItem-#sectionCount-#rowCount" role="dialog" aria-hidden="true" aria-labelledby="modal-addItem-#sectionCount-#rowCount" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Added List Item</h4>
</div>
#Html.Partial("_SelectItemType", new ListItemsViewModel { listID = theLists.listID })
</div>
</div>
</div>
Here is that partial view Updated:
#using (Html.BeginForm("SelectItemType", "ListItems", null, FormMethod.Post, new { enctype = "multipart/form-data" }))
{
#Html.AntiForgeryToken()
#Html.HiddenFor(model => model.listID)
<div class="modal-body">
<div class="form-group">
<b class="control-label col-md-4">Select List Item Type:</b>
<div class="col-md-8">
#Html.DropDownListFor(model => model.ItemTypes.itemTypeName, DropDown.GeneralListCreator(get.getItemTypes(true), get.getItemTypes(false))) //This gets a list of item types
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<input type="submit" value="Next Step »" class="btn btn-primary" />
</div>
}
So when I click on the button, it opens up the modal as it should. When I click on the "Next Step >>" button which is the submit button on the form. No post back, no form submit...nothing happens.
I'm not sure why this wont work...can anyone please point out what I'm doing wrong? Please let me know if you need more information.
Thanks in advance.
UPDATE: I tried removing the Section script (because it's already in the view), as Chris pointed out but it is still not submitting.
So the answer was simple, of course. I found this page: ASP .NET MVC Disable Client Side Validation at Per-Field Level
It lead me right to the answer that Vsevolod kindly pointed out. Validation being enabled on the client side. I wasn't outputting a message before so I didn't know. When I added:
#Html.ValidationMessageFor(model => model.ItemTypes.itemTypeName)
to the form I was able to see the message:
The Item Type Name must be at least 2 characters long and no longer than 250 characters.
My drop down list was being populated by this method: get.getItemTypes(false) which returned Names if true and Numbers(ids) if false. The id's were 1-9 and were only a SINGLE digit. I required 2 characters to validate. Therefore it was not submitting.
My solution as proposed by the link at the top:
#{ Html.EnableClientValidation(false); }
#Html.DropDownListFor(model => model.ItemTypes.itemTypeName, DropDown.GeneralListCreator(get.getItemTypes(true), get.getItemTypes(true)))
#Html.ValidationMessageFor(model => model.ItemTypes.itemTypeName)
#{ Html.EnableClientValidation(true); }
For some reason, even once I changed the method get.getItemTypes(false) to return the names (send in true), the validation was still not working properly so I had to turn it off and back on.
Thank you everyone for the help.
This is what helped me:
Try adding
data-toggle="modal" data-target="#modal-addItem-#sectionCount-#rowCount"
to your submit. That should close it and allow your data to submit.
Look at this .modal('toggle') in bootstraps documentation.