challenges in upgrading Bootstrap Themed ASP MVC site, how to upgrade bootstrap + keep previous CSS / #Helper / Transpiler - asp.net-mvc

I've built an ASP MVC site and used bootstrap, Jquery, knockout and signalR, and inherited a mix of 3rd party MVC code integrated with controls like syncfusion. (I don't have a choice in this matter, company decision)
After coding the HTML helpers in the views,
I manually applied all the bootstrap styles took sometime and got it
to work. Now, with upgrade/changes to bootstrap (RC 3.1) I am finding
myself back to square one, hunting through the code and replacing it manually, lots of
changes. Can you please share a better way to transpile/emit/bind the
bootstrap CSS classes into the helpers (i.e. in an independent way of the
technology helper, whether its ASP HTML MVC helper, Syncfusion HTML
MVC helper, Rad or FluentBootStrap)
Please provide a solution/recommendation to apply bootstrap CSS to ASP MVC pages
That's easy to separate and maintain and CSS upgrade's Programmtically
or globally configurable/settable/applicable
I've been thinking extension classes might be a good option, but not sure how I can achieve this, if you've can show me how to get the custom bootstrap CSS bound so I can programatically apply it or globally,
Is there a transpiler or Razor Declaritve Helper (I know about the nuget package, I tried applying it, and it turned out to be more of a template, than declarative extension binding, and I couldnt use it with other libraries Syncfusion or DevExpress)
or some other way, I would greatly appreciate it.
Here is an example of what I do currently, with the Syncfusion library
#Html.Syncfusion().Menu("myMenu").AutoFormat((Skins)ViewData["Themes"]) - performance hog
or better option 2 below
http://mvc.syncfusion.com/demos/ui/tools/Menu/Appearance
#(Html.Syncfusion().Button("btnNormal")
.Text("Save")
.Width(100)
.Height(50)
.ContentType(ContentTypes.TextAndImage)
.ImageUrl(Url.Content("~/Content/Images/Button/icon_save.png"))
.CustomCSS("CustomCss_Button") )
-> I changed/upgraded manually to BootStrap RC 3.1, I changed this last part to the bootstrap
.CustomCSS("btn-default dropdown-toggle btn-primary"))

Not sure this would be helpful to you, but check out TwitterBootstrapMVC. Right now it supports v2.* of TwitterBootstrap, but the support for v3.* is being built.

Our answer is from the experience we are going through. Here is what we found,
currently, The twitter bootstrap MVC is your best option IMHO, we are moving everything to it and its free! Its probably better the broiler plate option.
The 3.0 upgrade is a big question for us as well, so this is
something Dmitry can clarify.
Also, auto creating type safe bootstrap HTML views/sections for models is another question.
In addition you will face challenges with custom controls, we have a OLAP BI client, which looks / or doesn't not have the same consistent look. Dmitry can you answer how to resolve this with twitterbootmvc
Dmitry, will the twitterbootstrap upgrade, auto upgrade to the 3.0 bootstrap or do we have do anything manually?

I just discovered that in visual studio you can for the precompile of RAZOR into HTML.
Can you add that as an option to fluent

Related

Angular 4 ng-controllers

I am building an Asp.net website with Angular 4 and bootstrap. Being a .net developer, I would like to have all the html in the .cshtml files. Earlier I have used Angular 1.0 version and we use the ng-controller and all the services call will be made from there. Trying to find documentation on using controllers but couldn't find any? Do we have ng-controllers in Angular 4? If not whats the best alternative. Also I dont want to use "TemplateUrl" in the component to render the cshtml content. In few cases, cshtml will have dynamic content and don't want an additional http request made.
Thanks in advance.
Thats right what Usman told you. At Angular 2/4 your App structure is completly new. You got a Template which is controlled by the #Component, where is linked with the attribute: 'template: "Page.html"'. There is also the templateURL Which is also an attribute of #Component. Use this if you want to specify your templateURL in your Typescript File. And another thing: Your Scope has changed a bit so think about it if you try to call javascript code in your template.
hope it helped.
There is no ng-controllers in Angular 2/4. You have components (kind of, but not exactly, controllers in AngularJs). There is no clean way of using server side views with Angular 2/4 unless you want to use server side rendering of Javascript using nodejs.
Have a look at this post https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/
This is based on Microsoft's JavaScript services library which does server side compilation for cshtml files. Steve Sanderson has a nice post (though a bit older now) about setting up Angular with ASP.NET
hope this helps.

Does MVCContrib support MVC4?

Does MVCContrib support MVC4? I am trying to use it in my project. Can any one help me with an example?
Does MVCContrib support MVC4?
No.
The documentation mentions support for the script and style bundling of MVC4. Other discussions on codeplex indicate that T4MVC in MVC4 is working for people.
https://t4mvc.codeplex.com/documentation
Support for MVC's script and style bundles
Starting from MVC4, one can define "bundles" of scripts and
stylesheets which are automatically combined and minified. However,
magic strings are used to define the resource URLs. To eliminate them,
follow steps 1 to 3 below.
It appears full support for this is still being added. But the features that worked in MVC2 I know still worked in MVC3 because I used them in MVC3; but the documentation does not explicitly say it works with MVC3. I suspect that every feature in MVC4 that was part of MVC3 still works in MVC4.
Here is the reference discussion for bundling:
http://t4mvc.codeplex.com/discussions/399205
T4MVC is still better than relying on magic strings to reference controller actions and view names. In my opinion the next version of MVC just needs to include T4MVC in the base feature set. Until that happens I'll continue to use T4MVC.

Design Surface in ASP.Net MVC

Are there any recommendations for a design surface (or design tool) that could be used by a designer (the dude/dudette with the black turtleneck) in the process of building an ASP.Net MVC application?
Such that once there is agreement on the structure of the Model, and the interactions required by the app, then the designer goes away and builds out the UI (V in MVC) using this design tool, while the developer goes away and builds out the code (M&C in MVC) using Visual Studio.
As I understand it now, this designer person would also need to use Visual Studio and build the Views using Razor (or other view engine) syntax, instead of having the ability to build the Views using a design surface with drag-drop layout and property settings and the like.
I think you could ask them to give you a harcoded HTML for each view... then, you replace the harcoded data once you place it in Razor.
That is the beauty of Razor... it is very easy to pass from fixed HTML to a razor view.
Razor requires programming, and creating views is not an arbitrary task. I'd let the designer work in whatever program they like where they can excel about design and let the programmers worry about how best to create the views and programming in Razor (which is really just C#/VB with some extra syntax).
It depends.. what kind of skills does your designer have? Are they a true designer (no JS/jQuery/etc knowledge.. they live & breath PSDs) or are they a designer/front end engineer (they know js/jQuery, the diff. between IE7 and IE9 from a rendering pov).
If you've got a true designer then the best thing to get would be HTML. A PSD would be okay as well but if they can convert their design into HTML they've done a lot of the hard work for you (unless you love figuring out floats and margins and all that jazz). That said if you're using something like Twitter Bootstrap or Blueprint CSS then they would obviously have to know how to use that as well.
If you're lucky enough to have a designer/front end engineer then it's well worth your time to teach them some basic razor synax like #Url.Action and #Html.BeginForm. They can tell you the actions they need and you can work together by giving them a fake data/response version first which they can use while you create a real version. And in this case they can either use Visual Studio OR you can set it up so that they have your site hosted via IIS on their machine and they just use your source control to get latest which automatically gets placed in the right directory. Then they can just continue working in whatever editor they prefer as they should only be working in html which will get updated live. That said if you're using ASP.Net MVC 4 bundling you'll have to decide how to maintain bundles.

Using ASP.NET MVC 3 **WITHOUT** jQuery

I need to write an application in ASP.NET MVC, but for corporate reasons I can't use jQuery. I have heard that you can "turn off" jQuery and that ASP.NET controls like TextBoxFor will fall back to using Microsoft's older JS libraries. But I haven't found any detailed information on how to do this.
Anyone have experience with this approach? Any pointers?
ASP.NET MVC does not require jQuery. The MVC3 project templates include it in _Layout.cshtml because many developers prefer it. You can remove it.
It does use jQuery Validation by default, however, but you can use the Microsoft Ajax MVC2 libraries instead.
If you remove jQuery scripts, you will be unable to use the jQuery/Unobtrusive MVC 3 validation.
Use the MS scripts and corresponding validation functionality instead:
_Layout.cshtml:
"~/Scripts/MicrosoftAjax.js"
"~/Scripts/MicrosoftMvcValidation.js"
That’s all.
By the way, why cannot you use the jQuery in your project?
It's all down to the adapters that you decide to include from the default script folders. If you don't want to use Jquery include the other adapter files.

ASP.NET MVC View/Site Design

This stems from my question that i started at MVC Beginner Question
Im now confident in developing a MVC website from the MVC side of things.
My fatal floor now is the UI level designing. i.e. designing views and master pages including css styling.
Just wanting to get any advice on where i should start? Im currently about to look at the expression studio to see if that will help.
I need to get up and running in this quickly so that it doesnt hold back the development of the website.
Thanks in advance
I would look at a CSS grid-framework like 960 Grid System or Blueprint.
There is often controversy from CSS/Markup purists as to whether the use of such frameworks is valid, but they often overlook that not everyone is a CSS expert. I have found that the use of these frameworks has saved me hours of productivity since my CSS skills (as a programmer) are not that great.
As far as using Expression, I tend to use this as a "test-bed" with simple HTML files. The Designer and CSS Style support seem to be more interactive than that which Visual Studio supports, so for quick mock-ups -- Expression, then move that HTML/CSS over to VS as soon as possible.
One other priceless tool to use while designing is the add-on "Firebug" for Firefox ... it allows you to inspect single elements on your page, the CSS properties affecting that element - it even allows you to change CSS attributes "on-the-fly" to immediately see the ramificatiions. This tool has saved me HOURS!
Consider finding a suitable theme in a free open source template.
Consider something that suits at http://www.freecsstemplates.org/.

Resources