In my MVC project I applied bootstrap classes to the html input controls but it is not working, before that I used html helper #Html.Editorfor but experiencing the same issue. My code:
HTML:
<div class="container">
<div class="row">
<form action="~/EditProfile/PersonalEdit" method="post" enctype="multipart/form-data">
<div class="col-lg-12 col-md-12 col-sm-12 form-group">
<input type="text" id="fname" name="fname" placeholder="First Name" class="form-control" />
</div>
</div>
</form>
</div>
HTML helper:
#Html.EditorFor(model=>model.FirstName,new {#class="form-control"})
How can I apply Bootstrap classes and make it responsive?
double check and make sure you are linking to bootstrap properly.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
View the source of this page and check if bootstrap.css is available on the page. Also check in chrome developer tools network tab for the path to css and js files. I should not be returning 404 error.
Related
I am trying to use summernote on my contact form for the text area, and unfortunately I have the textarea showing twice int he contact form when running the application.
Here is the textarea bootstrap code:
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<label asp-for="Message">Message</label>
<textarea rows="5" class="form-control" asp-for="Message" required data-validation-required-message="Please enter a message."></textarea>
<p class="help-block text-danger"></p>
</div>
</div>
#section Scripts{
<script>
//Default font size but not for placeholder...
$('#Message').summernote({
placeholder: "Please enter a message"
});
</script>
}
Note that I am using "summernote-bs4.min.css" & "summernote-bs4.min.js"
The problem is that for Bootstrap 4 I have to use the popper script to make it wor properly;
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" ></script>
For my application, i want to have a hidden iframe with a form inside, which has some input fields. The value to the fields will be added based on the response i get from backend and then submit the form. The problem is on the browser the content inside iframe is commented out like below
form tag in browser
My html code is like below
<html>
<head>
</head>
<body>
<div class="ddc-iframe-3ds">
<iframe height="1" width="1" style="display: none;" >
<form id="collectionForm" method="POST" action="https://secure-test.worldpay.com/shopper/3ds/ddc.html">
<input type="hidden" id="ddcBin" name="Bin" value="" />
<input type="hidden" id="ddcJWT" name="JWT" value="" />
</form>
</iframe>
</div>
</body>
</html>
in the below link, to integrate with payments, it is suggested to use hidden iframe with a form inside
3DS payment integration
Here I made a simple webpage to post pictures, text, etc. I also made a simple ajax file to send the text, picture, etc to the database, and retrieve that information to be displayed in the same webpage. Here is the main webpage:
<div class="here" id="here">
#foreach (var photo in db.Query(photos, galleryInfo)){
<div class="com_1 com_3">
<div class="com_4">
<div class="com_44">
<img alt="miniatura" style="margin-top: 0" src="#Href("~/Photo/Thumbnail2", photo.UserId, new { size="small" })" class="thumbnail-border thumb22" />
<div class="n-s">
<b>#photo.Nombre #photo.Apellido</b>
</div>
</div>
<div class="com_5">
#photo.Comment
</div>
</div>
<div class="comcom">
<div class="comcom1">
<form onsubmit="return fofon(this)" id="gog">
<input type="text" style="display: none" name="GroupId" value="#galleryInfo" />
<textarea class="texta"name="comment" placeholder="Write a comment..."></textarea>
<input type="submit" class="g_sub"/>
</form>
</div>
</div>
</div>
}
In case it gets confuse, this shows every post with a "comment section" below each one (we can call them "Commne2"). The ajax will get the text, picture etc, send it to the database, and post it to another file, which will be displayed here... in the #foreach{}.
Obviously, the posts do not "excist", so any javascript that affects that post, will not work, because that element does not exciste in this case.
So my problem is, how can I create an ajax file (javascript file) that affects the Comment2 so that I can comment a post?
I am using Jasny Bootstrap file upload control in my asp.net project.
It looks really good, but im unable to send the attached file to the server (a .ASHX webservice)
My layout code look like this
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div><span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" /></span>Remove
</div>
</div>
The HTML contains an <input type="file" />. You need to set the name attribute of the input element. Also make sure that you're using enctype="multipart/form-data" in the form.
<form action="myscript.ashx" method="post" enctype="multipart/form-data">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i> <span class="fileupload-preview"></span></div>
<span class="btn btn-file"><span class="fileupload-new">Select file</span><span class="fileupload-exists">Change</span><input type="file" name="myupload"/></span>
Remove
</div>
</div>
</form>
I am trying to upload a file using selenium web driver in c#.
I am trying this:
WebDriver.FindElement(By.Name("upload")).SendKeys("C:\Users\test\Desktop\test.cs");
but this is not working.
This is working properly in selenium IDE but not in selenium webdriver.
Following is the HTML code of the page:
where I am trying to use following element:
<input class="js-attach-file" type="file" tabindex="-1" name="upload">
<!DOCTYPE html>
<html lang="en">
<head>
<body class="page-index firefox firefox-9 windows extra-large-window full-content window-up">
<div id="nocss">
<div id="surface" class="clearfix" style="height: 725px;">
<div class="window-overlay">
<div class="window" style="left: 375px; top: 50px; display: block;">
<div class="window-wrapper clearfix">
<div>
<div class="window-header-utils">
<div class="window-header clearfix">
<div class="window-main-col">
<div class="window-sidebar">
<div class="window-module card-label-list clearfix hide">
<div class="window-module clearfix">
<div class="window-module clearfix attachments">
<h3>Attachments</h3>
<ul class="attachment-list hide"></ul>
<p class="no-attachments empty">No attachments.</p>
<div class="uploader touch-hide">
<form class="realfile" enctype="multipart/form-data" method="post" action="/api/card/4f701c9daf1765861a15545c">
<input type="hidden" value="" name="token">
<input type="hidden" value="attachFile" name="method">
<input type="hidden" value="http" name="format">
<input class="js-attach-file" type="file" tabindex="-1" name="upload">
</form>
<a class="button-link highlight-icon fakefile js-fakefile">
</div>
<p class="error js-file-too-large" style="display:none; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-weight: bold; margin: 8px 0 0; padding: 6px; background: #e3e3e3; ">File too large. 10mb limit.</p>
</div>
<div class="window-module other-actions clearfix">
<div class="window-module quiet-actions clearfix">
</div>
</div>
</div>
</div>
</div>
<div class="pop-over clearfix fancy-scrollbar" style="display: none;">
<script>
<script src="https://d2k1ftgv7pobq7.cloudfront.net/js/78dcaf5810779a263fe6939fc4895487/all.js">
</body>
</html>
You can find solution in below link.
You can solve it by using javascript
String script = "document.getElementById('fileName').value='" +"C:\\\\temp\\\\file.txt" + "';";
((IJavascriptExecutor)driver).executeScript(script);
Webdriver: File Upload
selenium is not able to identify or recognize the element whose attribute is type file.
Like example
<input type="file" id="id1" name="abc"></input>
so, to handle this situation we have to use third party tool like Point Position to compute x & Y coordinate of browse button.
then we can use either Low level mouse click handle in c# or we have to Use Autoit V3 tool to handle window popup.
You can find more in detail with full explanation and Practical example on my blog: http://avinashpandeblogsonseleniumautomation.blogspot.in/2015/06/upload-file-using-selenium-web-driver.html
If you are using Firefox browser instead of Send keys use type.
And If the browser is IE then u have to use tool like Autoit Or Selenium 2 contains a method attach_file or use this
sel.attach_file("css=input[type=file]", "http://url.com/file.txt")