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.
Related
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" />
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:
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'm doing a automation project using selenium webdriver and c#.
Now I have a challenge to solve: my system is a system to pay tickets, and each ticket is dynamic in the page with its components, to pay it's need to click in a dynamic checkbox(each ticket has the checkbox). Below, has a example with some tickets to pay:
<form action="/PagamentoOnline/fix_3001837_conexaoCore/Pagamento/FormaPagamento" id="frmDebitos" method="post"><input data-val="true" data-val-required="The TipoPagamento field is required." id="TipoPagamento" name="TipoPagamento" type="hidden" value="0" /> <div class="row">
<div class="col-md-6 txt-gray txt-right"><input data-val="true" data-val-required="The TipoSolicitacaoPagamento field is required." id="TipoSolicitacaoPagamento" name="TipoSolicitacaoPagamento" type="hidden" value="Pagamento" /></div>
<div class="col-md-3 txt-gray txt-right">
<input id="DataPagamento" name="DataPagamento" type="hidden" value="2017-02-13">
<span class="huge">13/02/2017</span>
<br />
<span class="medium">Data de pagamento</span>
</div>
<div class="col-md-3 txt-gray txt-right">
<span class="huge total-debitos-selecionados"></span>
<br />
<span class="medium">Total de débitos</span>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4 col-debito">
<input class="chk-debitos-selecionados" id="DebitosSelecionados_0_" name="DebitosSelecionados[0]" type="checkbox" value="29133609" /><input name="DebitosSelecionados[0]" type="hidden" value="false" />
<div class="panel panel-gray"
data-codigo-titulo="29133609"
data-valor-pagar="21.41"
data-valor-original="20"
data-data-vencimento="Venc.: 15/12/2016"
data-numero-parcela="1"
data-descricao-tipo-debito="Parcela"
data-sigla-periodo-letivo="2016/2">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<div class="medium pull-right"><i class="glyphicon glyphicon-unchecked"></i></div>
<div class="huge pull-left" data-bind="text: valor">R$ 21,41</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-left">Valor Atualizado</div>
<div class="pull-right">1ª Parcela - 2016/2</div>
</div>
</div>
</div>
<div class="panel-footer">
<span class="pull-left">Débito: R$ 20,00</span>
<span class="pull-right">Venc.: 15/12/2016</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-md-4 col-debito">
<input class="chk-debitos-selecionados" id="DebitosSelecionados_1_" name="DebitosSelecionados[1]" type="checkbox" value="29608740" /><input name="DebitosSelecionados[1]" type="hidden" value="false" />
<div class="panel panel-gray"
data-codigo-titulo="29608740"
data-valor-pagar="21.43"
data-valor-original="20.99"
data-data-vencimento="Venc.: 19/01/2017"
data-numero-parcela="1"
data-descricao-tipo-debito="Parcela"
data-sigla-periodo-letivo="2016/2">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<div class="medium pull-right"><i class="glyphicon glyphicon-unchecked"></i></div>
<div class="huge pull-left" data-bind="text: valor">R$ 21,43</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-left">Valor Atualizado</div>
<div class="pull-right">1ª Parcela - 2016/2</div>
</div>
</div>
</div>
<div class="panel-footer">
<span class="pull-left">Débito: R$ 20,99</span>
<span class="pull-right">Venc.: 19/01/2017</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="col-md-4 col-debito">
<input class="chk-debitos-selecionados" id="DebitosSelecionados_2_" name="DebitosSelecionados[2]" type="checkbox" value="29675826" /><input name="DebitosSelecionados[2]" type="hidden" value="false" />
<div class="panel panel-gray"
data-codigo-titulo="29675826"
data-valor-pagar="1210.42"
data-valor-original="1180.95"
data-data-vencimento="Venc.: 07/02/2017"
data-numero-parcela="2"
data-descricao-tipo-debito="Parcela"
data-sigla-periodo-letivo="2017/1">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12">
<div class="medium pull-right"><i class="glyphicon glyphicon-unchecked"></i></div>
<div class="huge pull-left" data-bind="text: valor">R$ 1.210,42</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="pull-left">Valor Atualizado</div>
<div class="pull-right">2ª Parcela - 2017/1</div>
</div>
</div>
</div>
<div class="panel-footer">
<span class="pull-left">Débito: R$ 1.180,95</span>
<span class="pull-right">Venc.: 07/02/2017</span>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-7"></div>
<div class="col-md-2 top-right">
</div>
<div class="col-md-1"></div>
<div class="col-md-2 top-right">
<button id="PagamentoCredito" type="submit" class="btn btn-success">Pagar com cartão de credito</button>
</div>
</div>
Each div class:
<div class="col-md-4 col-debito">
is a ticket to pay.
I need to select one of this tickets and select the checkbox
<i class="glyphicon glyphicon-unchecked"></i>
I tryed to use a foreach loop to select a especified checkbox of a ticket:
ticketToPay = "cod_ticket_to_pay";
ReadOnlyCollection<IWebElement> ticketsInSystem= driver.FindElements(By.XPath("//div[#class='panel panel-gray']"));
foreach (IWebElement ticketInformation in ticketsInSystem)
{
if (ticketInformation.GetAttribute("data-codigo-titulo").Equals(ticketToPay))
{
IWebElement checkBoxTicket = ticketInformation.FindElement(By.XPath("//*[#class='glyphicon glyphicon-unchecked']"));
checkBoxTicket .Click();
}
}
But when the action of the element checkboxTicket is click in the first element of his type, not in the correct ticket. Anyone know how to solve this?
One ticket - one checkbox
And
Selected ticket - selectecd checkbox to click.
I have no idea about how to do this with c#. But Using Java Language you can do this way.
WebElement check1 = driver.findElement(By.xpath("//input[#value='29133609']"));
WebElement check2 = driver.findElement(By.xpath("//input[#value='29608740']"));
WebElement check3 = driver.findElement(By.xpath("//input[#value='29675826']"));
int[] check_values = new int[] {29133609, 29608740, 29675826};
for(int i =0; i<check_values.length; i++)
{
WebElement check_source = driver.findElement(By.xpath("//input[#value='"+check_values[i]+"']"));
if(!check_source.isSelected())
{
check_source.click();
Thread.sleep(2500);
}
}
I have PromotionAdmin controller and view for get data from user.I'm trying to get data from multiple forms in view I have two form in view like this
<div class="col-md-9 well admin-content" id="spotpromotion">
<div class="row setup-content" id="step-1">
<div class="col-xs-8 col-md-offset-2">
<div class="col-md-12">
#using (Html.BeginForm("SpotPromotion", "PromotionAdmin", FormMethod.Post, new { #class = "form-group", enctype = "multipart/form-data", id = "SpotsubmitForm" }))
{
#Html.AntiForgeryToken()
<div class="form-group">
<label class="control-label" for="idspchgpointtxt">Charge Point ID<span style="color: red">*</span> :</label>
<input class="form-control" name="spchgpointid" placeholder="Charge Point" id="spchgpointid" required="required">
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idspmessagetxt">Message<span style="color: red">*</span> : </label>
<textarea class="form-control" id="spmessage" placeholder="Message" name="spmessage" rows="5" ></textarea>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idspstarttimetxt">Start Time<span style="color: red">*</span> :</label>
<div class="row">
<div class='col-sm-12'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input class="date-picker form-control" placeholder="Start Time" id="spstarttimetxt" name="spstarttimetxt" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idspstarttimetxt">End Time<span style="color: red">*</span> :</label>
<div class="row">
<div class='col-sm-12'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input class="date-picker form-control" placeholder="End Time" id="spendtimetxt" name="spendtimetxt" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idsptargetcritxt">Target Criteria<span style="color: red">*</span> :</label>
<br />
</div>
<div style="margin:30px;">
<div class="form-group ">
<label class="control-label col-sm-4" for="idspstarttxt">Start</label>
<input type="radio" name="srptargetcriradio" id="spstartradio" onclick="document.getElementById('spvaluetxt').style.display = 'none';">
</div>
<div class="form-group ">
<label class="control-label col-sm-4" for="idspchagingtxt">Chaging</label>
<input type="radio" name="srptargetcriradio" id="spchagingradio" onclick="document.getElementById('spvaluetxt').style.display = 'none';">
</div>
<div class="form-group ">
<label class="control-label col-sm-4" for="idspendtxt">End</label>
<input type="radio" name="srptargetcriradio" id="spendradio" onclick="document.getElementById('spvaluetxt').style.display = 'none';">
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idsptargetcritxt">Value</label>
<input type="radio" name="srptargetcriradio" id="spvalueradio" onclick="document.getElementById('spvaluetxt').style.display = 'block';">
<input type="number" min="0" class="form-control" placeholder="Value" id="spvaluetxt" name="spvaluetxt" required="required" style="display:none;" />
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" name="spsubmit" id="spsubmit" type="button">Submit</button>
}
</div>
</div>
</div>
</div>
<div class="col-md-9 well admin-content" id="targetpromotion">
<div class="row setup-content" id="step-1">
<div class="col-xs-8 col-md-offset-2">
#using (Html.BeginForm("TargetPromotion", "PromotionAdmin", FormMethod.Post, new { #class = "form-group", enctype = "multipart/form-data", id = "TargetsubmitForm" }))
{
#Html.AntiForgeryToken()
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="idtpchgpointtxt">Charge Point ID<span style="color: red">*</span> :</label>
<input class="form-control" placeholder="Charge Point" id="tpchgpointid" name="tpchgpointid" required="required">
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idtpmessagetxt">Message<span style="color: red">*</span> : </label>
<textarea class="form-control" id="spmessage" placeholder="Message" name="tpmessage" rows="5" required="required"></textarea>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idtpstarttimetxt">Start Time<span style="color: red">*</span> :</label>
<div class="row">
<div class='col-sm-12'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input class="date-picker form-control" placeholder="Start Time" id="tpstarttimetxt" name="tpstarttimetxt" required="required" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idtpstarttimetxt">End Time<span style="color: red">*</span> :</label>
<div class="row">
<div class='col-sm-12'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input class="date-picker form-control" placeholder="End Time" id="tpendtimetxt" name="tpendtimetxt" required="required" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idtptargetcritxt">Target Criteria<span style="color: red">*</span> :</label>
<br />
</div>
<div style="margin:30px;">
<div class="form-group ">
<label class="control-label col-sm-4" for="idtpstarttxt">Start</label>
<input type="radio" name="srptargetcriradio" id="tpstartradio" onclick="document.getElementById('tpvaluetxt').style.display = 'none';">
</div>
<div class="form-group ">
<label class="control-label col-sm-4" for="idtpchagingtxt">Chaging</label>
<input type="radio" name="srptargetcriradio" id="tpchagingradio" onclick="document.getElementById('tpvaluetxt').style.display = 'none';">
</div>
<div class="form-group ">
<label class="control-label col-sm-4" for="idtpendtxt">End</label>
<input type="radio" name="srptargetcriradio" id="tpendradio" onclick="document.getElementById('tpvaluetxt').style.display = 'none';">
</div>
<div class="form-group">
<label class="control-label col-sm-4" for="idtpptargetcritxt">Value</label>
<input type="radio" name="srptargetcriradio" id="tpvalueradio" onclick="document.getElementById('tpvaluetxt').style.display = 'block';">
<input type="number" min="0" class="form-control" placeholder="Value" id="tpvaluetxt" name="tpvaluetxt" required="required" style="display:none;" />
</div>
</div>
<button class="btn btn-primary nextBtn btn-lg pull-right" name="tpsubmit" type="button">Submit</button>
</div>
}
</div>
</div>
</div>
I'm calling PromotionAdmin Controller I'm calling following two methods
[CustomAuthorize(Roles = "admin")]
[HttpPost]
public ActionResult SpotPromotion(string spchgpointid, string spmessage, string spstarttimetxt, string spendtimetxt, string spstartradio, string spchagingradio, string spendradio, string spvalueradio)
{
string filename = "5fa9d4e9-c2ee-4d34-8d83-a83a60ffa49d.xls";
string couponfrom = "zcc";
List<ChgPoint> ch = new List<ChgPoint>();
ch = SpotControllerCRUD.GetAllChagePoint();
return View("Index");
}
[CustomAuthorize(Roles = "admin")]
[HttpPost]
public ActionResult TragetPromotion(string tpchgpointid, string tpmessage, string tpstarttimetxt, string tpendtimetxt, string tpstartradio, string tpchagingradio, string tpendradio, string tpvalueradio)
{
string filename = "5fa9d4e9-c2ee-4d34-8d83-a83a60ffa49d.xls";
string couponfrom = "zcc";
List<ChgPoint> ch = new List<ChgPoint>();
ch = SpotControllerCRUD.GetAllChagePoint();
return View("Index");
}
but when press the submit button it didn't went to action method
Change the type = "submit" instead of "button".
If the type is button you will have to specify its action.