UPDATED
I have an EditForm component(I missed some non-important stuff, so just to view important pieces of code) , written like this below:
<EditForm Model="#product" OnValidSubmit=#(async () => await SaveProduct())>
<div class="form-group row">
<MatPaper Elevation="10" Rounded="true" Style="padding-left: 30px;">
<div class="col-12 row">
<label class="col-4 font-weight-bold">Caption:</label>
<input #ref="firstNameTextBox" class="form-control col-12" #bind="product.Caption" placeholder="Caption" />
<ValidationMessage For="#(() => product.Caption)" />
</div>
<br />
<div class="col-12 row">
<label class="col-4 font-weight-bold">Description:</label>
<InputText class="form-control col-12" #bind-Value="product.Description" placeholder="Description" />
<ValidationMessage For="#(() => product.Description)" />
</div>
<br />
<div class="col-12 row">
<label class="col-4 font-weight-bold">Price :</label>
<InputNumber class="form-control col-12" #bind-Value="product.Price" placeholder="Price" />
<ValidationMessage For="#(() => product.Price)" />
</div>
<div class="form-group row">
<label for="department" class="col-sm-2 col-form-label">
Brand:
</label>
<div class="col-sm-10">
<InputSelect id="brandtype" #bind-Value="product.BrandTypeEID" class="form-control">
#foreach (var brand in Brands)
{
<option value="#brand.brandTypeEID">#brand.caption</option>
}
</InputSelect>
</div>
</div>
<br />
#*<div class="col-12 row">
<label class="col-4 font-weight-bold">Brand:</label>
<SelectBrand OnChangeEvent="OnSelectBrandChange"></SelectBrand>
</div>*#
</MatPaper>
<label class="col-2 font-weight-bold"></label>
<MatPaper Elevation="10" Rounded="true" Style="padding-left: 40px; margin-left: 100px;">
<label class="col-8 font-weight-bold">
Categories:
<CheckBoxList Data="#Categories"
TextField="#((item)=>item.Caption)"
ValueField="#((item)=>item.CategoryID)"
SelectedValues="#SelectedIdsCategory" />
</label>
</MatPaper>
<label class="col-2 font-weight-bold"></label>
<MatPaper Elevation="10" Rounded="true" Style="padding-left: 30px;">
<label class="col-2 font-weight-bold"></label>
<label class="col-2 font-weight-bold">Size types:</label>
<CheckBoxList Data="#SizeTypes"
TextField="#((item)=>item.Caption)"
ValueField="#((item)=>item.SizeTypeEID)"
SelectedValues="#SelectedIdsSizeType" />
</MatPaper>
</div>
<br />
<div>
<h3>Upload PNG images</h3>
<p>
<InputFile OnChange="#OnInputFileChange" multiple />
</p>
#if (imageDataUrls.Count > 0)
{
<h4>Images</h4>
<div class="card" style="width:30rem;">
<div class="card-body">
#foreach (var imageDataUrl in imageDataUrls)
{
<img class="rounded m-1" src="#convertImageToDisplay(imageDataUrl.PictureDisplay)" />
}
</div>
</div>
}
</div>
<br />
<br />
<div class="col-12 row">
<span class="col-2"></span>
<input type="submit" class="form-control col-1 btn btn-primary" #onclick="(() => SaveProduct())" value="Save" />
<span> </span>
<input type="submit" class="form-control col-1 btn btn-primary" value="Clear" />
</div>
</EditForm>
And here it is a SaveProduct method:
private async Task SaveProduct()
{
var productToSave = new ProductForCreationDto();
//some logic
if (product.Uid is null)
await apiCreateProductService.SaveAsync("product/CreateProduct", productToSave);
else
await apiCallService.UpdateAsync("product/", product.Uid, product);
await LoadProducts();
Result = true;
IsVisible = true;
var caption = product.Caption;
RecordName = caption;
product = new Product();
await JSRuntime.InvokeVoidAsync("setFocusOnElement", firstNameTextBox);
}
The issue is like the SaveProduct method is called twice, not once. I have 2 same records in database. I think that problem lies on EditForm, but I couldn't get the solution for this problem. What could be a fix?
You have
<EditForm Model="#product" OnValidSubmit=#(async () => await SaveProduct())>
and
<input type="submit" class="..." #onclick="(() => SaveProduct())" value="Save" />
So yes, SaveProduct() will be called twice when you Submit. Both will be called.
The easy fix is to just omit the #onclick and let the EditForm handle it:
<input type="submit" class="..." value="Save" />
Related
im having a razor page with multiple forms in multiple tabs.When i submit a form it will go to the next tab with another. I want to pass two ids from first form to second form (which is razor page).Here is the code.
This is function used for submittig the first form StaffDetails.cshtml.cs
public async Task<IActionResult> OnPostInsertStaffDetailsAsync(StaffDetails StaffDetails)
{
ShowTypeOfEmployee = new SelectList(_context.TypeOfEmployees, "TypeOfEmployee", "TypeOfEmployee");
ShowEmploymentType = new SelectList(_context.EmploymentTypes, "EmploymentType", "EmploymentType");
DeptName = new SelectList(_context.Department.OrderBy(e => e.DeptName), "DeptName", "DeptName");
EmpCategories = new SelectList(_context.EmploymentCategory.OrderBy(e => e.EmpCategories), "EmpCategories", "EmpCategories");
EmpStatus = new SelectList(_context.EmploymentStatus.OrderBy(e => e.EmpStatus), "EmpStatus", "EmpStatus");
RegularOrTemporary = new SelectList(_context.RegTemp.OrderBy(e => e.RegularOrTemporary), "RegularOrTemporary", "RegularOrTemporary");
IncentivePlans = new SelectList(_context.IncentivePlan, "IncentivePlans", "IncentivePlans");
if (!ModelState.IsValid)
{
return Page();
}
else
{
await _context.StaffDetails.AddAsync(StaffDetails);
await _context.SaveChangesAsync();
int StaffID = StaffDetails.StaffID;
//HttpContext.Session.SetInt32("StaffID", StaffID);
//HttpContext.Session.SetString("EmpID", StaffDetails.EmpID);
TempData["EmpID"] = StaffDetails.EmpID;
TempData["StaffID"] = StaffID;
var foldername = StaffDetails.EmpID.ToString();
var DirectoryPath = Path.Combine(_env.WebRootPath, "Documents", "EmployeeAttachments", foldername);
if (!System.IO.Directory.Exists(DirectoryPath))
{
System.IO.Directory.CreateDirectory(DirectoryPath);
}
return new OkResult();
}
}
}
}
This is the ajax function for navigating to next form in the next tab.
function StaffDetailsCompleted(event) {
if (event.responseText != "") {
$("#StaffDetails").html(event.responseText);
} else {
alert("Staff Details Has Been Added Successfully");
$('a[href="#Biodata"]').tab('show');
}
}
The second form Biodata.cshtml
#page
#model Contractor_HRMS.Pages.Staff.Onboarding.BioDataModel
#{
Layout = null;
}
<br />
<form asp-page-handler="InsertBioData" data-ajax="true" data-ajax-method="post" data-ajax-complete="BioDataCompleted">
<div class="row">
<div class="col-6">
<input asp-for="StaffBioData.StaffID" id="StaffID" type="hidden" value='#TempData["StaffID"]' />
<input asp-for="StaffBioData.EmpID" id="EmpId" type="hidden" value='#TempData["EmpID"]' />
<!-- First Name -->
<div class="form-group">
<label asp-for="StaffBioData.IdenEmpFname" class="control-label-staff"></label>
<input asp-for="StaffBioData.IdenEmpFname" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.IdenEmpFname" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Last Name -->
<div class="form-group">
<label asp-for="StaffBioData.IdenEmpLname" class="control-label-staff"></label>
<input asp-for="StaffBioData.IdenEmpLname" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.IdenEmpLname" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Address -->
<div class="form-group">
<label asp-for="StaffBioData.Address" class="control-label-staff"></label>
<input asp-for="StaffBioData.Address" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.Address" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Photo -->
<div class="form-group">
<label class="control-label-staff"><b>Photo</b></label>
<input type="file" asp-for="StaffPhoto" class="form-control-staff" multiple style="border:1px solid white;margin-right:20px" />
</div>
<!-- Gender -->
<div class="form-group">
<label asp-for="StaffBioData.Gender" class="control-label-staff"></label>
<select asp-for="StaffBioData.Gender" asp-items="Model.StaffGender" class="form-control-staff">
<option value="">Please Select</option>
</select><br />
<span asp-validation-for="StaffBioData.Gender" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Date of Birth -->
<div class="form-group">
<label asp-for="StaffBioData.Dob" class="control-label-staff"></label>
<input asp-for="StaffBioData.Dob" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.Dob" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Race -->
<div class="form-group">
<label asp-for="StaffBioData.Race" class="control-label-staff"></label>
<input asp-for="StaffBioData.Race" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.Race" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Religion -->
<div class="form-group">
<label asp-for="StaffBioData.Religion" class="control-label-staff"></label>
<select asp-for="StaffBioData.Religion" asp-items="Model.StaffReligion" class="form-control-staff">
<option value="">Please Select</option>
</select><br />
<span asp-validation-for="StaffBioData.Religion" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Nationality -->
<div class="form-group">
<label asp-for="StaffBioData.Nationality" class="control-label-staff"></label>
<input asp-for="StaffBioData.Nationality" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.Nationality" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Ethnicity -->
<div class="form-group">
<label asp-for="StaffBioData.Ethnicity" class="control-label-staff"></label>
<input asp-for="StaffBioData.Ethnicity" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.Ethnicity" class="text-danger" style="margin-left:210px;"></span>
</div>
<!-- Emergency Contact -->
<div class="form-group">
<label class="control-label-staff"><b>Emergency Contact:</b></label><br />
<!-- Emergency Contact Name-->
<label asp-for="StaffBioData.EmergencyContactName" class="control-label-staff" style="text-align:left;"></label>
<input asp-for="StaffBioData.EmergencyContactName" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.EmergencyContactName" class="text-danger" style="margin-left:210px;"></span>
<br /><br />
<!-- Emergency Contact No-->
<label asp-for="StaffBioData.EmergencyContactNo" class="control-label-staff" style="text-align:left;"></label>
<input asp-for="StaffBioData.EmergencyContactNo" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.EmergencyContactNo" class="text-danger" style="margin-left:210px;"></span>
<br /><br />
<!-- Emergency Contact Relation-->
<label asp-for="StaffBioData.EmergencyContactRelation" class="control-label-staff" style="text-align:left;"></label>
<input asp-for="StaffBioData.EmergencyContactRelation" class="form-control-staff" /><br />
<span asp-validation-for="StaffBioData.EmergencyContactRelation" class="text-danger" style="margin-left:210px;"></span>
<br /><br />
</div>
<div class="form-group" style="display:none;">
<label asp-for="StaffBioData.LastModifiedBy" class="control-label"></label>
<input asp-for="StaffBioData.LastModifiedBy" class="form-control" value="jteena" />
<span asp-validation-for="StaffBioData.LastModifiedBy" class="text-danger"></span>
</div>
<div class="form-group" style="display:none;">
<label asp-for="StaffBioData.LastModifiedTimestamp" class="control-label"></label>
<input asp-for="StaffBioData.LastModifiedTimestamp" class="form-control" value="#DateTime.Now" />
<span asp-validation-for="StaffBioData.LastModifiedTimestamp" class="text-danger"></span>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-success" style="margin-left:550px;">Save</button>
</div>
</div>
</form>
<partial name="_ValidationScriptsPartial" />
what happens here is im not able to set values for hidden variables STaffID and EmpID using TempData.
Am i doing anything wrong.Anyhelp would be appreciated.
Since the content under each tab is already filled when the details page is loaded, some changes made later will not be reflected. You can request the next page again in the completed function to refresh it.
function StaffDetailsCompleted(event) {
if (event.responseText != "") {
$("#StaffDetails").html(event.responseText);
} else {
alert("Staff Details Has Been Added Successfully");
$.ajax({
url: "/Staff/Onboarding/Biodata",
type: "get",
success: function (result) {
$("#Biodata").html(result);
$('a[href="#Biodata"]').tab('show');
}
})
}
}
My index consists of a table that shows all my created questions (a survey). But I want to be able to edit a question using a modal. Therefore I have created the following modal in a foreach loop:
#foreach (var item in Model.Questions)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Id)
</td>
<td>
#Html.DisplayFor(modelItem => item.Question1)
</td>
<td>
#Html.DisplayFor(modelItem => item.ReplyOptions)
</td>
<td>
#Html.DisplayFor(modelItem => item.Group)
</td>
<td>
#if (item.CategoryId != null)
{
#Html.DisplayFor(modelItem => item.Category.Name)
}
else
{
<i><font color="red">Nicht zugewiesen</font></i>
}
</td>
<td>
<!-- Button trigger modal -->
<button type="button" class="btn btn-sm" data-toggle="modal" data-target="##item.Id">
Bearbeiten
</button>
<!-- Modal -->
<div class="modal fade" id="#item.Id" tabindex="-1" role="dialog" aria-labelledby="xxx" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h2 class="modal-title" id="xxx">Frage bearbeiten</h2>
</div>
<div class="modal-body">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="#item.Id" />
<div class="form-group">
<label asp-for="#item.CategoryId" class="control-label"></label>
<select asp-for="#item.CategoryId" class="form-control" asp-items="ViewBag.CategoryId"></select>
<span asp-validation-for="#item.CategoryId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#item.Question1" class="control-label"></label>
<input asp-for="#item.Question1" class="form-control" />
<span asp-validation-for="#item.Question1" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#item.ReplyOptions" class="control-label"></label>
<input asp-for="#item.ReplyOptions" class="form-control" />
<span asp-validation-for="#item.ReplyOptions" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#item.Group" class="control-label"></label>
<input asp-for="#item.Group" class="form-control" />
<span asp-validation-for="#item.Group" class="text-danger"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a>
</td>
</tr>
}
But I have the following problem:
When I want to edit the question and click on Save, my Edit method in the controller does not get the values.
The method looks like this:
What do I have to do to ensure that the values are passed on?
What do I have to do to ensure that the values are passed on?
Just to add name attribute to each control in the form :
<div class="modal-body">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="#item.Id" name="Id" />
<div class="form-group">
<label asp-for="#item.CategoryId" class="control-label"></label>
<select asp-for="#item.CategoryId" class="form-control" asp-items="ViewBag.CategoryId" name="CategoryId"></select>
<span asp-validation-for="#item.CategoryId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#item.Question1" class="control-label"></label>
<input asp-for="#item.Question1" class="form-control" name="Question1" />
<span asp-validation-for="#item.Question1" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#item.ReplyOptions" class="control-label"></label>
<input asp-for="#item.ReplyOptions" class="form-control" name="ReplyOptions" />
<span asp-validation-for="#item.ReplyOptions" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="#item.Group" class="control-label"></label>
<input asp-for="#item.Group" class="form-control" name="Group" />
<span asp-validation-for="#item.Group" class="text-danger"></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
Here is the test result:
I am working on a Blazor page for adding a new object. The object "RepairOrder" has List of object "RepairSection".
On the page there is an area that will loop through the List "RepairOrder"."RepairSections" and show the elements:
<div class="col-lg-10">
#if (sections.Count > 0)
{
foreach (var sec in sections)
{
<h3>Section #sec.SectionNumber</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-5">
<label for="Failure" class="control-label">Failure: </label>
<input for="Failure" class="form-control" bind="#sec.Failure" readonly />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-1">
<label><input type="checkbox" checked="#IsCApprovedChecked(sec)" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" value="#IsWarrantyChecked(sec)" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="AdminComments" class="control-label">Admin Comments: </label>
<input for="AdminComments" class="form-control" bind="#sec.AdminComments" readonly />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="TechComments" class="control-label">Tech Comments: </label>
<input for="TechComments" class="form-control" bind="#sec.TechComments" readonly />
</div>
</div>
}
}
</div>
After all the current sections in the list have been added to the page, there is a button to add a new section. When the button is clicked, the function changes a bool value to true to open a modal as a dialog. The modal contains fields to input a new section elements.
function called to open the modal:
protected void AddSectionCalled()
{
_newSection = new RepairSection();
this.isAddNew = true;
}
Modal Code:
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">New Repair Section</h3>
<button type="button" class="close" onclick="#CloseModal"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="sectionLetter" class="control-label">Section: </label>
<input for="sectionLetter" class="form-control" bind="#_newSection.SectionNumber" />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.Warranty" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.CustomerApproved" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_failure" class="control-label">Failure: </label>
<input for="_failure" class="form-control" bind="#_newSection.Failure"/>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_adminComments" class="control-label">Admin Comments: </label>
<input for="_adminComments" class="form-control" bind="#_newSection.AdminComments" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_techComments" class="control-label">Tech Comments: </label>
<input for="_techComments" class="form-control" bind="#_newSection.TechComments"/>
</div>
</div>
<br/>
<button class="btn btn-primary float-left" onclick="AddNewSection">Add New Section</button>
</form>
</div>
</div>
</div>
</div>
When the "Add New Section" button is clicked, the "_newSection" object created from the information collected in the modal is added to the "sections" list that was originally looped through when the page was loaded.
private void AddNewSection()
{
sections.Add(_newSection);
this.StateHasChanged();
this.isAddNew = false;
}
as you can see I added the "StateHasChanged()" after the new section is added to the sections list. However the page does not render to display the new section.
I originally had created dummy data on the page "OnInitAsync()" event that loaded the sections list with data before it was displayed. This way I could make sure the page displayed what was in the list correctly.
How can I make the page re-render the information in the list after user adds a new object to the list?
----Edit-----
Below is the code for the entire page. I will try and minimize this on the weekend, however there really is not a lot here.
#page "/AddRepairOrder"
#using ShopLiveWebVersion2._0.Models
#using ShopLiveWebVersion2._0.DataAccess
#using ShopLiveWebVersion2._0.Services
#using ShopLiveWebVersion2._0.Data
#inject IUriHelper UriHelper
#inject RepairOrderContext context
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10"><h1>Create New Repair Order</h1></div>
</div>
<br /><br />
<form id="AddROForm">
<div class="form-group">
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="ControlNumber" class="control-label">Repair Order #: </label>
<input for="ControlNumber" class="form-control" bind="#ro.ControlNumber" maxlength="15" required />
</div>
<div class="col-lg-1">
<label for="TagNumber" class="control-label">Tag #: </label>
<input for="TagNumber" class="form-control" bind="#ro.TagNumber" maxlength="8" />
</div>
<div class="col-lg-3">
<label for="VIN" class="control-label">VIN: </label>
<input for="VIN" class="form-control" bind="#ro.VIN" maxlength="18" />
#*<small id="Chasis" class="form-text text-muted">#ro.GetChassisNumber()</small> figure out how to get chassis from vin after box looses focus*#
</div>
<div class="col-lg-2">
<label for="Make" class="control-label">Make: </label>
<input for="Make" class="form-control" bind="#ro.Make" maxlength="30" />
</div>
<div class="col-lg-2">
<label for="Madel" class="control-label">Model: </label>
<input for="Madel" class="form-control" bind="#ro.Madel" maxlength="30" />
</div>
</div>
<div class="row AddRow">
<div class="col-lg-1"></div>
<div class="col-lg-4">
<label for="Customer" class="control-label">Customer: </label>
<input for="Custoemr" class="form-control" bind="#ro.Customer" maxlength="50" />
</div>
<div class="col-lg-2">
<label asp-for="Location" class="control-label">Vehicle Location: </label>
<select asp-for="Location" class="form-control" bind="#ro.Location">
<option value="">-- Select a Location --</option>
#foreach (var loc in Location)
{
<option value="#loc">#loc</option>
}
</select>
</div>
<div class="col-lg-2">
<label asp-for="Assigned" class="control-label">Assigned: </label>
<select asp-for="Assigned" class="form-control" bind="#ro.Assigned">
<option value="">-- Select an Employee --</option>
#foreach (var emp in Employee)
{
<option value="#emp">#emp</option>
}
</select>
</div>
<div class="col-lg-2">
<label asp-for="Status" class="control-label">Status: </label>
<select asp-for="Status" class="form-control" bind="#ro.Status">
<option value="">-- Select a Status --</option>
#foreach (var st in Status)
{
<option value="#st">#st</option>
}
</select>
</div>
</div>
<br />
<div class="row"><div class="col-lg-1"></div><div class="col-lg-10"><hr id="Double" /></div></div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
#if (sections.Count > 0)
{
foreach (var sec in sections)
{
<h3>Section #sec.SectionNumber</h3>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-5">
<label for="Failure" class="control-label">Failure: </label>
<input for="Failure" class="form-control" bind="#sec.Failure" readonly />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-1">
<label><input type="checkbox" checked="#IsCApprovedChecked(sec)" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" value="#IsWarrantyChecked(sec)" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="AdminComments" class="control-label">Admin Comments: </label>
<input for="AdminComments" class="form-control" bind="#sec.AdminComments" readonly />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="TechComments" class="control-label">Tech Comments: </label>
<input for="TechComments" class="form-control" bind="#sec.TechComments" readonly />
</div>
</div>
}
}
</div>
</div>
<div class="row"></div>
</div> #*Form-group*#
</form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-9">
<br /><br />
<button class="btn btn-primary float-right" onclick="#AddSectionCalled">Add New Section</button>
</div>
</div>
#if (isAddNew == true)
{
<div class="modal" tabindex="-1" style="display:block" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">New Repair Section</h3>
<button type="button" class="close" onclick="#CloseModal"><span aria-hidden="true">X</span></button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label for="sectionLetter" class="control-label">Section: </label>
<input for="sectionLetter" class="form-control" bind="#_newSection.SectionNumber" />
</div>
<div class="col-lg-1"></div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.Warranty" /> Warranty</label>
</div>
<div class="col-lg-2">
<label><input type="checkbox" bind="#_newSection.CustomerApproved" /> Repair Approved</label>
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_failure" class="control-label">Failure: </label>
<input for="_failure" class="form-control" bind="#_newSection.Failure" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_adminComments" class="control-label">Admin Comments: </label>
<input for="_adminComments" class="form-control" bind="#_newSection.AdminComments" />
</div>
</div>
<div class="row">
<div class="col-lg-1"></div>
<div class="col-lg-10">
<label for="_techComments" class="control-label">Tech Comments: </label>
<input for="_techComments" class="form-control" bind="#_newSection.TechComments" />
</div>
</div>
<br />
<button class="btn btn-primary float-left" onclick="AddNewSection()">Add New Section</button>
</form>
</div>
</div>
</div>
</div>
}
#functions
{
private RepairOrder ro;
private RepairOrder incomingRO;
private RepairOrderDataAccess RoData;
private string chassis;
private List<string> Location;
private List<string> Employee;
private List<string> Status;
private FileService fileService;
private List<RepairSection> sections;
private bool isAddNew;
//for new repair section modal
private RepairSection _newSection;
protected override async Task OnInitAsync()
{
ro = new RepairOrder();
Location = new List<string>();
Employee = new List<string>();
Status = new List<string>();
sections = new List<RepairSection>();
isAddNew = false;
fileService = new FileService();
RoData = new RepairOrderDataAccess(context);
await LoadData();
}
private async Task LoadData()
{
Location = await Task.Run(() => fileService.ReadLocation());
Employee = await Task.Run(() => fileService.ReadEmployees());
Status = await Task.Run(() => fileService.ReadStatus());
}
public string IsCApprovedChecked(RepairSection sc)
{
if (sc.CustomerApproved == true)
{
return "checked";
}
else
{
return "";
}
}
public string IsWarrantyChecked(RepairSection sc)
{
if (sc.Warranty == true)
{
return "checked";
}
else
{
return "";
}
}
protected void AddSectionCalled()
{
_newSection = new RepairSection();
this.isAddNew = true;
}
private void AddNewSection()
{
sections.Add(_newSection);
this.StateHasChanged();
this.isAddNew = false;
}
private void CloseModal()
{
this.isAddNew = false;
}
There is a problem with the way you have bound the onclick event of the button on the modal form.
you have onclick="AddNewSection()"
- writing it this way will likely be interpreted as a pure javascript call and if you inspect the DOM in your browser tools, you will likely see onclick="AddNewSection()" on the button.
You should have onclick="#AddNewSection"
- this way, Blazor will hook up the onclick event to your C# method.
From bootstrap, it only have the combination of button with dropdown, if i want to have like this
how should i write in my view?
from my view
<div class="container">
<div class="row form-group">
<div class="input-group">
#Html.DropDownList("dateList", ViewData["dateList"] as IEnumerable<SelectListItem>, new { #id = "dateList", #class = "form-control" })
<input type="text" class="form-control" readonly="readonly" id="DCRDate" name="DCRDate" value="" />
<button id="submitBtn" type="submit" class="btn btn-default">Change</button>
</div>
</div>
</div>
i had this
with André Franciscato Paggi codes
with span the dropdownlist it become like
<div class="container">
<div class="row form-group">
<div class="input-group">
<span class="input-group-btn">
#Html.DropDownList("dateList", ViewData["dateList"] as IEnumerable<SelectListItem>, new { #id = "dateList", #class = "form-control" })
</span>
<input type="text" class="form-control" readonly="readonly" id="date" name="date" value="" />
<button id="submitBtn" type="submit" class="btn btn-default">Change</button>
</div>
</div>
</div>
You can surround the button and the select with a span tag each, using the class "input-group-btn".
Here is a snippet:
#myselect{
width: 80px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<span class="input-group-btn">
<select name="myselect" id="myselect" class="form-control">
<option selected>Foo</option>
<option>Bar</option>
</select>
</span>
<input type="text" class="form-control" readonly="readonly" id="DCRDate" name="DCRDate" value="Input here" />
<span class="input-group-btn">
<button id="submitBtn" type="submit" class="btn btn-default">Change</button>
</span>
</div>
I am working on a C#/.NET web app that use JQuery to implement its view and I am finding some problems using double value into input tag.
For example I have the following code snippet into my view:
<div class="ui-field-contain">
<label for="Test">Test:</label>
<input type="number" runat="server" id="Test" name="Test" min="0" max="10" step=".1" value="#Model.test" />
</div>
The value containet into the #Model.test model object field is 2.3 (I see it using the debugger) but into my input tag appear nothing.
I think that the problem could be related to the fact that JQuery use the comma to separate integer and decimal and instead it I have the . symbol.
Can you help me to resolve this issue?
EDIT 1: This is my entire view
#model DataModel.Vulnerability.Vuln
#{
ViewBag.Title = "Edit";
Layout = "~/Views/Shared/MasterPageMobile.cshtml";
}
<h2 style="float: right;">Published: #(Model.Published.Value.ToShortDateString())</h2>
<h2>Vulnerabilità: #Model.CVE</h2>
<style>
.mytabVuln {
width: 20% !important; /* 14.2% for 5 tabs wide */
clear: none !important; /* Prevent line break caused by ui-block-a */
}
</style>
<div id="MyTabs" data-role="tabs">
<div data-role="navbar">
<ul>
<li class="mytabVuln">General</li>
<li class="mytabVuln">Systems</li>
<li class="mytabVuln">Fixes/Solutions/Mitigating</li>
<li class="mytabVuln">Change Logs/References</li>
<li class="mytabVuln">OVALs</li>
</ul>
</div>
<!-- TAB-0: INFORMAZIONI GENERALI: -->
<div id="tab-0" class="ui-body ui-body-a">
#using (Html.BeginForm("Edit", "Vulnerability", FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(false)
<input type="hidden" name="Id" value="#Model.Id" />
<div class="ui-field-contain">
<label for="Title">Title:</label>
<input type="text" id="Title" name="Title" value="#Model.Title" data-clear-btn="true" />
</div>
<div class="ui-field-contain">
<label for="Test">Severity:</label>
<input type="number" id="Test" name="Test" min="0" max="10" step=".1" value="#Model.test" />
</div>
<div class="ui-field-contain">
<label for="BugTraqID">BugTraqID:</label>
<input type="number" id="BugTraqID" name="Title" min="0" step="1" value="#Model.BugTraqID" />
</div>
<div class="ui-field-contain">
<label for="StatusID">StatusID:</label>
<input type="number" id="StatusID" name="Title" min="0" max="10" step="0.1" value="#Model.StatusID" />
</div>
<div class="ui-field-contain">
<label for="Remote">Remote:</label>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend></legend>
<input name="Remote" id="radio-Remote-Yes" value="Yes" #(Model.Local == "Yes" ? "checked" : "") type="radio">
<label for="radio-Remote-Yes">Yes</label>
<input name="Remote" id="radio-Remote-No" value="No" #(Model.Local == "No" ? "checked" : "") type="radio">
<label for="radio-Remote-No">No</label>
<input name="Remote" id="radio-Remote-Null" value="NULL" #(Model.Local == "" ? "checked" : "") type="radio">
<label for="radio-Remote-Null">Null</label>
</fieldset>
</div>
<div class="ui-field-contain">
<label for="Local">Local:</label>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend></legend>
<input name="Local" id="radio-Local-Yes" value="Yes" #(Model.Local == "Yes" ? "checked" : "") type="radio">
<label for="radio-Local-Yes">Yes</label>
<input name="Local" id="radio-Local-No" value="No" #(Model.Local == "No" ? "checked" : "") type="radio">
<label for="radio-Local-No">No</label>
<input name="Local" id="radio-Local-Null" value="NULL" #(Model.Local == "" ? "checked" : "") type="radio">
<label for="radio-Local-Null">Null</label>
</fieldset>
</div>
<div class="ui-field-contain">
<label for="Credibility">Credibility:</label>
<input type="text" id="Credibility" name="Credibility" value="#Model.Credibility" />
</div>
<div class="ui-field-contain">
<label for="Classification">Classification:</label>
<input type="text" id="Classification" name="Classification" value="#Model.Classification" />
</div>
<div class="ui-field-contain">
<label for="Availability">Availability:</label>
<input type="text" id="Availability" name="Availability" value="#Model.Availability" />
</div>
<div class="ui-field-contain">
<label for="Ease">Ease:</label>
<input type="text" id="Ease" name="Ease" value="#Model.Ease" />
</div>
<div class="ui-field-contain">
<label for="Authentication">Authentication:</label>
<input type="text" id="Authentication" name="Authentication" value="#Model.Authentication" />
</div>
<h3 class="ui-bar ui-bar-a ui-corner-all">CVSS2</h3>
<div class="ui-body ui-body-a ui-corner-all">
<div data-role="fieldcontain">
<label for="slider">CVSS2_BaseScore:</label>
<input type="range" name="slider" id="slider" min="0" max="10" step=".1" value="#String.Format(new System.Globalization.CultureInfo("en-GB"), "{0:N1}", Model.CVSS2_BaseScore)" />
</div>
<div class="ui-field-contain">
<label for="CVSS2_TemporalScore">CVSS2_TemporalScore:</label>
<input type="text" id="CVSS2_TemporalScore" name="CVSS2_TemporalScore" value="#Model.CVSS2_TemporalScore" />
</div>
<div class="ui-field-contain">
<label for="CVSS2_BaseVector">CVSS2_BaseVector:</label>
<input type="text" id="CVSS2_BaseVector" name="CVSS2_BaseVector" value="#Model.CVSS2_BaseVector" />
</div>
<div class="ui-field-contain">
<label for="CVSS2_TemporalVector">CVSS2_TemporalVector:</label>
<input type="text" id="CVSS2_TemporalVector" name="CVSS2_TemporalVector" value="#Model.CVSS2_TemporalVector" />
</div>
<div class="ui-field-contain">
<label for="CVSS1_BaseScore">CVSS1_BaseScore:</label>
<input type="text" id="CVSS1_BaseScore" name="CVSS1_BaseScore" value="#Model.CVSS1_BaseScore" />
</div>
<div class="ui-field-contain">
<label for="CVSS1_TemporalScore">CVSS1_TemporalScore:</label>
<input type="text" id="CVSS1_TemporalScore" name="CVSS1_TemporalScore" value="#Model.CVSS1_TemporalScore" />
</div>
</div>
<h3 class="ui-bar ui-bar-a ui-corner-all">NVD CVSS2</h3>
<div class="ui-field-contain">
<label for="NVD_CVSS2_BaseScore">NVD_CVSS2_BaseScore:</label>
<input type="text" id="NVD_CVSS2_BaseScore" name="NVD_CVSS2_BaseScore" value="#Model.NVD_CVSS2_BaseScore" />
</div>
<div class="ui-field-contain">
<label for="NVD_CVSS2_ComponentString">NVD_CVSS2_ComponentString:</label>
<input type="text" id="NVD_CVSS2_ComponentString" name="NVD_CVSS2_ComponentString" value="#Model.NVD_CVSS2_ComponentString" />
</div>
<div class="ui-field-contain">
<label for="ImpactRating">ImpactRating:</label>
<input type="number" id="ImpactRating" name="ImpactRating" min="0" max="10" step="0.1" value="#Model.ImpactRating" />
</div>
<div class="ui-field-contain">
<label for="EaseofExploit">EaseofExploit:</label>
<input type="number" id="EaseofExploit" name="EaseofExploit" min="0" max="10" step="1" value="#Model.EaseofExploit" />
</div>
<div class="ui-field-contain">
<label for="UrgencyRating">UrgencyRating:</label>
<input type="number" id="UrgencyRating" name="UrgencyRating" min="0" max="10" step="0.1" value="#Model.UrgencyRating" />
</div>
<div class="ui-field-contain">
<label for="LastChange">LastChange:</label>
<textarea data-clear-btn="true" name="LastChange" id="LastChange" data-mini="true" data-inline="true" required="required" data-value="#Model.LastChange" placeholder = "Inserire qui il LastChange" rows="5" cols="40">#Model.LastChange</textarea>
</div>
<div class="ui-field-contain">
<label for="ShortSummary">ShortSummary:</label>
<textarea data-clear-btn="true" name="ShortSummary" id="ShortSummary" data-mini="true" data-inline="true" data-role="true" required="required" data-value="#Model.ShortSummary" placeholder = "Inserire qui lo ShortSummary" rows="5" cols="40">#Model.ShortSummary</textarea>
</div>
<div class="ui-field-contain">
<label for="Impact">Impact:</label>
<textarea data-clear-btn="true" name="Impact" id="Impact" data-mini="true" data-inline="true" required="required" data-value="#Model.Impact" placeholder = "Inserire qui l'Impact" rows="5" cols="40">#Model.Impact</textarea>
</div>
<div class="ui-field-contain">
<label for="TechnicalDescription">TechnicalDescription:</label>
<textarea data-clear-btn="true" name="TechnicalDescription" id="TechnicalDescription" data-mini="true" data-inline="true" required="required" data-value="#Model.TechnicalDescription" placeholder = "Inserire qui la TechnicalDescription" rows="5" cols="40">#Model.TechnicalDescription</textarea>
</div>
<div class="ui-field-contain">
<label for="AttackScenario">AttackScenario:</label>
<textarea data-clear-btn="true" name="AttackScenario" id="AttackScenario" data-mini="true" data-inline="true" required="required" data-value="#Model.AttackScenario" placeholder = "Inserire qui l'AttackScenario" rows="5" cols="40">#Model.AttackScenario</textarea>
</div>
<div class="ui-field-contain">
<label for="Exploit">Exploit:</label>
<textarea data-clear-btn="true" name="Exploit" id="Exploit" data-mini="true" data-inline="true" required="required" data-value="#Model.Exploit" placeholder = "Inserire qui l'Exploit" rows="5" cols="40">#Model.Exploit</textarea>
</div>
<div class="ui-field-contain">
<label for="Credit">Credit:</label>
<textarea data-clear-btn="true" name="Credit" id="Credit" data-mini="true" data-inline="true" required="required" data-value="#Model.Credit" placeholder = "Inserire qui i Credit" rows="5" cols="40">#Model.Credit</textarea>
</div>
<div class="ui-field-contain">
<label for="URL">URL:</label>
<input type="url" id="URL" name="URL" value="#Model.URL" />
</div>
<div class="ui-field-contain">
<label for="AlertStatusId">AlertStatusId:</label>
<input type="number" id="AlertStatusId" name="AlertStatusId" min="0" max="10" step="1" value="#Model.AlertStatusId" />
</div>
<div class="ui-field-contain">
<label for="Type">Type:</label>
<input type="number" id="Type" name="AlertStatusId" min="0" step="1" value="#Model.Type" />
</div>
<div class="ui-field-contain">
<label for="DetailLevel">DetailLevel:</label>
<input type="number" id="DetailLevel" name="DetailLevel" min="-1" step="1" value="#Model.DetailLevel" />
</div>
<div class="ui-field-contain">
<label for="Language">Language:</label>
<input type="number" id="Language" name="Language" min="-1" step="1" value="#Model.Language" />
</div>
<div data-role="controlgrup" data-type="horizontal">
Annulla
<input type="submit" value="Salva" data-inline="true" data-mini="true" />
</div>
}
</div>
<!-- /tab-0 -->
Given the test that we did in the comments, the following should solve the problem:
#Html.TextBoxFor(mdl => mdl.test, new { #id="Test", #min="0", #max="10", #step="0.1" })