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.
Related
Is there is any link for Ajax helper tags documentation in Asp.net Core. I am trying to learn ajax with asp.net core but i found no documentation for it.
In asp.net mvc we use #Ajax.Form and then uses AjaxOptions method for work on ajax. After many hours search i found this link.
https://dotnetthoughts.net/jquery-unobtrusive-ajax-helpers-in-aspnet-core/
In this link there is a way work with ajax in asp.net core.
I implement it in my project and successful.
Then i search for its documentation but i found nothing.
I want its documentation link.Please anybody help for its documentation
There are no server-side helpers, like #Ajax.Form, in ASP.NET Core. You could probably write your own tag helpers for similar features but I haven’t seen anyone do this. The general idea is to write actual JavaScript when you want to have client-side behavior. Hiding these things behind server-side magic is usually not the best idea.
jquery-ajax-unobtrusive is a JavaScript package that adds client-side behavior to look for various attributes in the final rendered page to add functionality on top of your standard forms. So this would be a fully JavaScript-based solution.
Unfortunately, there does not seem to be documentation about it. You can take a look at its source code to figure out what may or may not be possible.
jquery-ajax-unobtrusive documentation
From taking a quick look at the source (disclaimer: without testing the functionality myself), this seems to be the supported data attributes and available functionality of the package:
data-ajax="true" – To enable the functionality for a form.
data-ajax-update – Selector for the elements that are updated with the AJAX result, using the mode.
data-ajax-mode
data-ajax-mode="before" – Prepends the data to the element.
data-ajax-mode="after" – Appends the data to the element.
data-ajax-mode="replace-with" – Replaces the element with the data.
Otherwise sets the HTML content of the element to the data.
data-ajax-confirm – Message that is displayed to the user to confirm the form submission.
data-ajax-loading – Selector of element that is shown while loading.
data-ajax-loading-duration (default: 0) – Animation duration for show/hide of the loading element.
data-ajax-method – Allows overwriting the HTTP method for the AJAX request.
data-ajax-url – Allows overwriting the URL for the AJAX request.
data-ajax-cache – Set to other value than "true" to disable the jQuery AJAX cache parameter.
data-ajax-begin – Callback function before the request starts (arguments: xhr)
data-ajax-complete – Callback function when the request is completed (arguments: xhr, status)
data-ajax-success – Callback function when the request was successful (arguments: data, status, xhr)
data-ajax-failure – Callback function when the request failed (arguments: xhr, status, error)
The callback functions are the equivalent of jQuery’s beforeSend, complete, success, and failure. From how it looks, you can specify the callbacks using a JavaScript object path to the function.
For example data-ajax-success="foo.bar.onSuccess" will call the function foo.bar.onSuccess(), i.e. it will look for an object foo in the window, get its bar member, and call onSuccess on that.
https://github.com/Behrouz-Goudarzi/AjaxTagHelper
AjaxTagHelper
A simple solution to using links and ajax forms using Tag Helper in aspnet core
First, copy the AjaxTagHelper class from the Extensions folder to your project.
Second, copy the AjaxTagHelper.js file from js folder in wwwroot and add it to your project.
Then do the following: Open the viewImports file and add the following code
#using AjaxTagHelper.Extensions
#using AjaxTagHelper
#using AjaxTagHelper.Models
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper *, AjaxTagHelper
To use Action Ajax, add the following code instead of the tag.
<ajax-action ajax-action="Delete" ajax-controller="Home" ajax-data-id="#Model.Id"
class="btn btn-danger btn-sm" ajax-success-func="SuccessDelete">
Delete
</ajax-action>
Use the following code to use AJAX to send the form to server.
<div class="row">
<form id="frmCreate" class="col-sm-9">
<div class="row">
<div class="col-sm-4 form-control">
<input placeholder="Enter Name" name="Name" class="input-group" type="text" />
</div>
<div class="col-sm-4 form-control">
<input placeholder="Enter Family" name="Family" class="input-group" type="text" />
</div>
<div class="col-sm-4 form-control">
<input placeholder="Enter Email#site.com " name="Email" class="input-group" type="email" />
</div>
</div>
</form>
<div class="col-sm-3">
<ajax-button ajax-controller="Home" ajax-action="Create" ajax-form-id="frmCreate" ajax-success-func="SuccessCreate"
class="btn btn-sm btn-success">
Create
</ajax-button>
</div>
</div>
Finally, add the scripts you need to view it, check the code below
<script>
function SuccessCreate(data) {
console.log(data);
$("#tbodyPerson").append(data);
}
function SuccessDelete(data) {
$("#tr" + data.id).fadeOut();
}
</script>
<script src="~/js/AjaxHelper.js"></script>
If you're looking for the old style Ajax helpers in Core, this Nuget package might help -
AspNetCore.Unobtrusive.Ajax
You can install it using -
PM> Install-Package AspNetCore.Unobtrusive.Ajax
This will enable you to use helpers like
#Html.AjaxActionLink()
#Html.AjaxBeginForm()
#Html.AjaxRouteLink()
Here's the github details. You can find more documentation in there.
Github Url to the project
I have been searching for an answer for this but can't seam to find one.
<div class="text-center">
<img src="#Html.DisplayFor(model => model.Image)" class="img-thumbnail">
</div>
This is the section I'm using. Basically I'm inputting the url as text into the database and when I use the above code (in the details page) it shows the image in Internet Explorer, but not in Chrome.
I'm VERY new to this so I'm unsure how to do this.
Thanks
Use Url.Content as shown below since Model.Image has the URL:
<div class="text-center">
<img src="#Url.Content(Model.Image)" class="img-thumbnail">
</div>
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 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.
I have an MVC 3 application that we run on our handhelds inside a web browser control. The devices run either CE5 or CE6.
When an image is requested on CE5, the image is displayed fine, but on CE 6 the image appears to download but doesn't actually appear until the page is clicked.
Once this happens, the image is cached (somehow) and is fine going forward for that session.
Has anyone else encountered this problem?
This is the only other page I can find that mentions the issue but no solution is mentioned:
http://social.msdn.microsoft.com/Forums/en-US/vssmartdevicesvbcs/thread/0396d869-2ac2-4d38-8565-2d308eb8573a/
EDIT:
The view code is below. Model.DisplayItem would return a string like:
~/Areas/R2D2Picking/Content/images/M00119.jpg
The actual images are on a separate drive (rather than part of the solution) so we access these by creating the folder structure in the solution, excluding this from the build and creating a virtual directory under the relevant root in IIS. We use this method in many of our applications so I don't believe that this would itself be an issue.
#using R2D2Picking.Models.ViewModels;
#using System.IO;
#using System.Net;
#model ItemImageVM
<div class='backImage'>
<a href="#Url.Action("PickSelectedItems", "Common")" onfocus="if(this.blur)this.blur()">
<img alt='' src="#Url.Content("~/Areas/R2D2Picking/Content/ButtonImages/BackButton.bmp")" /></a>
</div>
<div class='smallPrompt'>
<p>#Model.DisplayLiteral</p>
</div>
#if (Model.ImageExists())
{
<div class='itemImage'>
<a href="#Url.Action("PickSelectedItems", "Common")">
<img alt='' src="#Url.Content(#Model.DisplayItem)" /></a>
</div>
}
else
{
<div class='noImage'>
<a href="#Url.Action("PickSelectedItems", "Common")">
<img alt='' src="#Url.Content("~/Areas/R2D2Picking/Content/ButtonImages/no_picture.bmp")" /></a>
</div>
}
A sample image is below: