I will be putting a big bounty on this question as it's a service I think people would really be able to leverage.
I have recently wrote a script using ASP.NET MVC/C#. It is simple enough - it displays a frontend for a database of users on a webpage. The entire code can be posted below, it doesn't really need to be read as it is quite simple, but just to give a full background of what I am doing -
Here is the main page of the site :
#model IEnumerable<WhoIs.Models.Employee>
#{
ViewBag.Title = "Contoso Employees";
}
#section featured {
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>#ViewBag.Title.</h1>
</hgroup>
</div>
</section>
}
<label for="filter">Enter employee details here : </label>
<input type="text" name="filter" value="" id="filter" />
<h2><strong>Users</strong> (create new)</h2>
<br />
<div style="min-height: 150px; font-size: 1.25em">
<div style="margin-bottom: .5em">
<table><thead><tr><th>Name</th><th>Branch</th><th>Phone No.</th><th>Username</th><th>Email</th></tr></thead>
<tbody>
#foreach ( var prod in Model )
{
<tr>
<td>#prod.FullName</td>
<td>#prod.Branch</td>
<td>#prod.PhoneNo</td>
<td>#prod.DomainAC</td>
<td>#prod.Email</td>
#if (User.IsInRole(#"Admins") || User.Identity.Name == prod.DomainAC) {
<td>edit</td>
}else{
<td>User => #User.ToString()</td>
}
<td><input type="checkbox" name="message" value="#prod.PhoneNo">Message<br></td>
</tr>
}
</tbody>
</table>
</div>
</div>
<div id="iframe2">
<br />
<iframe src="http://webaddress.com/web/login.htm" width="400" height="400" />
</div>
This renders a simple page with a list of employees at Contoso, giving Admins and users themselves the ability to edit their details. After this, I have an iframe of a remote web server I do not have control of. The iframe has some input boxes which pass values into a PHP function with a GET. Where the checkboxes are selected above, in my ASP.NET/MVC, I would like to pass the value of the checkbox (the users phone number) into my url/get command.
How can I do this ?
For completeness, although this cannot be edited, the HTML of the iframe looks like :
echo "<body>";
echo "<form action=d.php method=get>";
echo "<input type=hidden name=u value=$u>"; <!--Username passed from previous page of iFrame-->
echo "<input type=hidden name=p value=$p>";<!--Password passed from previous page of iFrame-->
echo "<input type=text name=s value=$s>";<!--List of phone numbers-->
The PHP in d.php simplifies to :
$u = $_GET['u'];
$p = $_GET['p'];
$s = $_GET['s'];
So if I put in some values, the URL changes to :
http://webaddress.com/web/d.php?u=112233&p=1234&s=12345678910&m=test
What I want to do is, for each checkbox selected above, append to &s a comma followed by the phone number of the row of the selected user.
So, for instance, if I have this in my ASP.NET MVC
Full Name Branch PhoneNo DomainAC Email Checkbox
Test1 Test1 7777777 DOMAIN\TEST1 test1#test1.com Ticked
I would like to run http://webaddress.com/web/d.php?u=112233&p=1234&s=7777777&m=test
If I have another user named "John" with a phone number of 121212, then :
http://webaddress.com/web/d.php?u=112233&p=1234&s=7777777,121212&m=test
Is this possible? How can I do this ?
If I understand your question correctly, you are trying to manipulate the values of input text fields and checkboxes inside the iframe.
The simple answer is:
If the remote domain is different from your hosting domain, it is not possible to call methods or access the iframe's content document directly using javascript. You can use cross-document messaging, but that won't work in this scenario as you cannot change the remote site's source.
If both were on the same domain, this could be accomplished by using javascript. An example of accessing the iframe's document would be:
var iframe_doc = document.getElementById('iframe_id').contentWindow.document;
From there you could transverse the DOM using js as you normally would.
Related
I am trying to save input (an address) from an html form in order to use in other cshtml pages in my asp.net core web application. I am also using Razor as a template language. I have a web application in which the user will enter an address on one page and then on another page I want to use that input and place it into an api call. My html form is below.
<form method="post" action="/Features">
<p>
Address: <input type="text" name="searchString"/>
<input type="submit" value="Search" />
</p>
</form>
I have previously used sessions but it was for an asp.net project using web forms (I believe) and am not sure if this is the route I should go. The address being entered doesn't need to be kept secure. Thanks for any help.
You have two options here:
Submit the form to your page, store the address in TempData then redirect to the second page where you would use your submitted value (Here you use the Post/Redirect/Get pattern in order to avoid your form being submitted again by mistake via a page reload).
Submit the form directly to the second page.
Going with the first option is recommended.
Page:
<form method="post" asp-page-handler="Features">
<p>
Address: <input type="text" name="searchString"/>
<input type="submit" value="Search" />
</p>
</form>
Handler:
public IActionResult OnPostFeatures(string searchString)
{
TempData["Key"] = searchString;
return RedirectToPage("/SecondPage");
}
Then on your second page you get the searchString in the same way via:
string value = TempData["Key"] as string;
As i said you can also submit your form to the second page where you can do what ever you want with your value. Just be careful of multiple submissions.
Here is a demo to use TempData in Razor page:
cshtml:
<form method="post" asp-page-handler="Features">
<p>
Address: <input type="text" name="searchString"/>
<input type="submit" value="Search" />
</p>
</form>
cshtml.cs:
public IActionResult OnPostFeatures(string searchString) {
TempData["searchString"] = searchString;
xxxxxxx
}
Other Page you want to use searchString:
string searchString=TempData["searchString"];
//TempData.Keep(); can help you keep the value,and you can still use the searchString value in other place
TempData.Keep();
or you can use
string searchString=TempData.Peek("searchString");
So that you can still keep the searchString value
I have a <form> where I am using Vue.js and Quasar, and submits in as a HTML form in asp .net core 3.1
The problem is when I am using Quasar Uploader (https://quasar.dev/vue-components/uploader).
The functionality works fine, but when I submit the form (post i C# and .net core).
I cant get the the file in the controller.
As you can see from this example: https://codepen.io/cbrown___/pen/GRZwpxw
When the Uploader is rendered it does not have the attribute name. From the example above you have this input:
<input tabindex="-1" type="file" title="" class="q-uploader__input overflow-hidden absolute-full">.
I guess that is why I cant get it from my Controller. How can I solve this when I am using .net Core 3.1 to submit this form?
And I see no good solutinos in letting people upload files through my API before the record is created.
Is it a option here I do not see?
EDIT:
The <input> is on the plus-icon. So by using inspect elements you should be able to see that no name occurs.
EXAMPLE CODE:
HTML
<div id="q-app">
<div class="q-pa-md">
<div class="q-gutter-sm row items-start">
<q-uploader
url="http://localhost:4444/upload"
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
color="teal"
flat
bordered
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
label="Upload files"
color="purple"
square
flat
bordered
style="max-width: 300px"
></q-uploader>
<q-uploader
url="http://localhost:4444/upload"
label="No thumbnails"
color="amber"
text-color="black"
no-thumbnails
style="max-width: 300px"
></q-uploader>
</div>
</div>
</div>
JS:
new Vue({
el: '#q-app'
})
If any body else need this I ended up with using this:
:name="'file_description[' + index + ']'"
That way each one got one name...and from another array I knew how many file_description it would be.
using the following url:
link to search results page
I am trying to first scrape the text from the a tag from this html that can be seen from the source code when viewed with Firebug:
<div id="search-results" class="search_results">
<div class="searchResultItem">
<div class="searchResultImage photo">
<h3 class="black">
<a class="linkmed " href="/content/1/2484243.html">加州旱象不减 开源节流声声急</a>
</h3>
<p class="resultPubDate">15.10.2014 06:08 </p>
<p class="resultText">
</div>
</div>
<p class="more-results">
But what I get back when I scrape the page is:
<div class="search_results" id="search-results">
<input type="hidden" name="ctl00$ctl00$cpAB$cp1$hidSearchType" id="hidSearchType">
</div>
<p class="more-results">
Is there anyway to view the source the way Firebug does?
How are you scraping the page? Use something like Fiddler and check the request and the response for dynamic pages like these ones. The reason why Firebug sees more is because all of the dynamic elements have loaded already when you are viewing it in your browser, when in fact your scraping method is only one piece of the puzzle (the initial HTML).
Hint: For this search page, you will see that the request for the results data is actually a) a separate GET request with b) a long query string and c) a cookie on the header, which returns a JSON object containing the data. This is why the link you posted just gives me "undefined," because it does not contain the search data.
I need to add html tags dynamically in asp.net code behind , here is the scenario :
List<Product> products = ProductManager.GetProductList();//read data from database
Product is a class containing information I need to show in website such as product name, image,… .
For adding html code I tried this to show 5 products per page :
String finalHtmlCodeContainer="";
for(int i=0;i<=5;i++)
{
String myBox= "<div class=\"box\"> </div>";
finalHtmlCodeContainer+=mybox;
}
boxWrapper.InnerHtml=finalHtmlCodeContainer;
boxWrapper is a div that would contain our 5 product info.up to now everything is ok but problem appears when insted of "<div class=\"box\"> </div>",myBoxcontains long characters of html code , the original myBox should include this:
<div class="boxWrapper">
<div class="box">
<div class="rightHeader">rightHeader</div>
<div class="leftHeader">leftHeader</div>
<div class="article">
<img src="../Image/cinemaHeader.jpg" />
<p>
some text here <!--product.content-->
</p>
</div><!--end of article-->
<div class="rightFooter"><span>rightFooter</span>
<div class="info">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
</div><!--end of rightFooter-->
<div class="leftFooter"><span>leftFooter</span>
</div><!--end of leftFooter-->
</div><!--end of box-->
</div><!--end of boxWrapper-->
you see if i add producet.atrributes to code snippet above, it would be more messy,hard to debug , has less scalability and... . what is your solution?
It depends on the underlying product. If you are using web forms, I'd suggest using a data bound control that supports templating like the ListView or Repeater. It gives you full control over the UI, and also supports reloading the UI in ViewState. In your scenario, you'd have to build the UI on every postback. The ListView or Repeater track it in ViewState.
If you are using MVC, well using a helper method can make this easier as you can stick the item template within and then use a foreach and render out the helper.
If you are talking doing it in JavaScript, then there are templating components for doing the same thing.
I suggest you to Add repeater in your <p> tag ,
<p>
<asp:Repeater runat="server" ID="rpDetail">
<ItemTemplate>
<div class="box">
<%# Eval("YourDataField") %>
</div>
</ItemTemplate>
</asp:Repeater>
</p>
And make your products list as Repeater's datasourse in code behind .
rpDetail.DataSource = products ;
rpDetail.DataBind();
I am writing a website master page with a form for member login
Below is the markup from the master page:
<form id="loginForm" action="account.aspx" method="POST">
<div class="div-topHead">
<input type="button" id="submitLogin" title="Login" value="Login" />
<input type="button" id="forgetPW" title="Forget password" value="?" onclick="window.open('forgetpassword.aspx','_self')" />
</div>
<div class="div-topTail">
<div class="div-login">
<div class="row-body row-def">
<input id="input_memID" name="input_memID" runat="server" type="text" maxlength="255" />
</div>
<div class="row-header row-def">
Member ID:
</div>
</div>
<div class="div-login">
<div class="row-body row-def">
<input id="input_memPW" name="input_memPW" runat="server" type="password" maxlength="255" />
</div>
<div class="row-header row-def">
Password:
</div>
</div>
</div>
</form>
and below is the posting script
$(function(){
$('#submitLogin').click(function(){
var f = $('#loginForm').get(0);
$.post("../script/loginCheck.aspx", { "memID": f.inputID.value, "memPW": f.inputPW.value }, function(data){
var result = JSON.parse(data);
if(result[0] == 1){
//Login validated
f.submit();
} else {
//Login is invalid
alert(result[1]);
}
});
});
});
The problem is, when i open the website on browser,
the text input field names are automatically added a prefix "c100$"
and then from console I can see I got below error
Uncaught TypeError: Cannot read property 'value' of undefined
I have tried to lookup on the net what is this happening,
and seems it is something .NET automatically does.
Yet I could not find a way to make my post script works.
I don't need to keep the ID as it was without ct100,
as long as the posting script can work
I tried changing to f.ct100$input_memID etc but not working
Also tried the clientIDMode="Static" but can't get it work either
the browser complains clientIDMode is not an attribute of <% PAGE %>
So could someone please kindly advise what can I do?
Thanks in advance!
ClientIDMode is a property that can be added to individual controls.
In addition (from MSDN):
You can set the ClientIDMode value for all pages in a Web site by setting the pages element in the site's Web.config file. You can set the ClientIDMode value for a page in the # Page directive.
This for instance:
<div id="dvDiv" runat="server" clientidmode="Static" />
Will make the div's name be "dvDiv" in both client and server side.
So $("#dvDiv") will work fine on the client side.
About your last remark, make sure you put it in <%# Page %> and not in <% Page %> (notice the # sign)
Although Blachshma's answer is perfectly reasonable and will solve your problem, I recommend simply taking off the runat="server" attributes on your inputs.
I can't see that you have any real reason to have these exist as HtmlInputText objects if you don't need to reference them from page code-behind.
EDIT: as per comment, if you do need to access them from code-behind, then it's a better idea to simply change the ClientIDMode to Static.
You can simply use this jquery selector to get any element you want :-
$("[id$='yourElementID']")// Select an Element whose ID ends with yourElementID
Example :-
$("[id$='submitLogin']").click(function(){
var f = $("[id$='loginForm']").get(0);
....................
See The Detailed Information here
If the Javascript code is contained inside the aspx markup, you can also use
var f = $('#<%= loginForm.ClientID %>').get(0);