Zero2Cool
  • Posts: 1082
  • Joined: 26/04/2011
I installed Visual Studio 2013 and noticed it comes with a Bootstrap template. This has me wondering, would it be a similar process to integrate YAF into it like we have with the YAF Sample Application? I'm hoping to get some time to play around with it and find out, but thought maybe someone here would know off hand.
Sponsor
tha_watcha
  • Posts: 4114
  • Joined: 06/03/2010
Originally Posted by: Zero2Cool

I installed Visual Studio 2013 and noticed it comes with a Bootstrap template. This has me wondering, would it be a similar process to integrate YAF into it like we have with the YAF Sample Application? I'm hoping to get some time to play around with it and find out, but thought maybe someone here would know off hand.



Yes the process would be almost the same, the sample web application is based on the VS 2010 Template. The Basic steps to integrate are described in the Wiki article. But they Might be some adjustments you need to make for example making sure that jquery file is not loaded twice by the app and yaf.

By the way the new yaf site is also based on the sample web application.:-d
UserPostedImage
Zero2Cool
  • Posts: 1082
  • Joined: 26/04/2011
I got a test site up http://packerpeople.com/  but the jquery being loaded twice issue you indicated I think is causing the shoutbox to not work normal and the relative time also is not working. But it wasn't much different to get it going.
tha_watcha
  • Posts: 4114
  • Joined: 06/03/2010
Quote:

Edit, I like that the new VS2013 ASP.NET templates are extension-less.



Yaf site too, now


Originally Posted by: Zero2Cool

I got a test site up http://packerpeople.com/  but the jquery being loaded twice issue you indicated I think is causing the shoutbox to not work normal and the relative time also is not working. But it wasn't much different to get it going.



This is easy to fix, i guess the jquery is loaded in the master page?

<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>


So load it only when needed, like i do inside the head tags (Site.Master) add a contentplaceholder like

<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>

and in each page you need to put the

script tag

<asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContentHolder">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
</asp:Content>


UserPostedImage
Zero2Cool
  • Posts: 1082
  • Joined: 26/04/2011
I removed this line and now the shoutbox is working as is the relative time too!! WOohooo
<asp:ScriptReference Name="jquery" /> 



Here's what the Site.Master file looks like with the template I'm using with Visual Studio 2013.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="New_PH.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container"> 
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/"><img src="logo.png" width="25" />   PackersHome.com</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                        <li><a runat="server" href="~/Forum/">Forum</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/forum/rules">Register</a></li>
                                <li><a runat="server" href="~/forum/login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/forum/cp_profile" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>
    </form>
</body>
</html>
Zero2Cool
  • Posts: 1082
  • Joined: 26/04/2011
Took me a bit, but finally figured out how to get the dropdown menu's to work AND continue to have YAF work with the VS2013 template.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MyPicks.aspx.cs" Inherits="BS.PackersHome.MyPicks" %>
 
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>


</asp:Content>   

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    

</asp:Content>


<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="BS.PackersHome.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PackersHome <%: Page.Title %></title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
     <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">

        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <%--<asp:ScriptReference Name="jquery" />--%>
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>
       

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">(beta) PackersHome</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="/Forum">Forum</a></li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Packers<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/Headlines">Headlines</a></li>
                                <li><a href="/Roster">Roster</a></li>
                                <li><a href="/Draft">Draft</a></li>
                                <li><a href="/Blog">Blog</a></li>
                                <li><a href="/Links">Links</a></li>
                            </ul>
                        </li>

   <%--                     <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Member Menu <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/forum/cp_pm">Inbox</a></li>
                                <li><a href="/forum/cp_profile">Profile</a></li>
                                <li><a href="/forum/mytopics">Topics</a></li>
                            </ul>
                        </li>--%>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">NFL Picks<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/Leaderboard">Leaderboard</a></li>
                                <li><a href="/MyPicks">My Picks</a></li>
                            </ul>
                        </li>

                        <li><a href="/Chat">Chat</a></li>
                        <li><a href="/top10">Top 10</a></li>
                        <li><a href="/trophies">Trophies</a></li>
                    </ul>

                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/forum/rules">Register</a></li>
                                <li><a runat="server" href="~/forum/login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/forum/cp_profile" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %>!</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>

        <div class="container body-content">
 

            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>Copyright © 2006-<%: DateTime.Now.Year %> PackersHome.com™. All Rights Reserved.</p>
            </footer>
        </div>
    </form>
</body>
</html>



Zero2Cool
  • Posts: 1082
  • Joined: 26/04/2011
Edit, I had a padding issue, but it appears self inflicted as evidenced by reverting back to the standard CSS files. 🙂
Zero2Cool
  • Posts: 1082
  • Joined: 26/04/2011
Got our Bootstrap YAF portal site up and running! Big thanks to Ingo for helping with the URL rewrite issue for the ShoutBox FlyOut!

The only hangup so far is the spell check doesn't seem to work. Anyone else having spell check issues with the GreyGrey theme and the YAF standard bbcode editor?
tha_watcha
  • Posts: 4114
  • Joined: 06/03/2010
Originally Posted by: Zero2Cool

Got our Bootstrap YAF portal site up and running! Big thanks to Ingo for helping with the URL rewrite issue for the ShoutBox FlyOut!

The only hangup so far is the spell check doesn't seem to work. Anyone else having spell check issues with the GreyGrey theme and the YAF standard bbcode editor?



That button will be removed in YAF 2.2.0. Google closed the Spell check api.
UserPostedImage
tha_watcha
  • Posts: 4114
  • Joined: 06/03/2010
Originally Posted by: Zero2Cool

Originally Posted by: tha_watcha

That button will be removed in YAF 2.2.0. Google closed the Spell check api.



Oh, no I wasn't talking about the button. Right now in a Post Reply and in Quick Reply, if a word was spelled incorrectly, it would get the red squigly underline. That is no longer happening.

Hmm, just noticed that this site now does not have the red squigly underline either, but I thought it did when I made that post you replied to.



The codemirror editor does not support the built browser based spell check solution, i guess i have to build a custom solution.
UserPostedImage
tha_watcha
  • Posts: 4114
  • Joined: 06/03/2010
Originally Posted by: Zero2Cool

Originally Posted by: tha_watcha

The codemirror editor does not support the built browser based spell check solution, i guess i have to build a custom solution.



The CodeMirror Editor? This is a different field area than before, which is why we now have line numbers? Sorry if that's a stupid question, I just noticed it was different when I upgraded and coincidently that's when the spellcheck went away. However, I did see the spell check red squigly on this site with this editor. Maybe something was in Cache?


Yes that editor is new for the standard BB Code Editor and the Source Area of the CKEditor. At least in chrome the spell check is not working for me.
UserPostedImage
Zero2Cool
  • Posts: 1082
  • Joined: 26/04/2011
Would this be what you need to add spell check to codemirror?

http://stackoverflow.com...irror-with-spell-checker 
Users browsing this topic
    Forum Jump  
    • You cannot post new topics in this forum.
    • You cannot reply to topics in this forum.
    • You cannot delete your posts in this forum.
    • You cannot edit your posts in this forum.
    • You cannot create polls in this forum.
    • You cannot vote in polls in this forum.

    About Us

    The YAF.NET is an open source .NET forum project. YAF.NET is supported by an team of international developers who are build community by building community software.

    Powered by Resharper Donate with PayPal button

    Project Twitter Updates

    Copyright © YetAnotherForum.NET & Ingo Herbote. All rights reserved