My project is asp.net MVC with VB.net. I am trying add feature of drag and drop a file. I have browsed several websites, also downloaded a code which is in C#. C# code works well. However, code in my project doesn't work. I've compared generated HTML code and they are same. Also tried by moving .css files into "/content" folder manually, adding link to .js manually in .vbhtml page [rather than script.render()]. But it didn't work. I'd tried with other JQuery file upload objects too. But none of them works. So, I thought perhaps the issue is with JQuery. So, I uninstalled it and installed it back. However, it didnt'help too. I am using JQuery 3.3.1.
Can you help ?
Main problem : Nothing happens when I drop the file. e.g. if I drop TXT file, browser just opens the TXT file as if I've dropped it in empty browser window.
HTML code is below :
<div class="row">
<div class="col-md-9">
<div id="dropzone">
<form action="/Home/Upload" class="dropzone needsclick dz-clickable" id="uploader">
<div class="dz-message needsclick">
<textarea rows="10" cols="20"></textarea>
Drop files here or click to upload.<br>
</div>
</form>
</div>
</div>
</div>
JS code is below. I can see alert "bingo" on page load.
#section scripts
<script>
$(document).ready(function () {
alert("bingo!");
Dropzone.options.uploader = {
paramName: "file",
maxFilesize: 2,
accept: function (file, done) {
if (file.name == "test.jpg") {
alert("Can't upload a test file.");
}
else {
//Show a confirm alert and display the image on the page.
alert("bingo2!");
}
}
};
});
</script>
end section
Related
I have a new asp.net mvc project (not .net core) and I am trying to incorporate Vue js into the project. I have everything working in a sample project using Webpack+Vue+Asp.Net Mvc, which was created following this article https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626.
The app works great, except for the split second before Vue renders. There is noticable flashing/popping of the Vue templated code before its rendered to html. Below is a gif of me refreshing the page and users are able to see the template before Vue renders it into html.
I know why this is happening, but I do not know any ways around it. Would Server Side Rendering fix this? Can SSR be done in a non .net core project?
Unfortunately, switching to asp.net core is not an option. The project will be using Umbraco 7, which cannot run on asp.net core (https://our.umbraco.com/forum/using-umbraco-and-getting-started/93640-net-core).
Below are my files
Index.cshtml
#{
ViewBag.Title = "Home Page";
}
<div class="jumbotron">
<h1>ASP.NET</h1>
<p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
<p>Learn more »</p>
</div>
<div id="app" controller-data="{ name: 'James' }">
<h3>Test</h3>
{{ vueMessage }}
{{ controllerData }}
<first-component v-bind:time="new Date()" data="#Model"></first-component>
<button v-on:click="test">Test</button>
</div>
<div class="row">
<div class="col-md-4">
<h2>Getting started</h2>
<p>
ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
enables a clean separation of concerns and gives you full control over markup
for enjoyable, agile development.
</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p>
</div>
<div class="col-md-4">
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
<p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p>
</div>
</div>
#Scripts.Render("~/Scripts/bundle/home.js")
index.js (gets compiled to Scripts/bundle/home.js by webpack)
import Vue from 'vue';
import FirstComponent from './sub-components/first-component.vue'
new Vue({
el: '#app',
components: {
FirstComponent
},
props: {
controllerData: Object
},
methods: {
test: function () {
console.log(this);
}
},
data: function () {
return {
vueMessage: 'Message from Vue'
};
}
})
first-component.vue
<template>
<div class="time">
{{ time }}
{{ data }}
</div>
</template>
<script>
export default {
props: {
time: {
type: Object,
required: true,
},
data: Object
}
}
</script>
<style>
.time {
color: #F44336;
}
</style>
Make use of the v-cloak attribute.
<div id="app" v-cloak>
...
</div>
The attribute is automatically removed by vue when the framework has finished mounting.
The v-cloack attribute does not show or hide your elements - it is basically a marker that indicates if mounting is finished. You write a css selector to target v-cloack to hide the elements or show a loading indicatior.
<style>
[v-cloak] > * { display:none }
[v-cloak]::before { content: "Please wait…" }
</style>
Switching to .net core or any other server side technology would not help.
The issue is because the html is rendered by the browser as it downloads & before all the script resources have downloaded/parsed/run & rendered the html from the Vue component.
When dealing with mixed rendering (partially server side & partially client side) your best option is to hide the template by default & "show" it once the vue component is setup & ready.
For example in your server side view, hide <div id="app"> either with an attribute, style or class.
<style>#app.loading {display:none;}</style>
<div id="app" v-bind:class="{ loading: !isloaded }">
Then in your vue component mounted method set isLoaded to true. This is just one of many ways to hide the component before it's ready.
I'm developing an ASP MVC application with ScrollSpy on one of my pages. I'm having a strange problem where it's working correctly when I run my site from localhost, but when I publish the application to a server, ScrollSpy isn't adding the active class to the <li> items.
This is the script on my page which initializes ScrollSpy.
#section scripts
{
<script>
$(document).ready(function () {
$('body').attr("data-target", "#side-nav");
$('body').attr("data-spy", "scroll");
});
</script>
}
Here's how my ScrollSpy navigation is defined.
<div id="side-nav" class="pull-left">
<ul class="affix nav nav-list nav-pills nav-stacked">
<li>First Section</li>
<li>Second Section</li>
<li>Third Section</li>
</ul>
</div>
Each section has an anchor tag defined like this
<a class="anchor" id="first-section"></a>
I verified that jquery.js and bootstrap.js are referenced correctly on the server by going to View Page Source and clicking on the link to view the .js file. I tried replacing the .min versions of the files with the same .js file that's being used on localhost, but that doesn't work.
I apologize in advance for this being a difficult to recreate problem. Please tell me if I should post any additional data to make it easier to troubleshoot.
I place a button in a div tag, and when I run it, I only see the div container
<div style= "border-style:solid;border-width:1px; padding:5px; background-color:#ffffcc">
<asp:button ID = "refresh" runat ="server" OnClientClick="reloadPage()">
<script type="text/javascript">
function reloadPage(){
window.location.reload()
}
</script>
</asp:button>
</div>
the refresh button is nowhere can be found. Are there anything wrong with my code? I am new to MVC, please give me suggestions.
Why are you using asp controls in an MVC project -> use an HTML element.
Use a Form
<div>
#using (Html.BeginForm("Action", "Controller", FormMethod.Post))
{
<button type="submit">Submit</button>
}
</div>
Use a Button
<div>
<button onclick="DoSomeJavascript" >Submit</button>
</div>
MVC uses Controllers (Code Behind) and Views (Html) to create pages. To send data to or from a page you need to use View Models.
Maybe have a look at this handy guide: http://www.asp.net/mvc/overview/getting-started/introduction/getting-started
Your question states that you are new to MVC, yet you are trying to define a button from classic ASP.NET, which will not be processed by the Razor view engine used by MVC. Since you are just reloading the page you can do this with regular HTML buttons and Javascript. I'm not reloading the page here in this snippet, but that's irrelevant.
<div style="border-style:solid; border-width:1px; padding: 5px; background-color:#ffffcc">
<button id="refresh" onclick="reloadPage()">
Refresh Page
<script type="text/javascript">
function reloadPage() {
console.log("Reloaded")
//Reload page here
}
</script>
</button>
</div>
If you run this and click you should see the log message in your Javascript console.
I am facing a strange issue. I am trying to receive the contents of another file on main page using jquery UI tab ajax method.
jQuery( "#tabs" ).tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.error(function() {
ui.panel.html(
"Error message." );
});
}
});
and
<div id="tabs" class="jquery_tabs">
<ul>
<li>First Option</li>
<li>Second Option</li>
<li>Third Option</li>
</ul>
<div id="div1">
contents of tab2
</div>
<div id="div2">
contents of tab3
</div>
</div>
as you can see I am calling abc.php on first tab. It contains a form and some validation javascripts.
This works fine on Google Chrome and javascripts of abc.php works without any issue on main page.
The problem comes when I use firefox, javascript of remote file (abc.php) does not work but if I use alert() on the main page from where I am calling abc.php, javascript of abc.php works
I think I found the answer myself. I was using jQuery(document).ready(function(){ to execute Javascripts on both main page and abc.php.
Just removing the jQuery(document).ready(function(){ event from abc.php did the wonder and now It seems working on both Firefox and Chrome.
I have a form inside an iframe which is inside a jQuery UI dialog box. The form contains a file input type. The jQuery UI dialog contains an Upload button. When this button is clicked, I would like to programmatically call the submit method. My question is how I could select the form which is in a iframe using jQuery. The following code should clarify the picture:
<div id="upload_file_picker_dlg" title="Upload file">
<iframe id="upload_file_iframe" src="/frame_src_url" frameborder=0 width=100% scrolling=no></iframe>
</div>
frame_src_url contains:
<form action="/UploadTaxTable" enctype="multipart/form-data" method="post" id="upload-form">
<p>Select a file to be uploaded:</p>
<p>
<input type="file" name="datafile" size="60">
</p>
The jQueryUI dialog box javascript code:
$('#upload_file_picker_dlg').dialog({
...
buttons: {
'Close': function() {
$(this).dialog('close');
},
'Upload': function() {
$('#upload-form').submit(); //question is related to this line
$(this).dialog('close');
}
},
....
});
From the javascript code snippet above, how can I select the form with id upload-form that is in the iframe whose id is upload_file_iframe ?
Accessing an element inside an iframe is tricky.
You should use the following syntax:
$('#iframeID').contents().find('#upload-form').submit();
where 'iframeID' is obviously an ID you've given to the iframe.
Hope it is correct!
The answer is:
$('#upload_file_iframe').contents().find('#upload-form').submit();
which I learned from http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
Off the top of my head I'd say you might have to add the logic to the file where the iframe source is from.