I have a web page developed in Catalyst MVC framework. I am using Template Toolkit for my views. I have two tables in one of my web page. I want to hyperlink one table to the other and open the other table (i.e. linked table) in a new tab or in the same page using ajax.
I am very new to Catalyst as well as Template Toolkit. I kindly request you to help me in understanding how do I make it possible? Is it possible to call a template within a template? If so how do I achieve it?
I would be grateful to accept any other suggestions apart from above mentioned.
Template Toolkit and Ajax does not naturally go together. Template Toolkit is a server side technology and Ajax is mix of JavaScript and a web browser API called XMLHttpRequest.
Catalyst can respond to Ajax requests by returning a compiled .tt-template. Template Toolkit does not care about what Catalyst is doing.
The magic is in the mix of Catalyst, Template Toolkit and Ajax. Normally this is done, as in your case, that a link in #table1 subscribes to a JavaScript event that fetches #table2. #table2 can be a Catalyst action (/my_app/tables/2) which stashes data and compiles a .tt-template.
Outside #table1 we have a #table_wrapper.
# jQuery
$('#table1 .next').click(function () {
$('#table_wrapper').load('/my_app/tables/2');
});
Does this make sense to you? I can follow up if you need more input.
Related
In VS 2012, I am attempting to create an MVC 4 web application with jQuery calls to a Web API project. (Other devs will be consuming the API with our current, native app, and probably adding to the API in the future.) So I have one project that is the Web API, and another project that is the MVC 4 website. I can only set one of them to run, and they use localhost:xxxxx.
How do I debug changes to both? For example, let's say I add a new API path /api/customer/get and then a new jQuery ajax call to that path and do something with the resulting JSON. I've changed code in both projects and want to follow it end-to-end; how do I launch both? How do I debug both?
Just to be clear, the MVC app isn't making server-side calls to the API, I'm using MVC mostly to be able to easily use bundling, minification, and (hopefully) pre-compiled Handlebars templates in .NET; the API calls are coming from jQuery. As I am still relatively new to these technologies, alternate suggestions are welcome.
Thank you in advance.
I had the same problem and have found a solution from here:
forums.asp.net
The fix is to do the following:
In your solution file, click properties go to the Startup project node (if it is not already selected)
Next select Multiple startup projects. Select your website and your webservice and in the Action column make sure both of them have "Start" selected.
Now when you debug your website and put a break point in your webservice, it should hit the break point.
Coming late to the party but in case anyone else is looking for a solution, this is what was best for me: Set the Api project up to be the starting project (I needed to limit to one startup so that I could flip between browsers more easily). After firing up the service project, right click on the web/ui project and select debug, start new instance. You'll have both running and you'll seamlessly step from web to api.
I had a similar problem with my web api project. My solution consisted of an angular front end with 2 web api projects on the backend. One web api project handled "authorization" and the other handled "resources". I used the following tutorial by Taiseer Joudeh as a starting point:
http://bitoftech.net/2014/09/24/decouple-owin-authorization-server-resource-server-oauth-2-0-web-api/
Breakpoints worked on the "authorization server"... but not on the "resource server". I compared the packages from the two projects to see what was different. Once I added "Microsoft.AspNet.WebApi.Cors" to the "resource server" project, the breakpoints starting working.
All the examples I've seen, even the "official examples" (spa) all use an MVC project always having a view (index.cshtml) to run a project using angular (2/4).
Angular is a front-end framework that does not need a view (index.cshtml) to fulfill its function, the concept of front-end is to develop everything next to the client without depending on the backend.
Then, because you have to use a server-side view to work the client side.
What would be the best way to work with an application using angular (2/4)? Of course it would be better to use a single solution for all projects, but i see that can't separate the front end with back end.
We started a modular MVC project at the beginning of the as described in this thread.
MVC Ninject: How to add NinJect bindings from an MVC Area project
One thing we've yet to figure out a good solution for is prevent a full page refresh when loading views from different areas.
A brief history, we use different web projects for all our areas. When the projects build, we copy all the files to an Area folder in the main web app project.
The main web app project the header portion of the application contains a menu which allows users to open any plugin.
Right now when a user clicks on a menu item, the menu as well as everything refreshes.
We've been experimenting with partial views in the plugin projects but still getting the page refreshes and most of the time losing css causing page layout problems.
At the very least the _Layout template we use in the main website, we need to find a way to where that doesn't refresh when loading views from any area.
Any ideas would be greatly appreciated.
Thanks
This has been an off and off thing but finally we found something that looks promising without having to resort changing a lot of code to a javascript framework. We use jQuery for UI manipulation but try to keep what we write down for productivity and quality considerations.
Right now we're working with MVC built in ajax helpers so this ability is actually native to the Asp.Net MVC.
Basically, the div which contains #RenderBody, we gave an ID.
Then we define AjaxOptions to replace html in this div. Then we use Ajax.ActionLink.
The beauty of it so far is we define ajaxStart & complete functions which handle a loading div while loading in a single place.
<script>
$(document).ajaxStart(function () {
$("#loading_div").show();
});
$(document).ajaxError(function (result) {
$("#loading_div").hide();
alert('Exception: ' + result);
});
$(document).ajaxComplete(function () {
$("#loading_div").hide();
});
</script>
Then in all our plugin applications, all controllers return partial views. One thing I noticed is, in our plugin projects, in the _ViewStart template, it is important to comment the Layout.
If not we found the more you clicked on links, the more you'd have controller actions running repeated loops.
It's imperative to load the jquery-Unobtrusive-ajax script in layout. We do so in the head.
We have a solution with 41 projects, 7 which are plugin projects. So far watching the dom and network traffic, everything in the initial tests is running nicely.
Edit: so apparently adding class="button" make it work... Can someone provide a reference on what other classes are there? We can't find any information on this.. Thanks
We are making an app in HTML5 using XDK, it has quite a few different views. We were planning to just link to another html page each time we want to go to a different view. But we quickly found out that hyperlinking does not work, is disabled, and button does not link either.
One of the people in my group said she saw an example about having a bunch of and then just show and hide them and use that as UI navigation... is that the only way?
Thanks in advance!
The Intel XDK doesn't insert any class definitions or require that you use a specific framework. It is a tool for assembling an HTML5 hybrid mobile app using the CSS, HTML and JS files that you supply.
If you look at the samples and the default "blank" project that is created when you create a new project you'll see that there may be references to one or more of the following "phantom" JS files:
intelxdk.js
cordova.js
xhr.js
The first two (intelxdk.js and cordova.js) are special "device API" JavaScript libraries. You won't actually find them in your project directory, they are automatically included when you use the emulator and when you build your project (which "wraps up" your HTML5 code and assets into a native wrapper that is specific to the target you are building -- it does not compile anything, it just converts it into a hybrid native/HTML5 container app that can be installed on the target platform that you built for).
The third one is a special helper JS library for dealing with CORS issues from within your app.
None of these three JS files define any classes or HTML tags, etc. They simply implement target-specific device APIs that consist of JavaScript on the "top end" and native code on the "bottom end." Your application only sees and interacts with the JavaScript interface, and only with the APIs that you need to use (which is totally optional).
For an intro to all of this, please see the Intel XDK Documentation page.
So, that means you determine which frameworks and structure your app takes. In other words, if you want to use Bootstrap and jQuery you can do so. If you decide to use the App Designer or the App Starter tools, they will define some classes that impact your layout. However, you are not required to use these tools to define your HTML and CSS, you can do it by hand or use your favorite UI framework library.
Keep in mind that your code is not being rendered by a desktop browser but the embedded "webview" that is part of the device. These webviews don't have the same memory and CPU resources that you're used to working with in a desktop browser, so you need to learn to be "lean and mean" for the best results. You are using HTML5 technologies to build a mobile app -- not creating a web site on a phone.
Hope this helps, please see our HTML5 web site for more background material. It's a little slim right now, but we're adding examples and background material as time and resources permit.
Hope that helps...
I have an old Umbraco web application which was upgraded to v6 earlier this year.
It uses .NET ascx user controls and your standard .master pages as you'd expect.
I now need to create a brand new page which is essentially a booking form for an event.
I'd like to create it using MVC, as I do everything with MVC nowadays. I don't really want to duplicate the page layout / the frame. Is it possible to embed an MVC partial view inside the old master templates?
You can create the form in a .cshtml file and then add it as an Umbraco Macro. But the form couldn't use the MVC approach, it would have to be basic inline razor plus conditional statements. Which is fine but limiting. You could of course have the form posting to a controller action too but this get's a little tricky as it takes the form processing out of the page's event cycle.
Otherwise you are asking if you can reference an action in a masterpage, so no not really. I say "not really" because of course you can but it's unnatural and would make the project a nightmare for anyone to undestand of they were to pick it up. There is an article here as to how you might do it tho': http://www.hanselman.com/blog/MixingRazorViewsAndWebFormsMasterPagesWithASPNETMVC3.aspx
Also, there is also the Umbraco MvcBridge package. This was something a lot of devs used prior to being able to build directly in MVC. Essentially you can set up Macros to point to actions etc. but still within the webforms mode.
It's a great half-way house but I'm not sure abut the compatibility with v6.