I'm setting up my first ever ASP.NET MVC server and teaching myself how to use it for a particular project I'm working on.
I have a couple of controller "endpoints" set up and working wonderfully for HTTP POST requests but, as a "tangential" part of this project, I would like to have the controller serve up a page with a file upload form.
Specifically, I'd really like to use the Vue File Agent, preferably implemented using the CDN distribution method because I'd rather not install additional components on the server for this one little thing if I can get away with it.
I'm not new to ASP.NET, HTML, or CSS (and even limited JavaScript), but I am unfamiliar with using ASP.NET MVC controllers and views to serve page(s). As stated, I've figured out how to use the controllers to handle the POST requests I'm generating from other systems.
Also, I have a "basic" understanding of how the view works and I've got the controller serving up an HTML file. However, when I try to include the Vue File Agent component via the CDN, I'm not getting anything.
I've tried a variety of different Vue File Agent samples just to get something on the page, including the Gmail Inspired Demo on CodePen, but I must be missing something because I can't get the actual "sample" to show up and it seems to be totally ignoring all of the CSS styling.
In my controller, I have this:
Function Index() As ActionResult
Return View()
End Function
And my Index.vbhtml file looks like this:
#Code
Layout = Nothing
End Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Insurance Submission Form</title>
<link rel="stylesheet" href="https://unpkg.com/vue-file-agent#latest/dist/vue-file-agent.css" />
<script src="https://unpkg.com/vue-file-agent#latest/dist/vue-file-agent.umd.js"></script>
<style>
.vfa-demo {
position: relative;
}
.vfa-demo .file-preview-wrapper::before {
background: transparent;
}
.vfa-demo .file-row {
position: relative;
z-index: 15;
line-height: 24px;
text-align: left;
background: #EEE;
margin-bottom: 5px;
padding: 2px 5px;
}
.vfa-demo .remove {
float: right;
margin-top: -3px;
}
.vfa-demo .progress {
float: right;
width: 85px;
height: 10px;
margin-top: 7px;
margin-right: 10px;
background: #FFF;
border: 1px solid #AAA;
}
.vfa-demo .progress.completed {
display: none;
}
.vfa-demo .drop-help-text {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 2px;
background: rgba(255, 255, 255, 0.75);
z-index: 1200;
font-size: 32px;
font-weight: bold;
color: #888;
align-items: center;
justify-content: center;
display: none;
}
.vfa-demo .is-drag-over .drop-help-text {
display: flex;
}
.vfa-demo .upload-block {
border: 2px dashed transparent;
padding: 20px;
padding-top: 0;
}
.vfa-demo .is-drag-over.upload-block {
border-color: #AAA;
}
.vfa-demo .vue-file-agent {
border: 0 !important;
box-shadow: none !important;
}
</style>
</head>
<body>
<script type="text/x-template" id="vue-file-agent-demo">
<div class="vfa-demo bg-light pt-3">
<VueFileAgent class="upload-block"
ref="vfaDemoRef"
:uploadUrl="'https://www.mocky.io/v2/5d4fb20b3000005c111099e3'"
:uploadHeaders="{}"
:multiple="true"
:deletable="true"
:theme="'list'"
:maxSize="'25MB'"
:errorText="{
size: 'This file is too large to be attached',
}"
v-model="fileRecords">
<template v-slot:before-outer>
<p>Email Attachment example with drag & drop support and <span class="badge">attachment</span> keyword basic detection.</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Your Name" value="John Doe">
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Email address" value="johndoe#example.com">
</div>
<div class="form-group">
<textarea v-model="message" class="form-control" placeholder="Your Message"></textarea>
</div>
</template>
<template v-slot:file-preview="slotProps">
<div :key="slotProps.index" class="grid-box-item file-row">
<button type="button" class="close remove" aria-label="Remove" v-on:click="removeFileRecord(slotProps.fileRecord)">
<span aria-hidden="true">×</span>
</button>
<div class="progress" :class="{'completed': slotProps.fileRecord.progress() == 100}">
<div class="progress-bar" role="progressbar" :style="{width: slotProps.fileRecord.progress() + '%'}"></div>
</div>
<strong>{{ slotProps.fileRecord.name() }}</strong> <span class="text-muted">({{ slotProps.fileRecord.size() }})</span>
</div>
</template>
<template v-slot:file-preview-new>
<div class="text-left my-3" key="new">
Select files or drag & drop here
</div>
</template>
<!-- <template v-slot:after-inner>
<div class="text-left pt-1">
Select files or drag & drop here
</div>
</template > -->
<template v-slot:after-outer>
<div title="after-outer">
<div class="drop-help-text">
<p>Drop here</p>
</div>
<button type="button" class="btn btn-primary" v-on:click="send()">Send</button>
</div>
</template>
</VueFileAgent>
</div>
</script>
<!-- ----------------------------- -->
<div class="container py-3">
<div id="app">
<h5><a target="_blank" href="https://safrazik.github.io/vue-file-agent">Vue File Agent</a> Playground</h5>
<hr>
<ul class="nav nav-pills mb-2">
<li class="nav-item">
<a target="_blank" class="nav-link" href="https://codepen.io/safrazik/pen/BaBVNEE">1. Preloading Exising Demo</a>
</li>
<li class="nav-item">
<a target="_blank" class="nav-link" href="https://codepen.io/safrazik/pen/BaBpYme">2. Profile Picture Demo</a>
</li>
<li class="nav-item">
<a target="_blank" class="nav-link active" href="https://codepen.io/safrazik/pen/OJLgvya">3. Gmail Inspired Demo</a>
</li>
</ul>
<hr>
<vue-file-agent-demo></vue-file-agent-demo>
</div>
</div>
<script type="text/javascript">
var component = {
data: function () {
return {
fileRecords: [],
message: 'I am sending you the attachments',
}
},
methods: {
removeFileRecord: function (fileRecord) {
return this.$refs.vfaDemoRef.removeFileRecord(fileRecord);
},
send: function () {
if (this.message.indexOf('attachment') !== -1 && this.fileRecords.length < 1) {
if (!confirm('You have mentioned about attachments in your message. Are you sure to send without attachments?')) {
return;
}
}
alert('Message sent!');
}
}
}
component.template = '#vue-file-agent-demo';
Vue.component('vue-file-agent-demo', component);
new Vue({
el: '#app'
});
</script>
</body>
</html>
I tried using various other different upload "templates" I've found with varying degrees of success, but I feel I'm still failing to understand some key concepts of working with ASP.NET MVC controllers and views.
For one thing, in the <template v-slot:file-preview="slotProps"> and <template v-slot:after-outer> blocks of the code above, the CodePen has the <button> elements defined with #click="somefunctionname()".
However, when I publish these, the server returns an error indicating that 'click' is not declared (IntelliSense also reports the same error in the Visual Studio IDE). I found some other examples using Vue that showed what appears to be the same basic functionality written as v-on:click="somefunctionname()", so I tried that (as I have listed above), but I'm still getting nothing.
I'm obviously not understanding how the syntax should be working here, and I'm sure it's "simply" a matter of finding the right documentation, but I'd really like to understand the ASP.NET MVC view a little better and figure this out, not only because I want to get this "pretty" upload working, but because I really want to get a better handle on how to use this technology.
What is it that I'm doing wrong and how can I get this functionality working on my ASP.NET MVC controller? How do I define these # directives in an ASP.NET MVC view without causing the compiler to freak out (I had the same issue with some of these # directives in a CSS <style> block, so it's clearly something I'm going to need to deal with)?
EDIT
So, as I sorta mentioned above, I've been testing by publishing the site to my web server and viewing the site via the public DNS name. Just to see if I would get anything different, I tried running the site from the Visual Studio debugger.
Interestingly, when I did this, the IDE broke with an exception in my _Layout.vbhtml:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required:=False)
Looking at my site's directory structure, there is no ~\bundles\ directory. Digging around a little, I found all of the jQuery and Bootstrap files located in the ~\Scripts\ directory, so I simply removed the two calls to the #Scripts.Render() method (leaving the call to #RenderSection()) and tried again. This time, I didn't get the exception, so I went ahead and published again to test. Unfortunately, I got the same results as what I posted in my screenshot, so that doesn't appear to be the source of my "issue", but I thought I'd mention it here, just in case it helps to point me in the right direction.
As I said at the beginning of my question, this is my first time setting up an ASP.NET MVC server, so I've not done much in the way of customization or modification to the base template from Visual Studio apart from creating a new controller and associated view and adding a couple of things to the web.config / global.asax to handle some of the other functionality I'm implementing. Perhaps there's something I should have done, but I don't really know where to start.
Well, I finally figured out at least part of my problem, and it's because I'm a moron. I stumbled across it when I opened up my browser's "Developer Tools" and drilled down through a few screens. Apparently, I was missing a pretty important piece of the Vue puzzle in my HTML. Once I added this line to my <head> (the "core" Vue library):
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12/dist/vue.js"></script>
I finally got a visible upload box. It's still missing all the nice-looking styling, but at least the control is there now and I can start working with it a little more.
Related
I am trying to use flex box with bootstrap columns so that all the columns are always horizontally centered. The markup mentioned below works fine for firefox, chrome and Android but fails on iOS and safari. I haven't tested IE yet.
HTML:
<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
<div class="col-xs-3 red">Hi</div>
<div class="col-xs-3 blue">Hi</div>
<div class="col-xs-3 blue">Hi</div>
<div class="col-xs-3 blue">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 red">Hi</div>
<div class="col-xs-3 blue">Hi</div>
<div class="col-xs-3 blue">Hi</div>
</div>
CSS:
.row {
display: flex;
display: -webkit-flex;
flex-wrap:wrap;
-webkit-flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
div[class^=col-] {
float: none;
display: inline-block;
vertical-align: top;
}
On Chrome, Firefox and Android
On Safari and iOS
JSFIDDLE
Is there anything that I should be adding to the columns so that they appear in one line.
It's pseudo-element in the .row causing the problem.
This happens because Safari browser treats :before and :after
pseudo-elements as if they were real elements.
Try
.row:before, .row:after{
display: none;
}
or better create a class say, .flex-row and do this
<div class="row flex-row">
{{contents here..}}
</div>
.flex-row{
display: flex;
display: -webkit-flex;
flex-wrap:wrap;
-webkit-flex-wrap: wrap;
-webkit-justify-content: center;
justify-content: center;
}
.flex-row:before, .flex-row:after{
display: none;
}
FIDDLE
If anyone is still lost for a solution, I had an issue where my columns were TALL in Safari:
To solve this, I simply added this CSS selector (I know !important isn't best practice, but I tried several solutions and eventually landed on this):
.d-flex {
display: block !important;
}
Now, my columns looks like this, which is how it originally looked in Chrome, Firefox, etc.:
SOLUTION
I was being an idiot and dynamically adding data-role="content" to the #wrapper element on page load, making it unrecognizable by JQM.
I'm trying to implement a basic menu panel, but I'm having no luck getting it to animate or close.
Below is the basic markup as generated by JQM.
<div data-role="page" data-url="/" tabindex="0" class="ui-page ui-body-c ui-page-panel ui-page-active">
<div id="menu-panel" data-role="panel" data-position="left" data-display="reveal" data-dismissible="true" class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-panel-closed ui-body-c ui-panel-animate">
<div class="ui-panel-inner">
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
<div id="wrapper" data-role="content">
<span class="ui-btn-inner"><span class="ui-btn-text"></span></span>
<!-- Page content -->
</div>
</div>
CSS for #wrapper:
#wrapper {
margin: 0 auto;
min-height: 100%;
padding: 0;
position: relative;
width: 100%;
}
It seems wrong to put redundant data roles in the panel and the button, but all the examples I've looked at, including the official docs, have it that way.
The panel appears, but doesn't make use of the CSS transforms. It also doesn't push the page content over or close on any event.
Creating a jQuery Mobile popup with a header, the default works pretty good (I would like to address that non-round top-left corner some day):
<div data-role="header">
<h1>Useful Header</h1>
</div>
What is the proper way to add a sub-header? By sub-header, I mean text like the header, but smaller, probably with a smallish margin between the header and sub-header.
Google isn't much help, and this naive attempt fails:
<div data-role="header">
<h1>Useful Header</h1>
<h6>Simple Sub-header</h6>
</div>
Here is a way to get the desired layout with CSS:
<div data-role="header">
<h1>Useful Header</h1>
<p class="popup-subheader">Simple Sub-header</p>
</div>
.popup-subheader {
text-align: center;
margin-top: -5px;
margin-bottom: 6px;
font-size: smaller;
font-weight: normal;
}
I try to use paginate with kaminari. My project used bootsrap css, and the result is so ugly:)
The html is generated by nokogiri
<nav class="pagination">
<span class="first">
« First
</span>
<span class="prev">
<a rel="prev" href="/admin/book_borrow/borrow?locale=en">‹ Prev</a>
</span>
<span class="page">
<a rel="prev" href="/admin/book_borrow/borrow?locale=en">1</a>
</span>
<span class="page current">
2
</span>
<span class="page">
<a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">3</a>
</span>
<span class="page">
4
</span>
<span class="next">
<a rel="next" href="/admin/book_borrow/borrow?locale=en&page=3">Next ›</a>
</span>
<span class="last">
Last »
</span>
</nav>
I want something like pagination in bootstrap page, how I can do?
Please help!
After I posted this question I found the solution:
kaminari: A Scope & Engine based, clean, powerful, customizable and sophisticated paginator for Rails 3.
Just go to the console and type:
rails generate kaminari:views bootstrap4
It will download some Haml files to your application, and the views are changed. It also supports bootstrap 2 and 3 e.g
rails generate kaminari:views bootstrap3
Here are some themes for Kaminari views: https://github.com/amatsuda/kaminari_themes
simply add following css to your application.css
.pagination a, .pagination span.current, .pagination span.gap {
float: left;
padding: 0 14px;
line-height: 38px;
text-decoration: none;
background-color: white;
border: 1px solid #DDD;
border-left-width: 0;
}
.pagination {
border-left: 1px solid #ddd;
.first{
padding : 0;
float: none;
border: none;
}
.prev {
padding : 0;
float: none;
border: none;
}
.page{
padding : 0;
float: none;
border: none;
}
.next{
padding : 0;
float: none;
border: none;
}
.last{
padding : 0;
float: none;
border: none;
}
}
rails generate kaminari:views bootstrap4
Available themes: bootstrap2, bootstrap3, bootstrap4, bourbon, bulma, foundation, foundation5, github, google, materialize, purecss, semantic_ui
Nearly gave up until I found "Pagination with Kaminari".
In short, after rails g kaminari:default go into the views that are created under app/views/kaminari and change the tags to suit your styling.
I went into _paginator.html.erb and changed the <nav> to a <div> and replaced all the <span> tags with <li>.
To get the bootstrap styling that fits my app, I changed the <div> tag in _paginator.html.erb to <div class="pagination pull-right"> and the <span class="page"> tags to simple <li>.
There's are a couple of gotcha's that perhaps someone else can help with:
There's erb in _page.html.erb that changes the class for the current page when active. It messes up the alignment so to get around that, change the <%= link_to_unless page.current? ... %> to <%= link_to page ... %>.
The _gap.html.erb view which inserts the "..." block also gets messed up. Replace it with <li><%= link_to '...' %></li> to get it to sit nicely inline.
I just started coding 8 weeks ago so for sure there are better ways to approach this and ways to clean up 1 and 2, but if you just want things to look right and function as intended, give that a shot and fine tune later.
I'm trying to apply this SlickGrid example:
http://mleibman.github.com/SlickGrid/examples/example4-model.html
to my own web project.
When I drop my grid in to the top of my page, it renders correctly. However, when I drop it into a jQuery UI Tabs tab on the same page, the CSS Sprite that renders the search image is incorrectly offset.
The icon is rendered with
<span title="Toggle search panel" class="ui-icon ui-icon-search ui-state-default ui-corner-all" style="float: right;" onclick="toggleFilterRow11()"/>
It looks like jQuery UI Tabs also uses the same CSS classes, and of course a conflict arises.
Looking at the effective styles in IE9, the control outside of jQuery UI Tabs that renders correctly has the following:
The control that renders incorrectly looks like this:
Bottom Line
Placing the SlickGrid in a jQueryUI Tab causes the ui-icon-search class to be lost and therefore the wrong background-position-x/y to be set.
Why is that class being lost and how can I fix the issue?
The problem
When jQueryUI creates tabs from the HTML it adds the jQueryUI CSS classes. From the jQueryUI examples:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
</div>
becomes
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">Nunc tincidunt</li>
<li class="ui-state-default ui-corner-top">Proin dolor</li>
<li class="ui-state-default ui-corner-top">Aenean lacinia</li>
</ul>
<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
<div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>
The problem is happening because the SlickGrid content now exits as a child of an element with the class ui-widget-content. Actually, there are 2 ancestors of the grid header that have that class - in the above code see <div id="tabs"> and <div id="tabs-1"> both have that class applied when tabs are created.
The jQueryUI CSS rules that are supposed to apply to get the correct search icon are:
.ui-icon {
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png);
}
.ui-icon-search {
background-position: -160px -112px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #d3d3d3;
background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555555;
}
The markup for the icon is:
<span style="float:right" class="ui-icon ui-icon-search ui-state-default ui-corner-all" title="Toggle search panel" onclick="toggleFilterRow()"></span>
so therefore the CSS rules .ui-icon, .ui-icon-search and the first match of the 3rd rule .ui-state-default are applied.
However when the same markup exists as a descendent of a element with the class .ui-widget-content, the 2nd part of the 3rd rule above (.ui-widget-content .ui-state-default) also matches which is more specific. See http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg for a Star Wars themed explaination of CSS specificity. Essentially the background property of the 3rd rule that includes background-position:50% 50% is more specific than the single selector .ui-icon-search rule therefore overriding the correct background-position:-160px -112px.
The solution
Need to make the .ui-icon-search rule the same or more specific than the .ui-widget-content .ui-state-default rule which can be done by either:
Adding !important to the rule
Adding more selectors to the rule
For example
.ui-icon-search {
background-position: -160px -112px !important;
}
or
.ui-icon-search, .ui-widget-content .ui-icon-search {
background-position: -160px -112px;
}
I cannot think of a way that doesn't involve changing the jQueryUI CSS (or duplicating the .ui-icon-search rule in your own CSS with one of the two solutions above). I would actually be interested to see if there is another way myself!