In my ASP.NET MVC app, I have a ViewModel property called "Date" which is of the format "5/18/2012 2:43:45 PM". I would like to split this into separate controls on the UI.
jQuery UI - Datepicker would show the date - DONE
Show three dropdowns next to the Datepicker that display hour,minutes and am/pm.
I've added the three dropdowns to the UI but I am having difficulty understanding how to set those values based on what is being returned by the "Date" property of the ViewModel? In other words how do I split the Date and display it on the three dropdowns?
EDIT: Here is the View:
<div>
<%= Html.TextBoxFor(c => c.Scheduled, new { #Value = Model.Scheduled.Value.ToShortDateString(), #class = "datetime", style = "width:150px;" })%>
<ol class="align">
<li class="align" >
<select name="hour" >
<option value="1">1 </option>
<option value="2">2 </option>
<option value="3">3 </option>
<option value="4">4 </option>
<option value="5">5 </option>
<option value="6" >6 </option>
<option value="7">7 </option>
<option value="8">8 </option>
<option value="9">9 </option>
<option value="10">10 </option>
<option value="11">11 </option>
<option value="12">12 </option>
</select></li>
</ol>
</div>
If the "Date" property is of the correct type (DateTime) you should be able to call Date.Hour, Date.Minute, and use Date.ToString("tt") to get am/pm.
Assuming MVC3 with razor....
<div id="time">
Hour:<br/>
<input type="text" value="#Model.Date.Hour" /><br/>
Minute:<br/>
<input type="text" value="#Model.Date.Minute" /><br/>
AM/PM:<br/>
<input type="text" value="#Model.Date.ToString("tt").ToLower()" />
</div>
Related
I am trying to select an option within a dropdown. I cannot select with value.
How can I select state with value like CA, FL, TX,...
new SelectElement(chromedriver.FindElement(By.XPath("//select[#id='state']"))).SelectByValue("CA");
My code looks as follow:
<div tabindex="0" aria-label="State, This field is required." aria-invalid="This field is required." aria-required="true" alt="State, This field is required." data-talos="dropdownShippingState" class="field-wrapper-item error">
<label>State</label>
<div class="field-wrapper-children">
<input type="hidden" name="state" value="">
<div class="drop-down-selected" data-talos="dropdownShippingState"><i class="icon icon-drop-down" role="presentation"></i>
</div><span></span>
<div class="select-wrapper">
<label class="label-state" for="state">state</label>
<select name="state" id="state" autocomplete="shipping address-level1" class="hidden" tabindex="-1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="AA">Armed Forces Americas (AA)</option>
<option value="AE">Armed Forces Europe (AE)</option>
<option value="AP">Armed Forces Pacific (AP)</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="TX">Texas</option>
<option value="VI">U.S. Virgin Islands</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
</div>
I am using selenium with C#
Thanks!
Try this:
using OpenQA.Selenium.Support.UI;
var element = chromedriver.FindElement(By.XPath("//select[#id='state']"));
var selectElement = new SelectElement(element);
selectElement.SelectByValue("CA");
I want to send information to controller and I use html.beginform, but this function changes the whole view of page(cshtmlenter image description here).
I tried to change the place of the brackets, then it pass does not change the view but pass null.
I add to images of the view, what I am expect to get and what I get.
expect: https://ibb.co/1vyxRz9
https://ibb.co/gmx80z5
Thanks for the helpers.
#using (Html.BeginForm("ConfirmPayment", "Ticket", new
{
Title = Model.tickets[0].MovieName,
Price = Model.tickets[0].Price.ToString(),
}))
{
<form class="credit-card" action="ConfirmPayment" method="post">
<div class="form-header">
<h4 class="title">Credit card detail</h4>
</div>
<div class="form-body" required>
<!-- Card Number -->
<input type="text" class="card-number" placeholder="Card Number">
<!-- Date Field -->
<div class="date-field" required>
<div class="month">
<select name="Month">
<option name="Month" value="January">January</option>
<option name="Month" value="February">February</option>
<option name="Month" value="March">March</option>
<option name="Month" value="April">April</option>
<option name="Month" value="May">May</option>
<option name="Month" value="June">June</option>
<option name="Month" value="July">July</option>
<option name="Month" value="August">August</option>
<option name="Month" value="September">September</option>
<option name="Month" value="October">October</option>
<option name="Month" value="November">November</option>
<option name="Month" value="December">December</option>
</select>
</div>
<div class="year">
<select name="Year">
<option name="Year" value="2020">2020</option>
<option name="Year" value="2021">2021</option>
<option name="Year" value="2022">2022</option>
<option name="Year" value="2023">2023</option>
<option name="Year" value="2024">2024</option>
</select>
</div>
</div>
<!-- Card Verification Field -->
<div class="card-verification" required>
<div class="cvv-input">
<input type="text" placeholder="CVV">
</div>
<div class="cvv-details">
<p>3 or 4 digits usually found <br> on the signature strip</p>
</div>
</div>
<!-- Buttons -->
<input class="btnProcced" value="Proceed" type="submit" />
<input class="btnPaypal" value="Pay With Paypal" type="button" onclick="location.href='https://www.paypal.com/il/home?locale.x=he_IL'" />
</div>
</form>
}
So, I have a .cshtml page with a select box, based on the chosen option I want to conditionally render one div or another. Is there a way to do this only utilizing code within the .cshtml and not having to refer back to the controller or model?
<div class="text-center">
<select id="Select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
#if(someOptionFromTheSelect == 1)
{
<div>Render this Div</div>
}
else
{
<div>Render this one</div>
}
</div>
Is there anyway to use the selected option in the conditional statement? I have tried JQuery but I cannot seem to find a way to make that accessible to the C# conditional statement.
You can use if-else in the javascript.
You can refer to my demo:
View:
<div class="text-center">
<select id="Select" onchange="show()">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
<div id="id1">Render this Div</div>
<div id="id2" style="display:none;">Render this one</div>
</div>
#section Scripts
{
<script type="text/javascript">
function show() {
if ($("#Select :selected").val() == "1")
{
$("#id1").show();
$("#id2").hide();
}
else {
$("#id2").show();
$("#id1").hide();
}
}
</script>
}
result:
This post should provide what you need. In short, you’re going to need some JavaScript or to post the info to your controller. You won’t be able to just reference it with Razor directly.
I have a drop-down in asp.net core with country name and code. i need, when i select a drop-down value than it should be set a only code in drop-down. I have a screenshot you can see that,
screen Shot
now i have a second screen shot i want to like this drop-down after select value.
second Screen Shot
my view drop-down code is
<select class="form-control" id="countryDropdown" >
#foreach (var country in Model)
{
<option value="#country.id"
data-code="#country.codeName">
#country.Name
</option>
}
</select>
html dropdown is
<select class="form-control" id="countryDropdown">
<option value="3" data-code="93">
Afghanistan (93)
</option>
<option value="264" data-code="">
Åland Islands ()
</option>
<option value="4" data-code="355">
Albania (355)
</option>
<option value="5" data-code="213">
Algeria (213)
</option>
<option value="6" data-code="1">
American Samoa (1)
</option>
<option value="7" data-code="376">
Andorra (376)
</option>
<option value="8" data-code="244">
Angola (244)
</option>
<option value="9" data-code="1">
Anguilla (1)
</option>
<option value="266" data-code="">
Anonymous Proxy ()
</option>
<option value="10" data-code="672">
Antarctica (672)
</option>
<option value="11" data-code="1">
Antigua and Barbuda (1)
</option>
<option value="12" data-code="54">
Argentina (54)
</option>
<option value="13" data-code="374">
Armenia (374)
</option>
<option value="14" data-code="297">
Aruba (297)
</option>
<option value="268" data-code="">
Asia/Pacific Region ()
</option>
</select>
In this solution, we're wrapping the Country text inside a span tag. Whenever we click on the dropdown, this would fill the span tag with Country property. When you're done choosing an option, this would empty the span tag.
Add this to your script;
$(document).ready(function() {
$("#countryDropdown").find("option").each(function() {
var codeIndex = $(this).text().indexOf("(");
var country = $(this).text().substring(0, codeIndex);
var code = $(this).text().substring(codeIndex);
$(this).html("<span class='select-hide' data-country='" + country + "'></span>" + code);
});
$("#countryDropdown").focus(function() {
$(this).find(".select-hide").each(function() {
$(this).text($(this).data("country"));
});
});
$("#countryDropdown").change(function() {
$(this).blur();
});
$("#countryDropdown").blur(function() {
$(this).find(".select-hide").each(function() {
$(this).text("");
});
});
});
Demo below;
$(document).ready(function() {
$("#countryDropdown").find("option").each(function() {
var codeIndex = $(this).text().indexOf("(");
var country = $(this).text().substring(0, codeIndex);
var code = $(this).text().substring(codeIndex);
$(this).html("<span class='select-hide' data-country='" + country + "'></span>" + code);
});
$("#countryDropdown").focus(function() {
$(this).find(".select-hide").each(function() {
$(this).text($(this).data("country"));
});
});
$("#countryDropdown").change(function() {
$(this).blur();
});
$("#countryDropdown").blur(function() {
$(this).find(".select-hide").each(function() {
$(this).text("");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="countryDropdown">
<option value="3" data-code="93">
Afghanistan (93)
</option>
<option value="264" data-code="">
Åland Islands ()
</option>
<option value="4" data-code="355">
Albania (355)
</option>
<option value="5" data-code="213">
Algeria (213)
</option>
<option value="6" data-code="1">
American Samoa (1)
</option>
<option value="7" data-code="376">
Andorra (376)
</option>
<option value="8" data-code="244">
Angola (244)
</option>
<option value="9" data-code="1">
Anguilla (1)
</option>
<option value="266" data-code="">
Anonymous Proxy ()
</option>
<option value="10" data-code="672">
Antarctica (672)
</option>
<option value="11" data-code="1">
Antigua and Barbuda (1)
</option>
<option value="12" data-code="54">
Argentina (54)
</option>
<option value="13" data-code="374">
Armenia (374)
</option>
<option value="14" data-code="297">
Aruba (297)
</option>
<option value="268" data-code="">
Asia/Pacific Region ()
</option>
</select>
can you please try this.
This very simple and easy to understand and faster.
Please check this link JsFiddle
Note: please uncomment the console.log for more detail.
and You can modify this code as per your requirement here I'm sowing the current data-code display in the dropdown option.
$(document).ready(function() {
$("#countryDropdown option:first").text($("#countryDropdown option:first").data("code"));
$("#countryDropdown").change(function(event)
{
var oCurrentOption =this.options[event.target.selectedIndex];
$("#countryDropdown option[value="+oCurrentOption.value+"]").text($(oCurrentOption).data("code"));
//console.log(oCurrentOption);
//console.log("Data Code "+$(oCurrentOption).data("code"));
//console.log("Current Text "+oCurrentOption.text);
//console.log("Current Value "+oCurrentOption.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="countryDropdown">
<option value="3" data-code="93">
Afghanistan (93)
</option>
<option value="264" data-code="">
Åland Islands ()
</option>
<option value="4" data-code="355">
Albania (355)
</option>
<option value="5" data-code="213">
Algeria (213)
</option>
<option value="6" data-code="1">
American Samoa (1)
</option>
<option value="7" data-code="376">
Andorra (376)
</option>
<option value="8" data-code="244">
Angola (244)
</option>
<option value="9" data-code="1">
Anguilla (1)
</option>
<option value="266" data-code="">
Anonymous Proxy ()
</option>
<option value="10" data-code="672">
Antarctica (672)
</option>
<option value="11" data-code="1">
Antigua and Barbuda (1)
</option>
<option value="12" data-code="54">
Argentina (54)
</option>
<option value="13" data-code="374">
Armenia (374)
</option>
<option value="14" data-code="297">
Aruba (297)
</option>
<option value="268" data-code="">
Asia/Pacific Region ()
</option>
</select>
I have a requirement to populate 2 drop down list with hours and minutes. My current method of populating the drop downs doesn't format the numbers correctly as I require the leading 0 for the first 9 number i.e 01,02,03 not 1,2,3 as is currently happening.
C#
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (!IsPostBack)
{
// Populate and Bind Time drop downs
ddlOh1OpenHours.DataSource = Enumerable.Range(00, 24);
ddlOh1OpenHours.DataBind();
ddlOh1OpenMinutes.DataSource = Enumerable.Range(00, 60);
ddlOh1OpenMinutes.DataBind();
}
}
ASPX
<asp:DropDownList ID="ddlOh1OpenHours" runat="server" />
<span>:</span>
<asp:DropDownList ID="ddlOh1OpenMinutes" runat="server" />
Result:
<select name="ctl00$MainContent$ddlOh1OpenHours" id="ctl00_MainContent_ddlOh1OpenHours">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
Just use ToString with the proper format:
var hours = Enumerable.Range(00, 24).Select(i => i.ToString("D2"));
var minutes = Enumerable.Range(00, 60).Select(i => i.ToString("D2"));
dlOh1OpenHours.DataSource = hours;
ddlOh1OpenHours.DataBind();
ddlOh1OpenMinutes.DataSource = minutes;
ddlOh1OpenMinutes.DataBind();
> Demo <
Standard Numeric Format Strings