How suitable is ASP.NET MVC for developing anything like
http://www.google.com/ig?
I haven't seen or failed to find any examples yet. Does the MVC approach imply that the user interface is not supposed to look like that?
Check out http://aspspider.info/lakkakula/local.aspx, it is Web 2.0 Portal developed using Asp.Net MVC 1.0, Microsoft Ajax Client Templates and jQuery with drag and drop widget personalization much like google.com/ig.
MVC is quite suitable for such a UI. Your main controller can render with a list of the widgets the user has defined, or an ajax call to a method returning a JsonResult can be used... this can generate the wrappers client-side calling for each partial vie for the corresponding controls. I would think that MVC would simplify things quite a bit.
MVC + jQueryUI would be about all you'd need...
I guess a little bit more clarification, what exactly do you mean by "suitable"?
One method might be for each available "widgit" to be a controller, and then you can use jQuery (or whatever you want) to call the specified method and render. The page would then have a series of "lists" (which you can store in the DB) against the user and you can simply order those lists to display the relevant widgits in the correct order.
Obviously, that's a VERY large simplification....
See the tutorial Developing Web 2.0 Portal using ASP.NET MVC, Microsoft Ajax Client Templates and jQuery with drag and drop widget personalization.
Related
I have finished a few MVC partial views which load their data using calls to a webapi Get method, to preload the data used by the angular controller.
This method works but it feels more logical to do this via the initial asp.net-MVC Partial view load via #Model for example. Rather than waiting for the page to load and angular to call the get method of my webservice i could have prepopulated the Model, but im not sure how this would pass the data to Angular using this method.
I have had the same issue (if one call this an issue) and ended up doing binding the model to the partial view at the server side. The main rational for the decision was that the model was already available at the time at the server side and I was not building a Single Page Application.
Had I been developing a SPA, I would store the partials as templates at the client side, then grab the model via WebAPI and do the binding
If you use AngularJS,then it's not need ASP.NET MVC. Just use web api for get data.I written a demo site for AngularJS+ASP.NET WEB API,hope to help you,this is the source code.
Does your web page have a lot of heavy client-side interaction or are you simply using Angular to initialize the data for your page on load?
If there's a lot of client-side interaction, you will probably want to keep using Angular. If not, you might want to go back to using MVC since your use case doesn't really require Angular.
TL;DR
What are the best practices when using .NET Razor views and AngularJS?
Context
We are developing a public website (not an intranet application) using mvc4 with razor, and we weren't very familiar with client script, so we started with what we knew: jQuery.
But now things are getting more complicated and we'd like to switch to AngularJS.
On the .NET part, we use Razor templates and UIHintAttribute (plus some custom ones) to render the right html "control". We also add custom html attributes to give extra information to the jQuery part (like title for a tooltip....)
So we already use a declarative way of setting the user interface behavior, that's why AngularJS seems a good option.
Questions
Since we already have models defined server side, and since AngularJS also uses models, wouldn't it force us to duplicate code?
How do we deal with data binding feature, since we already do some binding server side (in the views). Should we make a completely asynchronous application, making AJAX calls from AngularJS to load data, or can we mix both?
Anything else we should be aware of when trying to use both of these technologies?
I did some research on Google, but I can't find detailed ways of mixing Razor views and templates with AngularJS... Perhaps that's just not a good thing to do?
We dealt with this issue for months when working with MVC plus another JavaScript framework (Knockout). Ultimately, if you're going to be using a client-side MV* framework for rendering your user interface, you will find that mostly ditching Razor is going to be your best bet.
Most of the major MV* JavaScript frameworks, including AngularJS, assume you will be maintaining UI state and rendering your user interface based on JavaScript models or view models. Trying to mix in server-side rendering is just not going to work very well.
That's not to say there is no use for MVC when it comes to developing an Angular application. You can still take advantage of some great features like ASP.NET Bundling and Minification. And sometimes it works really well to embed JSON directly into the page using a Razor view or partial as opposed to making an additional AJAX call.
As for models, you may want to take a look at Breeze.js. It's a JavaScript library for data access that goes great with ASP.NET on the server side to share model metadata.
We wrote our own data binding mechanism that synchronizes the angular.js model with a view model on the server side. The javascript model is generated from a JSON serialization of the server-side view model to avoid the duplicate code that you were talking about.
We are using SignalR to update the client's view model from the server.
Server-side changes of the C# view model properties are sent to the client as a packet containing the path to the property, e.g. Persons[42].Address.City, and the value itself, e.g. New York. The view model inherits a base class that takes care of generating the property path, so the actual view model looks quite clean and we can concentrate on business logic.
Client-side changes of the javascript view model properties are sent to the server in the same way. To catch the change events, we encapsulate all fields of the original javascript model in get/set properties where the setter sends the update packet to the server.
Server-side methods of the view model can be invoked in a similar way. All objects in the view model have an invokeMethod function that can be used like this: Products[42].Manufacturer.invokeMethod('SendEmail', 'mailsubject', 'mailbody'). This will send a packet to the server containing the method path Products[42].Manufacturer.SendEmail and the arguments as an array of ['mailsubject','mailbody'].
In conclusion, the html view (kind of) binds to the view model on the server side where other systems, such as regular Razor views can work on the same objects.
The source code can be found here: SharpAngie.
I'd like to use for my next project Ext js and ASP.NET MVC.
I'm wondering what would be the best way of using this two framework together. So far I did some project using ASP.NET MVC, where every action method returned a view and reloaded the page. The Ext js mvc application uses a single page approach.
As I'm pretty new to ext js so I'm wondering if someone could share some experiences of building real world application using this two frameworks.
You can use extjs as you think is better for you. You can use its components as simple widgets or create a full javascript (extjs) client. However, which are the real requirements? a single page client or a traditional client?
In our current project we started using ASP.Net MVC Framework with extjs widgets, it was ok for a while but the customer wanted more and more sophisticated UI and a better user experince (among other thing) then, we changed the app, we left MVC models and controllers (views were removed) and we created a full javascript client with extjs 4.1.
After that we realized we were using an ASP M_C framework (with no views) and that was a nonsense so, we took the ASP MVC project away and replaced it by a WCF Rest service (it also could be done with an ASP.Net Web Api).
We feel proud of our decision and the resulting design. If you can, if you know extjs (learning it is rather hard) and javascript and, if you have support to your decision then, keep your application splitted in two:
a server-side service/api and,
a full javascript application.
Good luck!
I'm not sure I'd agree with the answer by #lontivero, I'm currently working on a project using ASP.NET MVC as the backend and ExtJS as the front.
You do, as pointed out, loose the V from the ASP.NET MVC stack and you end up needing to duplicate you C# view models in you ExtJS Models on the client side but I've found using MVC as a backend (effectively as a rest based collection of Json end points) absolutely fine.
You can utilise the model binding, model validation in MVC whilst leveraging the full client side js app in Ext.
I'm curious as to the points you didn't get on with using this structure (I'm not saying it's perfect, but it does seem to work)
We used Ext.NET (versions 0.x-1.x) in our previous projects. Even after a comprehensive effort to upgrade our projects to the (now current) version, we had to drop Ext.Net 2.x out.
If it fits you, it can help.
The main problems with Ext.Net were (several) incompatibilities with ASP.NET and a lack of trust. They used to keep their schedule, it's far from it for last 2 years or so. And they are behind ExtJS.
I need to port the functionality of this one and only one AJAX control to MVC, but given the poor selection of MVC controls out there, I think I need to bring this legacy control into the MVC world...
I'd rather not taint my MVC project with ASP.NET controls, and welcome json/MVC alternatives you know of. (post them if you know of any)
Sample UI that I need in ASP.NET MVC
Back to porting
Although it's unfortunate that I am left to porting this control to MVC, it seems to be a widely accepted practice since Telerik has detailed instructions on how do this.
That makes me ask:
How common is it for a MVC website to use ASP.NET controls?
Again I'll mention I don't want to do this so I welcome MVC-specific alternatives. That being said, I'll proceed with trying to merge that control with my existing site. </End Disclaimer>
If you click on this hyperlink, and look at the source code at the bottom, can you tell me where I should put the following in MVC?
Code behind (My first instinct is to use a Controller but another SO question indicates I should create a create a ViewName.aspx.cs file)
How do I port the SQLDataSource to the new "Model" way of thinking. I know they are different in nature but I don't know how to present data to a ASP.NET control in a way that it will consume the information.
How do I handle the AJAX component? This control has an AJAX component using callbacks. Yes this is getting ugly, but it seems like I have to do this.
Apparently this model saves data in session or view-state. I have no idea if this even work in MVC. Guidance, an alternate control, or a life preserver is much appreciated.
I've already done research and have instructions from Telerik here and here that describes how to get started with placing a simple menu, but I need a little assistance with the more complex controls like this one.
Note: For all the commentary that has hit this question, please remember that I only want this one ASP.NET control functionality; I can't find a comparable control in MVC.
porting from asp.net webforms to MVC is a paradigm shift.
Directly porting does not work.
The Model is where you typically describe your data and do the data access
the View is for displaying the data
The controller plums the other two together
So SQLDataSource is your data access layer and would therefore go to your model
the problem with the thought pattern of SQLDataSource == Model then you get away from the point of decoupling your presentation from data access
You have to think of MVC development as a new build
I would pick a book or video series from your preferred source and learn starting with MVC3 (it has some differences that simplify build speed and reinforce the difference between webforms and mvc)
Hope this helps.
This article explains how to run web forms and mvc together
http://weblogs.asp.net/rajbk/archive/2010/05/11/running-asp-net-webforms-and-asp-net-mvc-side-by-side.aspx
This is by telerik and explains the limitiation of the grid and what is need to get it to run.
http://blogs.telerik.com/aspnetmvcteam/posts/08-11-06/asp_net_ajax_controls_in_asp_net_mvc.aspx
Add an IFrame in your MVC view that just shows the WebForms page (or just use that control on a single WebForms page).
There is nothing that says you can't have a site with both WebForms and MVC pages. You can route a single URL to a WebForm just for this control.
Why not just use the telerik MVC controls? They work quite well. Either get them via a NuGet package or visit this link http://www.telerik.com/products/aspnet-mvc.aspx
I would rather use ViewModel instead of code behind
You don't have to throw away SqlDataSource you can use result set and buld from it your model, problem may be column names in result set... tricky but can be done
Since there is no components in MVC except helpers youll need help of jQuery probably, it easy
$.ajax({
url : "/controller/action",
data: { /*json or serialized form */ },
successs: function(data){
//if you got response as html from /controller/action
$("#some_div").html(data);
}
}
Session is available in MVC but viewstate not, you can use HttpContenxt.Cache or TempData if you need something like viewstate. USe TempData to keep data between redirections, or httpcontext.cache to cache your data further more.
I can't find similar functionality in an MVC control
MVC doesn't really have a concept of controls in the same way that ASP.Net does - there are only really the plain old HTML controls (i.e. hidden input, text input, checkbox, radiobuttons, select box, text area, password and buttons).
When you need something more complicated than the plain HTML Controls you need to use some JavaScript to achieve this.
I'm not sure that you will be able to 'port' the control into MVC - you will most likely have to try and re-create it your self using an MVC controller and a partial view with a fair bit of a javascript to create the control.
Have a look at the JQuery UI Autosomplete plugin - you could probably use this to acheive something similar
I wanted to ask if anyone has tried using combination of Sencha's ExtJS 4 (using MVC approach) with ASP.NET MVC (using view models)?
I have existing ASP.NET MVC 3 app that uses view models and my question is how would this "fit" into Sencha's MVC approach...Would ASP.NET MVC "view model" become ExtJS "model" and then I would define yet another "view model" for ExtJS....Seems a lot of "translating"...
What would be the best approach?
And yes, I am aware of projects that integrate ASP.NET MVC with ExtJS using Ext.Direct, but my question is strictly relating to MVC paradigm on "both" sides (ASP.NET and Sencha ExtJS)
Thanks
Z...
Our approach currently is a what could be described as MVCCM or MVC-CM.
In ExtJs you have the view as panels and boxes etc, a store with a model makes a model and you need some logic to make these components work together which would be the controller.
This ExtJs frontend is situated in a MVC3 project and exposes controller methods that typically returns Json data which it gets from the model back end which is typically made up of entities.
There is no programmatic link between the entities on the server side and the models defined in the stores client side. One could generated the stores from entities, but we have not looked into this yet.
The view in the Microsoft MVC3 framework is just a page that returns some div tags which ExtJS can render stuff into.
While I've not done this with ExtJS, I really don't think there's any conflict. I'm assuming a lot here, I know, but if ExtJS works with JSON and you've got ASP.NET MVC actions that emit JSON, it's really more of a philosophic difference than a technical one.
One difference from a normal MVC app would be that your ASP.NET MVC app might not have any views, since the views would be handled entirely by ExtJS.
From the server side, ASP.NET MVC really doesn't care - it's getting a request that gets mapped to a controller and action, processing the request and returning some result. Whether that result is HTML, JSON, XML or whatever, ASP.NET doesn't care at all.