Get specific html element when clicked - c#

I have a web app i'm working on, and i have a foreach loop in the cshtml file to display a list of values in boxes
#foreach(var obj in Model)
{
List<double> PN = new List<double>();
PN.Add(obj.ComponentNumber);
#if (obj.ComponentNumber == 3391012471)
{
<div class="box">
<div class="parent">
<h3 class="column inline-block-column">PN - #obj.ComponentNumber </h3>
<l class="circle-comp column1 inline-block-column" style="#ViewBag.check2"></l>
</div>
<div class="">
<p class="column">物料描述 - #obj.ComponentDescription</p>
<label class="switch">
<input type="checkbox" #ViewBag.check5>
<span class="slider round"></span>
</label>
</div>
</div>
}
else
{
<div class="box">
<div class="parent">
<h3 class="column inline-block-column">PN - #obj.ComponentNumber </h3>
<l class="circle-comp column1 inline-block-column"></l>
</div>
<div class="">
<p class="column">物料描述 - #obj.ComponentDescription</p>
<label id="knob" class="switch" >
<input type="checkbox" onclick="sendmsg()" checked="checked">
<span class="slider round"></span>
</label>
</div>
</div>
}
My aim is that when the checkbox is clicked, I would like to get that specific box and change a value in it, but so far all I have tried did not work (I tried using 'getElementById' to get the box #div and change its innerHTML value, but that changed all the boxes value. I would like to be able to distinguish each box which was created using the #foreach loop)
I would appreciate guidance or suggestions from anyone on how to go about this.

Related

How I can assign dynamic asp-for in razor view

#for (var i = 1; i < 5; i++)
{
var Tier = $"Tier{i}Score";
<div class="col-12 mt-2">
<div class="row">
<div class="col-2">
<label>#i</label>
</div>
<div class="col-md col-6">
<div class="d-flex align-items-baseline">
<label>#localizer[$"Label_Tier{i}Description"]</label>
<i class="fas fa-info-circle pl-2 cursor-pointer tooltip-ico" data-toggle="tooltip" data-placement="right" title="#localizer[$"Tooltip_Tier{i}Score"]"></i>
</div>
</div>
<div class="col-md col-4">
<input asp-for="#Tier" type="text" class="line-input form-control" maxlength="4" autocomplete="off" />
</div>
</div>
</div>
}
When my div is generated, my id just display as id=Tier, I would like to get result id=Tier1Score, id=Tier2Score, id=Tier3Score and id=Tier4Score. How I can achieve this. Thank you.
You can't also see this answer: Dynamically assigning asp-for variables
But since it's just a TagHelper (it doesn't do anything besides writing correct HTML) you could also write it like this:
<input name="#Tier" id="#Tier" type="text" class="line-input form-control" maxlength="4" autocomplete="off" />
The name is important for the form-post, the id is probably used for javascript thingies you might want to do.

Problem with saving value with the input type number to the chosen field to the database by C# in ASP .NET MVC

I have a problem with implement saving value with input type number to the database. I have created website with ASP .NET MVC with UnitOfWork and Repositories. I have a Commodity model, where I have field Amount, and I have HomeViewModel in which I have a field Amount also. I would like to overwrite the amount field from the commodity model. Should I use onchange or onclick in input or a tags in html code, or all with my basic ideas are nonsens ?
Below is the code snippet with view created in RazorPages with extension .cshtml.
<div class="col-12">
<div class="row my-3">
#foreach(var Commodity in Model.CommodityList.Where(c=>c.CategoryId==category.Id))
{
<div class="col-lg-4 col-xl-3 col-md-6 pb-4">
<div class="card" style="border:2px solid #43ac6a;border-radius:5px;
backgroundcolor: #fffeee">
<div class="pl-3 pt-1 text-center">
<h3 class="card-title text-primary"><b>#Commodity.Name</b></h3>
</div>
<div class="d-flex justify-content-between">
<div class="pl-1 text-muted">#localizer.Get("Price")</div>
<div class="pr-1 text-danger h5">$#Commodity.Price</div>
</div>
<img src="#Commodity.ImageUrl" class="card-img-top p-2 rounded" />
<div class="col-9">
<input onchange="save()" asp-for="#Commodity.Amount" type="number"
id="quantity" name="quantity" min="0" max="100" />
</div>
<a onclick="save()" asp-action="Details" class="btn btn-success"
style="border-
radius:2px;" asp-route-id="#Commodity.Id"
onclick="save()">#localizer.Get("Details")</a>
</div>
</div>
}
</div>
</div>
My problem is that I can't write the value from after pressing the button below as the tag.
Below is the method written by me in controller regarding to the view
public IActionResult Index()
{
HomeVM = new HomeViewModel()
{
CategoryList = _unitOfWork.Category.GetAll(),
CommodityList = _unitOfWork.Commodity.GetAll(includeProperties: "Category"),
ServiceList = _unitOfWork.Service.GetAll(includeProperties: "Category,Payment"),
EmployeeList = _unitOfWork.Employee.GetAll(includeProperties: "Service"),
Amount = _unitOfWork.Commodity.GetFirstOrDefault(includeProperties:
"Category").Amount
};
foreach (var commodity in (_unitOfWork.Commodity.GetAll(includeProperties:
"Category")))
{
var CommodityFromDb = commodity;
CommodityFromDb.Amount = HomeVM.Amount;
_unitOfWork.Save();
}
_unitOfWork.Save();
return View(HomeVM);
}
I have a guess that you probably need to do it somehow with jquery, in a file with the extension js, but I have no idea how. I would be grateful for any help.

How to validate the title of text box in selenium c#

In my application,one of the page has more dropdown box and text box.I am tring to validate the title of each text box and dropdown box but i am unable to construct proper xpath for doing assertion.
Below is the HTML code of that text box and dropdown box.
The title of the text box and dropdown is as below:
Please Select Credit Type:
How Much Do You Need?
Loan Term
Employment Type
<div class="row">
<div class="col-md-6">
<label class="control-label" for="creditType">Please Select Credit Type:</label>
<select class="form-control" id="CreditType" name="creditType" required="" onclick="hideError(this)" onchange="onProductSelection()" onfocus="hideError(this)">
<option value="1" id="inputDivMaster-1" selected="">Personal Loan</option>
<option value="2" id="inputDivMaster-2">Credit Card</option>
</select>
</div>
<div class="col-md-6">
<label class="control-label" for="loanAmount">How Much Do You Need?</label>
<input type="text" class="form-control allownumericwithoutdecimal" id="loanAmountInput" name="loanAmount" placeholder="R500 - R249 999" pattern="\d*" maxlength="6" onclick="hideErrorById('loanAmount')" value="249999" onfocus="hideErrorById('loanAmount')">
<span class="dl-error-msg" id="loanAmountError" style="display: none;"> </span>
</div>
</div>
<div class="row">
<div class="col-md-6">
<label class="control-label" for="loanTerm">Loan Term (Months)</label>
<input type="text" class="form-control allownumericwithoutdecimal" id="loanTermInput" name="loanTerm" placeholder="1 - 84 months" pattern="\d*" maxlength="2" onclick="hideErrorById('loanTerm')" value="80" onfocus="hideErrorById('loanTerm')">
<span class="dl-error-msg" id="loanTermError" style="display: none;"> </span>
</div>
<div class="col-md-6">
<label class="control-label" for="employmentStatus">Employment Type</label>
<select class="form-control" id="EmploymentStatusInput" name="employmentStatus" required="" onclick="hideErrorById('EmploymentStatus')" onfocus="hideErrorById('EmploymentStatus')"><option value="1">Permanent</option><option value="2">Temp/Seasonal/Casual worker</option><option value="3">Unemployed</option><option value="4">Pensioner</option><option value="5">Contract Worker</option><option value="6">Self Employed</option></select>
<span class="dl-error-msg" id="EmploymentStatusError" style="display: none;"> </span>
</div>
</div>
I am unable to construct xpath for locating the proper webelement to assert the title since the class name is same for all text boxes.Only the 'for' attribute gets changed.
What is the right way to locate the element.Kindly suggest suitable xpath.
String actual_title = driver.FindElement(By.XPath("_____?______")).Text;
String expected_title = "Please Select Credit Type:";
Assert.AreEqual(actual_title, expected_title);
Console.WriteLine("Text Box Title validated successfully");
You can use any attribute from the webelement as part of the xpath. In this case, you can use "for" attribute like this,
By.XPath("//label[#for='creditType']")

If statement in razor results on 2 columns merging into one

Below I have a grid layout in Razor.
The last 2 col should be between two separate cols... but it appears that the IF statement's are resulting in combining both the bottoms cols into one.
Am I doing this wrong?
It worked with just the second col to last col, but when I added the latest (at the bottom) - it is merging them now.
Here below, you'll see the code, and I attached a screen shot of what it looks like.
<div class="list-group container" id="JobRequestMonitorTable">
<div class="row list-group-item list-group-item-heading container divTableHeading">
<div class="col-md-4"> Job Code </div>
<div class="col-md-5"> Description </div>
<div class="col-md-2"> Schedule </div>
<div class="col-md-1"> Running </div>
<div class="col-md-1"></div>
</div>
#if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
<div class="row list-group-item-danger">
<div class="col-md-1 text-center">#ViewBag.ErrorMessage</div>
</div>
}
#foreach (var item in Model.JobRequests)
{
<div class="row list-group-item container">
<div class="col-md-4">#item.JobCode</div>
<div class="col-md-5">#item.Description</div>
<div class="col-md-2">#item.Schedule</div>
#if (#item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
<div class="col-md-1 text-break"></div>
#if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
<div class="col-md-1"></div>
</div>
}
To clarify: I want these two cols to be SEPERATE cols:
#if (#item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
<div class="col-md-1 text-break"></div>
#if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
<div class="col-md-1"></div>
You could add an empty icon if the item isn't running:
#if (#item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
#else
{
<span class="glyphicon"></span>
}
You need to put the <span> tags inside the <div> tags, which is what is defining your columns. You'll also need to probably change the item.Description column to col-md-4, as Bootstrap has a maximum of 12 columns across (each col being width: 8.3333%).
<div class="col-md-1 text-break">
#if (#item.IsRunning == true)
{
<span class="glyphicon glyphicon-ok"></span>
}
</div>
<div class="col-md-1">
#if (!item.IsRunning)
{
<span class="glyphicon glyphicon-list-alt"></span>
}
</div>

change item template in ASP.NET grid view related to fields value

i have a grid view to show my blog posts, my posts are in video,image,text format and each has html template that is different with another:
html:
<!-- Image Format -->
<div class="post format-image box">
<div class="frame">
<a href="post.html">
<img src="Templates/images/art/post1.jpg" alt="" />
</a>
</div>
<h2 class="title">Morning Glory</h2>
<p>text</p>
<div class="details">
<span class="icon-image">September 26, 2012</span>
<span class="likes">44</span>
<span class="comments">3</span>
</div>
</div>
<!-- Video Format -->
<div class="post format-video box">
<div class="video frame">
<iframe src="http://player.vimeo.com/video/40558553?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
<h2 class="title">Fragments of Iceland</h2>
<p>text</p>
<div class="details">
<span class="icon-video">September 13, 2012</span>
<span class="likes">18</span>
<span class="comments">1</span>
</div>
</div>
<!-- Text Format -->
<div class="post format-standard box">
<h2 class="title">The Meridian Sun</h2>
<p>text</p>
<p>text</p>
<div class="details">
<span class="icon-standard">August 13, 2012</span>
<span class="likes">11</span>
<span class="comments">0</span>
</div>
</div>
as you know if i want to have list of my posts in usually way
i should add grid view with item template and set my template in it,
but as you see i have 3 templates for my records,
and i have a field in my table called 'PostMode' that accepts 3 string :
Video, Image, Text.
now my question is how can i use 3 templates in item template that if my record was
Video display video template and if it was Text display Text format in my blogs list.
TemplateField tF = new TemplateField();
// tF.HeaderText = dr["COLUMN_NAME"].ToString();
tF.HeaderText = col.ToString();
tF.ItemTemplate = LoadTemplate("~/xxxxxxx.ascx");
grdVw.Columns.Add(tF);
Sorry for posting in such a hurry ,
Hope it helps .

Categories

Resources