I have installed FluentBootstrap v3.3.5 and Bootstrap v3.3.5 in my project, but this in this View, Html.Bootstrap() gives me a compilation error:
#using FluentBootstrap;
<h2>Test</h2>
<div>
<hr />
#using (var form = Html.Bootstrap().Form().Begin())
{
using (var inputGroup = form.InputGroup().Begin())
{
#inputGroup.InputGroupAddon("#")
#inputGroup.Input().SetPlaceholder("Username")
}
<br />
using (var inputGroup = form.InputGroup().Begin())
{
#inputGroup.Input()
#inputGroup.InputGroupAddon(".00")
}
<br />
using (var inputGroup = form.InputGroup().Begin())
{
#inputGroup.InputGroupAddon("$")
#inputGroup.Input()
#inputGroup.InputGroupAddon(".00")
}
}
</div>
I have also included FluentBootrap in the namespace section of the ~/Views/web.config.
What am I missing?
A bit of a necro-post I know but for those who also have this question:
You'll need to install FluentBootstrap.Mvc as well which has the Html helpers for Asp.Net MVC
If you include 3rd party libraries in your project that contain HTML helpers, you typically have to compile first before Visual Studio will recognize them. Until you compile, intellisense will show this error.
Unload/reload your project. VS will ask you to install 3rd party librairy after reload.
Related
I am learning Meteor and I created a test app and added accounts-ui and accounts-password packages, then I inserted {{>loginButtons}} into main.html. However all I got on the page was an empty . I didn't see any errors in the console either. Is the widget broken, or am I missing something? In all tutorials I saw it was just working with no other action required, so I'm confused. I am using Blaze. Also, is Meteor a good choice of framework for building a social media app, or should I use something else?
I installed older version (14.22.1) of node.js as it's what Meteor recommends, I also installed accounts-google package instead of accounts-password to see if that one works, and it worked fine.
Main.js and Main.html
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { Accounts } from 'meteor/accounts-base';
import './main.html';
Template.hello.onCreated(function helloOnCreated() {
// counter starts at 0
this.counter = new ReactiveVar(0);
});
Template.hello.helpers({
counter() {
return Template.instance().counter.get();
},
});
Template.hello.events({
'click button'(event, instance) {
// increment the counter when button is clicked
instance.counter.set(instance.counter.get() + 1);
},
});
Accounts.ui.config({
passwordSignupFields: 'USERNAME_AND_OPTIONAL_EMAIL'
});
<head>
<title>Test</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
<nav class="main-nav">
<a>Test Link 1</a>
<a>Test Link 2</a>
<a>Test Link 3</a>
{{> loginButtons}}
<a>Test Link 4</a>
</nav>
{{> hello}}
{{> info}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
<template name="info">
<h2>Learn Meteor!</h2>
<ul>
<li>Do the Tutorial</li>
<li>Follow the Guide</li>
<li>Read the Docs</li>
<li>Discussions</li>
</ul>
</template>
I've duplicated the search box webpart so i can make changes. I'm trying to add a localization string to the placeholder attribute.
This isn't working:
<cms:CMSTextBox ID="txtWord" runat="server" EnableViewState="false" MaxLength="1000"
ProcessMacroSecurity="false" placeholder="<%= CMS.Helpers.ResHelper.GetString("kff.Search--PlaceHolderCopy")%>" />
nor does this:
<cms:CMSTextBox ID="txtWord" runat="server" EnableViewState="false" MaxLength="1000"
ProcessMacroSecurity="false" placeholder='<%= CMS.Helpers.ResHelper.GetString("kff.Search--PlaceHolderCopy")%>' />
I have a JS Snippet that does work, but i'm hoping to avoid copy in JS files.
var $searchField = $('.searchTextbox');
if ($('body').hasClass('ENCA')) {
// search field placeholder copy
$searchField.attr('placeholder', 'Search For Stuff');
}
else {
$searchField.attr('placeholder', 'Recherche');
}
Can I add the localization string to the server tag, or should it be done in the code behind. I'm not sure the best location in the code behind for this either, I can't see a Page_Load block.
You could add the following line in the SetupControl method in the codebehind:
txtWord.Attributes.Add("placeholder", ResHelper.GetString("kff.Search--PlaceHolderCopy"));
You cannot really use the <%= syntax to set properties of server-side controls.
Also, please note that the CMSTextBox control has a WatermarkText property, which might be what you are looking for. It uses the TextBoxWatermarkExtender control from the AjaxControlToolkit library.
There is no need to duplicate the webpart and have duplicate code just for something this simple. Just create a different webpart layout for that webpart and add the following code above the Panel:
<script runat="server">
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
txtWord.Attributes.Add("placeholder", ResHelper.GetString("yourstring"));
}
</script>
this is the code to read the complete path with name of all files (images) from the folder inside the project
#{ string[] imgfiles = Directory.GetFiles(#"D:\MVClearningProjects\Demo\Demo\Property_Data\Images\" + item.Property_ID, "*.*");}
this code is to load the first image to cshtml view file
<img src="#Url.Content(imgfiles[0])" alt="carousel bootstrap first" readonly style="width:200px; height:120px;" />
//not allowed local resources when I run this project usig ISS
Like the error message is telling you, you are not allowed to do that. Due to security reasons, most browsers simply will not allow the use of file://. You need to host it with your application and load it from the web server.
Have a look at this great SO answer for an explanation and proposed solution to the problem.
This error was due to using the .physical path instead of virtual in following code
#{ string[] imgfiles = Directory.GetFiles(#"D:\MVClearningProjects\Demo\Demo\Property_Data\Images\" + item.Property_ID, "*.*");}
<img src="#Url.Content(imgfiles[0])" alt="carousel bootstrap first" readonly style="width:200px; height:120px;" />
I fixed it by replacing the physical path with virtual
#{ string[] imgfiles = Directory.GetFiles(#"D:\MVClearningProjects\Demo\Demo\Property_Data\Images\" + item.Property_ID, "*.*");
for (int i = 0; i < imgfiles.Length; i++)
{//converting physical address into virtual
imgfiles[i]= imgfiles[i].Replace(#"D:\MVClearningProjects\Demo\Demo", "~").Replace(#"\", "/");
}
}
<img src="#Url.Content(imgfiles[0])" alt="carousel bootstrap first" readonly style="width:200px; height:120px;" />
my scenario:
I am finally getting around to creating my own blog, and I am trying to learn as much as possible with regards to MVC while doing so. I am trying to display my tags as a custom declarative helper in my "PostView.cshtml" file but my problem is that it isn't in the current context and I don't know how to make it so.
I have had a look at the following 2 questions on SO:
this one is for previous version of MVC (<= 4) and
this one was answered by the guy who asked the question and isn't very explanatory.
I tried the above advice but with no success, hopefully someone can help me out. Here is my code:
Tags.cshtml (in ~/Views/Helpers/):
#helper Tags(System.Web.Mvc.HtmlHelper htmlHelper,
ICollection<MyNamespace.Objects.Tag> tags)
{
foreach (var tag in tags)
{
<div class="tags-div">
#MyNamespace.Extensions.ActionLinkExtensions.TagLink(htmlHelper, tag):
</div>
}
}
ActionLinkExtensions.cs (in ~/Extensions/ActionLinkExtensions/)
namespace MyNamespace.Extensions
{
public static class ActionLinkExtensions
{
public static MvcHtmlString TagLink(this HtmlHelper helper, Tag tag)
{
return helper.ActionLink("", ""); //logic removed for simplicity
}
}
}
PostView.cshtml (in ~/Views/Shared/) //where i want to use my custom helper:
#model MyNamespace.Objects.Post
<!--extra html removed for simplicity-->
<div>
<span>Tags:</span>#Tags(Html, Model.Tags) // '#Tags' doesn't exist in current context
</div>
I also tried adding namespaces to '~/Views/web.config':
<pages pageBaseType="System.Web.Mvc.WebViewPage">
<namespaces>
<add namespace="System.Web.Mvc" />
<add namespace="System.Web.Mvc.Ajax" />
<add namespace="System.Web.Mvc.Html" />
<add namespace="System.Web.Optimization"/>
<add namespace="System.Web.Routing" />
<add namespace="MyNamespace" />
<add namespace="MyNamespace.Extensions" />
</namespaces>
</pages>
My "full name" for my "Tag.cs" class is MyNamespace.Objects.Tag and "Post".cs" is MyNamespace.Objects.Post.
Any explanations and advice with an answer would be greatly appreciated too, thank you very much in advance.
I decided to try use MVC3 way, I added the App_Code folder manually and followed steps from this great article.
And it worked, I needed to restart Visual Studio for my Intellisense to work (which prolonged finding my solution).
I deleted the folder '~/Views/Shared/'
I Added a file MyHelpers.cshtml into the App_Code folder, inside the file I added my helper method:
#helper Tags(System.Web.Mvc.HtmlHelper htmlHelper,
ICollection<MyNamespace.Objects.Tag> tags)
{
foreach (var tag in tags)
{
<div class="tags-div">
#MyNamespace.Extensions.ActionLinkExtensions.TagLink(htmlHelper, tag)
</div>
}
}
And called it in my PostView.cshtml like so:
#MyHelpers.Tags(Html, Model.Tags)
And Viola works as expected... hopefully this helps someone else who ends up in this situation...
I believe the better and simpler way would be to define a display template for you Tags collection that would be placed in ~Views/Shared/DisplayTemplates:
#model ICollection<MyNamespace.Objects.Tag>
foreach (var tag in Model)
{
<div class="tags-div">
#MyNamespace.Extensions.ActionLinkExtensions.TagLink(htmlHelper, tag)
</div>
}
In your PostView.cshtml you would then just write:
#Html.DisplayFor(model => model.Tags)
Problem: Trying out a simple demo for a custom tabgroup in Titanium Alloy. However, the compiler keeps failing with the message Could not find module: common. What I thought would be a straightforward test is anything but.
Titanium SDK: 3.1.3.GA
OS: iOS 7.x
controllers/index.js
var common = require('common');
function tabGroupClicked(e) {
common.tabGroupClicked(e);
}
Alloy.Globals.parent = $;
Alloy.Globals.tabGroup = $.tabGroup;
Alloy.Globals.selectedTab = $.tab1;
$.index.open();
controllers/common.js
exports.tabGroupClicked = function(e){
if (Alloy.Globals.selectedTab !== e.source){
// reset the selected tab
Alloy.Globals.previousTab = Alloy.Globals.selectedTab;
Alloy.Globals.selectedTab = e.source;
// change the selected flag
Alloy.Globals.previousTab.selected = false;
Alloy.Globals.selectedTab.selected = true;
// change the background image
Alloy.Globals.previousTab.backgroundImage = Alloy.Globals.previousTab.disabledImage;
Alloy.Globals.selectedTab.backgroundImage = Alloy.Globals.selectedTab.selectedImage;
// swapping the zindexes of the childTabs
Alloy.Globals.parent.getView(Alloy.Globals.previousTab.childTab).getView().zIndex=2;
Alloy.Globals.parent.getView(Alloy.Globals.selectedTab.childTab).getView().zIndex=3;
}
};
index.xml
<Alloy>
<Window id="index" class="container">
<View id="tabGroupWindow" zIndex="0" class="container">
<Require src="tabThreeView" id="tabThreeView"/>
<Require src="tabTwoView" id="tabTwoView"/>
<Require src="tabOneView" id="tabOneView" />
</View>
<!-- Custom tab group -->
<View id="tabGroup">
<View id="tab1" onClick="tabGroupClicked"></View>
<View id="tab2" onClick="tabGroupClicked"></View>
<View id="tab3" onClick="tabGroupClicked"></View>
</View>
</Window>
</Alloy>
Can anyone see anything that I'm obviously overlooking? I've cleaned the project, restarted Studio, scoured forums for any reference to this issue. Not finding a reference usually means I forgot some basic detail.
Your help is appreciated.
To use the require function, you have to create a service.
So the common.js module as you nammed it, has to be under this folder : app/lib. If it's not in the lib folder, it will not be recognized, and it will not be required.
You can find more help in this page.