The screenshot below shows 2 pieces of text (in red rectangles) that I need to extract from the attached html. I was able to do a simple one but this is beyond me at the moment.
The text in the green rectangle is unique in the entire document and therefore can be used as a starting point to find the other 2.
At the bottom is all the html for the "section" element that can be used for this example.
Big thanks for any help I can get.
enter image description here
<section class="details-portlet">
<div data-auto="details-tile-title" class="details-portlet__title ">
<i class="fa fa-book details-portlet__title-icon"></i>
<h3 data-auto="Company Summary">Company Summary</h3>
</div><div>
<div class="details-portlet__columns--seperator">
<div class="details-portlet__col " data-auto="Contact">
<div class="portlet-content details-shared-tile details-shared-tile__main ">
<div class="portlet-content__col--vert-centered portlet-content__col details-shared-tile__icon-col" title="Contact"><i class="fa fa-address-card-o portlet-content__icon"></i></div><div class="portlet-content__col--vert-centered portlet-content__col" data-auto="icon-tile-data">
<address data-auto="details-contact">
<div data-auto="details-contact-name" style="display: flex; align-items: center;">
<div class="details-shared-tile__main" style="margin-right: 5px;">Alexander Burd</div>
<div>
<div class="edit-icon">
<i class="fa fa-pencil contact-edit-icon" data-auto="edit-contact"></i>
</div>
</div>
</div>Sales Exec, Finance Exec <div class="custom-contact" data-auto="mmdb-email"></div><div class="custom-contact" data-auto="details-custom-contact"></div>
</address>
</div>
</div>
</div><div class="details-portlet__col " data-auto="Address"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class="portlet-content__col--vert-centered portlet-content__col details-shared-tile__icon-col" title="Address"><i class="fa fa-map-marker portlet-content__icon"></i></div><div class="portlet-content__col--vert-centered portlet-content__col" data-auto="icon-tile-data"><address data-auto="details-address"><div class="details-shared-tile__main">1177 West Loop S # 1400</div><div class="details-shared-tile__main">Houston, TX 77027</div><div data-auto="details-address-maplink"><a class="details-shared-tile__link">Map / Street View</a></div></address></div></div></div>
</div><div class="details-portlet__columns--seperator"><div class="details-portlet__col " data-auto="Phone"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class=" portlet-content__col details-shared-tile__icon-col" title="Phone"><i class="fa fa fa-phone portlet-content__icon"></i></div><div class=" portlet-content__col" data-auto="icon-tile-data">(713) 961-7777</div></div></div><div class="details-portlet__col " data-auto=" Website"><div class="portlet-content details-shared-tile details-shared-tile__main "><div class=" portlet-content__col details-shared-tile__icon-col" title=" Website"><i class="fa fa fa-link portlet-content__icon"></i></div><div class=" portlet-content__col" data-auto="icon-tile-data"><a target="_blank" href="http://713abogado.com" title="713abogado.com">713abogado.com</a></div></div></div></div>
</div><div class="details-portlet__columns company-summary-data"><div class="details-portlet__col"><div style="width: 100%;"><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Industry-(SIC)" class="details-portlet__data-cat" style="width: 33%;">Industry (SIC)</div><div data-auto="Industry-(SIC)-data" class="details-portlet__col">Attorneys (8111-03)</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Location-Type" class="details-portlet__data-cat" style="width: 33%;">Location Type</div><div data-auto="Location-Type-data" class="details-portlet__col">Single Loc</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Social" class="details-portlet__data-cat" style="width: 33%;">Social</div><div data-auto="Social-data" class="details-portlet__col"><a title="Facebook" href="//www.facebook.com/713abogado" target="_blank"><i class="fa fa-facebook-square social-links__facebook"></i></a></div></div></div></div><div class="details-portlet__col"><div style="width: 100%;"><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Sales-Volume" class="details-portlet__data-cat" style="width: 33%;">Sales Volume</div><div data-auto="Sales-Volume-data" class="details-portlet__col">$5,094,000</div></div><div class="details-portlet__data-columns" data-auto="data-column"><div data-auto="Employees" class="details-portlet__data-cat" style="width: 33%;">Employees</div><div data-auto="Employees-data" class="details-portlet__col">20</div></div></div></div></div>
</section>
Related
I have an HTML form written in the VIEW of an ASP.NET MVC application in which there's a radio selection option and after that comes the email address field.
I want that if the customer selects the option of "email" from the radio buttons then the email address input field becomes required in ASP.NET MVC.
HTML markup:
#model ABL_Complaint_Form.Models.Complaint_form_Model
#{
ViewData["Title"] = "Complaint Form";
}
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div class="Complaint_Form">
<h1 class="complaint_heading">
<span style="font-size: 25.6px; color: #222; font-weight: 300; Text-transform:uppercase; line-height: 35.8333px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif">Complaints</span>
</h1>
<div class="entry-content">
<h4 style="font-size: 19.2px; color: #222; font-weight: 700; Text-transform:uppercase; line-height: 26.8833px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif">Complaint Lodgement Form</h4>
<p>Your complaint will be inquired by our Service Standard and Quality –
Complaint Management Division. Depending upon the nature of the complaint,
we will respond to you at the earliest possible.
</p>
</div>
<h1 class="complaint_heading">
<span style="font-size: 18px; color: #222; font-weight: 700; Text-transform:uppercase; line-height: 26.8833px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif">User Details</span>
</h1>
<form method="post">
<!--Checking if customer's account exist or not-->
<div class="customer_checking">
<label for="customer_check" style="font-weight: 500; color: rgb(68, 68, 68); font-size: 14px; font-weight: 700; font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;">Allied Bank Customer<span style="color: rgb(185, 74, 72);">*</span></label>
<input type="radio" id="yes" name="customer_check" value="Yes" required>
<label for="Yes">Yes</label>
<input type="radio" id="no" name="customer_check" value="No">
<label for="no">No</label>
</div>
<div class="form-row">
<!--Customer's Full Name-->
<div class="individual_form">
<label for="fullname" style="font-weight: 500;">Full Name<span style="color: rgb(185, 74, 72);">*</span></label>
<input type="text" id="fullname" name="fullname" required>
</div>
<!--Customer's CNIC-->
<div class="individual_form">
<label for="cnic" style="font-weight: 500;">CNIC/SNIC<span style="color: rgb(185, 74, 72);">*</span></label>
<input type="text" id="cnic" name="cnic" required>
</div>
</div>
<div class="form-row">
<!--Customer's area of concern-->
<div class="individual_form">
<label for="concerned_area" style="font-weight: 500;">Please select the area of concern<span style="color: rgb(185, 74, 72);">*</span></label>
<select id="concerned_area" name="concerned_area" style="width: 300px; background-color: #FFFFFF; color: rgb(85, 85, 85);" required>
<option selected="true" disabled="disabled"></option>
<option value="Branch Banking Services">Branch Banking Services</option>
<option value="Debit/Credit/Prepaid Card">Debit/Credit/Prepaid Card</option>
<option value="My ABL Internet / Mobile Banking">My ABL Internet / Mobile Banking</option>
<option value="Phone Banking Services">Phone Banking Services</option>
<option value="Loan / Trade Products ">Loan / Trade Products</option>
<option value="Others">Others</option>
</select>
</div>
<!--Customer's Complaint-->
<div class="individual_form">
<label id="complaint" style="font-weight: 500;">Complaint Details<span style="color: rgb(185, 74, 72);">*</span></label>
<textarea id="complaint_textarea" name="complaint" rows="4" cols="50" required></textarea>
</div>
</div>
<p style="font-weight: bold; color: #707070;">Note: ABL Customers are requested to provide account details in the complaint description above.</p>
<div class="form-row">
<!--Incident Date-->
<div class="individual_form">
<label for="incident_date" style="font-weight: 500;">Date of Incident<span style="color: rgb(185, 74, 72);">*</span></label>
<input type="date" id="incident_date" name="incident_date" required>
</div>
<!--Name of the branch-->
<div class="individual_form">
<label for="branch_name" style="font-weight: 500;">Branch Name</label>
<input type="text" id="branch_name" name="branch_name">
</div>
</div>
<div class="form-row">
<!--Medium through which the customer should be contacted-->
<div class="individual_form">
<label for="preferred_communication_medium" style="font-weight: 500;">Please select the preferred medium for communication<span style="color: rgb(185, 74, 72);">*</span></label>
<div class="check_div">
<input type="radio" id="Call_Back" name="preferred_communication_medium" value="Call Back" required>
<label for="Call Back">Call Back</label>
</div>
<div class="check_div">
<input type="radio" id="Email" name="preferred_communication_medium" value="Email">
<label for="Email">Email</label>
</div>
</div>
<!--Time to contact customer-->
<div class="individual_form_Check">
<label id="preferred_call_time" style="font-weight: 500;">Please select the preferred time to call you<span style="color: rgb(185, 74, 72);">*</span></label>
<div class="check_div">
<input type="checkbox" id="Morning" name="preferred_call_time" value="Morning" required>
<label for="Morning">Morning</label>
</div>
<div class="check_div">
<input type="checkbox" id="Afternoon" name="preferred_call_time" value="Afternoon">
<label for="Afternoon">Afternoon</label>
</div>
<div class="check_div">
<input type="checkbox" id="Evening" name="preferred_call_time" value="Evening">
<label for="Evening">Evening</label>
</div>
</div>
</div>
<div class="form-row">
<!--Customer's contact number-->
<div class="individual_form">
<label for="customer_number" style="font-weight: 500;">Contact Number<span style="color: rgb(185, 74, 72);">*</span></label>
<input type="text" id="customer_number" name="customer_number" required>
</div>
<!--Customer's Email Address-->
<div class="individual_form">
<label for="email_address" style="font-weight: 500;">Email Address<span style="color: rgb(185, 74, 72);">**</span></label>
<input type="text" id="email_address" name="email_address" required>
</div>
</div>
<p style="color: rgb(102, 102, 102); font-size: 14px; font-weight: 400px;"><em>*indicates mandatory fields.<br>
** indicates mandatory field in case communication preference is email.</em></p>
<input style="background: #072b5d !important;border-color: #14365f !important;color: #fff !important;border: 0;padding: 10px 30px;" type="submit" value="Submit"/>
</form>
</div>
</form>
</div>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
"I want that if the customer selects the option of "email" from the
radio buttons then the email address input field becomes required in
ASP.NET MVC"
Based on your requirement it seems when the user will click on email as preferred_communication_medium then email textbox will be mandatory meaning without fallout email user cannot submit the form. Using jQuery/JavaScript, we can implement that.
HTML
Just add one addition id property as id="submitFrom" to your submit input item as shown below:
<input id="submitFrom" style="background: #072b5d !important;border-color: #14365f !important;color: #fff !important;border: 0;padding: 10px 30px;" type="submit" value="Submit"/>
Script
#section scripts {
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
//Your Submit Button Event
$("#submitFrom").click(function(){
//Check If the Email Radio Button Clicked
if($('#Email').is(':checked')){
//Gettiing the email address
var emailAddress = $("#email_address").val();
//Checking if the email address empty
if (emailAddress === "") {
alert("Sorry, Email No cannot be empty!");
$('#email_address').focus();
return false;
}
}
//End Checeking
alert("Valid Submitssion");
});
});
</script>
}
Output:
Note
When a user would click on the Email radio button in that case if the user doesn't enter any email it will prompt the email textbox and show the alert. If the user entered an email then it will show a valid submission.
I am trying to use the bootstrap 4 gallery however I am a bit lost I have my carsoul showing just with dummy data at present.
As you will notice the bootstrap carousel identifies each image with a number I need to know how to handle this.
This is the orginal code pen I found
https://codeply.com/go/tBbcVXe1xZ
I tried to setup a dotnetfiddle but was unsure how the models works on the online compiler
https://dotnetfiddle.net/Cc5ahV
I have to account for this on the mini pictures
id="carousel-selector-1" data-slide-to="1"
And this for the large pictures
Where the numbers in both should increase per photo
<div class="container">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
#foreach (var item in FileAttachments)
{
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" class="img-fluid">
</div>
}//this should print out same div set for every image attached to the record
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#foreach (var item in FileAttachments)
{
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
}
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
</ul>
</div>
The model would be
public class FileAttachments
{
public int Id
{
get;
set;
}
public string UrlOrPath
{
get;
set
}
}
Edit 2
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active carousel-item active" data-slide-number="1">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" class="img-fluid">
</div>
<div class="active carousel-item " data-slide-number="2">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" class="img-fluid">
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
<li class="list-inline-item active">
<a id="carousel-selector-1" class="selected" data-slide-to="1" data-target="#myCarousel">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
<li class="list-inline-item active">
<a id="carousel-selector-2" class="selected" data-slide-to="2" data-target="#myCarousel">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
</ul>
</div>
I have tried the following razor but it doesnt produce what i need from the code pen
The above html is produced by the below razor but its not working the next and previous.
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
i++;
var active = i == 1 ? "active" : "";
<div class="active carousel-item #active" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
j++;
<li class="list-inline-item active">
<a id="carousel-selector-#j" class="selected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
}
</ul>
</div>
</div>
For anyone else this is what works I just had to do a counter in relation to the loop.
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow">
<!-- main slider carousel items -->
<div class="carousel-inner">
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
<div class="#active carousel-item" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
i++;
}
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
var isSelected = i == 0 ? "selected" : "";
<li class="list-inline-item #active">
<a id="carousel-selector-#j" class="#isSelected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
j++;
}
</ul>
</div>
</div>
I am creating a modal in an aspx form which will add data in database. But it is showing this error
A page can have only one server-side Form tag.
I did the same in another file on same project where I created a Login page which worked completely fine. It also had 2 forms, the default one and the one I created. But here it is showing error although I have tried removing runat="server" from the second form but still no solution.
<body>
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsiblenavbar">
<a class="navbar-brand" href="index.aspx">
<img src="logo.ico" class="img-responsive" /></a>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="index.aspx"><i class="fa fa-home"></i> home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.aspx"><i class="fa fa-sign-out"></i> logout </a>
</li>
<%--<asp:listview runat="server" id="listview1" --%>
</ul>
</div>
</nav>
<p></p>
<style>
p {
line-height: 5px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="user.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">profile info</h5>
<%--<p class="card-text" id="para1"><i class="fa fa-user-circle-o"></i> taimoor baig</p>--%>
<asp:Label ID="label1" CssClass="card-text fa fa-user-circle-o" runat="server"> </asp:Label>
<p class="card-text"><i class="fa fa-user-circle"></i> admin</p>
<p class="card-text"><i class="fa fa-clock-o"></i> last login : xx-xx-xxxx</p>
edit profile
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%;">
<h1>welcome admin</h1>
<div class="row">
<div class="col-md-6">
<iframe src="http://free.timeanddate.com/clock/i6ovwi4o/n106/szw160/szh160/hoc222/hbw6/cf100/hgr0/hcw2/hcd88/fan2/fas20/fdi70/mqc000/mqs3/mql13/mqw6/mqd94/mhc000/mhs3/mhl13/mhw6/mhd94/mmc000/mml5/mmw1/mmd94/hwm2/hhs2/hhl55/hhb18/hhw8/hms2/hml85/hmb18/hmw8/hmr7/hss3/hsl90/hsr5" frameborder="0" width="160" height="160"></iframe>
</div>
<div class="col-md-6">
<div class="card" <%--style="font-size: large;"--%>>
<div class="card-body" style="width: 20rem;">
<h5 class="card-title">new orders</h5>
<p class="card-text">here you can add new orders.</p>
new orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">brand</h5>
<p class="card-text">here you can manage brand.</p>
add brand
manage brand
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">product</h5>
<p class="card-text">here you can manage products.</p>
add product
manage products
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">market</h5>
<p class="card-text">here you can manage markets.</p>
add market
manage markets
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">salesman</h5>
<p class="card-text">here you can manage salesman.</p>
add salesman
manage salesman
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">vendor</h5>
<p class="card-text">here you can manage vendor.</p>
add vendor
manage vendors
</div>
</div>
</div>
</div>
</div>
<!-- modal of brand -->
<div class="modal fade" id="form_brand" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">add new brand</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div runat="server" class="modal-body">
<form runat="server">
<div class="form-group" runat="server">
<label>brand name</label>
<%--<input type="text" class="form-control" name="brand_name" id="brand_name" placeholder="enter brand name"/>--%>
<asp:TextBox CssClass="form-control" ID="textbox1" runat="server">
enter brand name
</asp:TextBox>
</div>
<div class="form-group">
<label>brand sector name</label>
<%--<input type="text" class="form-control" id="brand_sector_name" placeholder="enter brand sector name"/>--%>
<asp:TextBox ID="textbox2" CssClass="form-control" runat="server">
enter brand sector name
</asp:TextBox>
<small id="brand_sector__error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label>vendor dealing</label>
<%--<input type="text" class="form-control" id="vendor_dealing" placeholder="enter vendor name"/>--%>
<asp:TextBox ID="textbox3" CssClass="form-control" runat="server">
enter vendor name
</asp:TextBox>
<small id="vendor_error" class="form-text text-muted"></small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
<button type="button" class="btn btn-primary">add</button>
</div>
</div>
</div>
</div>
I expect a webform with a modal displaying after pressing the "add brand" button
Looks like you have two form tag, 1 in master page and 1 in the page that throws the error.
Try to remove 1
I use bootstrap.my navbar icons jumping down when the window get smaller.when it is too small the menu goes to 3line icon bar.
How I can set my icons to appear in one line in small window?
here is my navbar code,
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img id="brand-image" alt="" src="../image/fullLogo.png"/>
</a>
</div>
<div class=" col-md-offset-2">
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>
<a href="../MainPages/avayejavid.html" class="header-style">
<i class="fa fa-home li-header-style" aria-hidden="true" ></i>
خانه
</a>
</li>
<li class="dropdown ">
<a data-toggle="dropdown" href="#" class="header-style">
<i class="fa fa-file-o li-header-style" aria-hidden="true"></i>
معرفی <span class="caret "></span>
</a>
<ul class="dropdown-menu" style=" background-color: #9D763C">
<li>
بیوگرافی
</li>
<li>
اعضای گروه
</li>
</ul>
</li>
<li>
<a href="../MainPages/gallery.html" class="header-style">
<i class="fa fa-picture-o li-header-style" aria-hidden="true" ></i>
گالری
</a>
</li>
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="header-style">
<i class="fa fa-file-o li-header-style" aria-hidden="true"></i>
ویدئو <span class="caret "></span>
</a>
<ul class="dropdown-menu" style=" background-color: #9D763C">
<li>
آموزش
</li>
<li>
تصنیف خوانی
</li>
<li>
ساز و آواز
</li>
</ul>
</li>
<li>
<a href="../MainPages/Articles.html" class="header-style">
<i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>
مقالات
</a>
</li>
<li>
<a href="../MainPages/movie.html" class="header-style">
<i class="fa fa-shopping-cart li-header-style" aria-hidden="true"></i>
خرید
</a>
</li>
<li>
<a href="#" class="header-style">
<i class="fa fa-comments li-header-style" aria-hidden="true"></i>
تماس با ما
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
and here is my CSS:
.header-style{
padding-top:20px !important;
background-image:url(../images/icon.png);
background-size: 100% 100% !important;
padding-left:40px !important;
padding-right:40px !important;
}
.li-header-style{
color:#ffe766
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
#media (max-width:767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 1px;
margin-left: 1px;
}
}
.navbar-nav li a {
height:80px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom:0;
}
.navbar .nav > li.dropdown.open.active > a:hover,
.navbar .nav > li.dropdown.open > a {
color: #ffe766 !important;
background-color: transparent !important;
border-color: #ffe766 !important;
}
#brand-image
{
height:100px;
}
The problem is the icons are taking up too much space for the designated break-point.
I would advise reading the bootstrap documentation more thoroughly (especially the grid system): http://getbootstrap.com/css/#grid-media-queries
To fix your problem you would need to increase the .navbar breakpoint. This is explained very well here: https://coderwall.com/p/wpjw4w/change-the-bootstrap-navbar-breakpoint.
You can also look at this previous answer to help you: Change bootstrap navbar collapse breakpoint without using LESS
I created Count bubble in button in mvc4 with jquery mobile. Below Code
<a href="url.html" class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
DK-02<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">11</span></a>
Gives
Now how to create similar look and feel button using #Html.ActionLink razor syntax?
#Html.ActionLink("DK-02","test","home")
UPDATED
With the help of u guys i solved my 80% problem. what i did is
<div class="ui-grid-c">
#for (int j = 1; j < myPutaway.Count + 1; j++)
{
if **(j == 1)**
{
<div class="ui-block-a">
<a href="#Url.Action("test", "DirectPutaway")" class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
#myPutaway[j].ReceivingLane.ToString() <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color: white; color: #52616D">#myPutaway[j].NoOfMuf.ToString() </span></a>
</div>
}
else if **(j == 2)**
{
<div class="ui-block-b">
<a href="#Url.Action("test", "DirectPutaway")" class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
#myPutaway[j].ReceivingLane.ToString() <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color: white; color: #52616D">#myPutaway[j].NoOfMuf.ToString()</span></a>
</div>
}
else if **(j == 3)**
{
<div class="ui-block-c">
<a href="#Url.Action("test", "DirectPutaway")" class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
#myPutaway[j].ReceivingLane.ToString() <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color: white; color: #52616D">#myPutaway[j].NoOfMuf.ToString()</span></a>
</div>
}
else if **(j == 4)**
{
<div class="ui-block-d">
<a href="#Url.Action("test", "DirectPutaway")" class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
#myPutaway[j].ReceivingLane.ToString() <span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color: white; color: #52616D">#myPutaway[j].NoOfMuf.ToString()</span></a>
</div>
}
}
</div>
I got it but i hardcorded j==1,2,3,4 to set css class ,,, which is need to display 4*4 grid. but instead of hard cording how i can make it dynamic. so my 1st value wil get class A and second Class B. .etc
you have to use #Url.Action to put the url in href attribute of a:
<a href='#Url.Action("test","home")' class="ui-li-has-count" data-role="button" data-ajax="false" data-mini="true" style="background-color:#52616D;color:white">
DK-02
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" style="background-color:white;color:#52616D">11</span>
</a>
or if you only want to go with Html helper method, then you have to write you own Custom Html Helper.
You can see how to create in this tutorial