I would like to know if it is possible to create components (Razor / Asp.NET) like the react style. I'll illustrate:
<GenericDadContainer>
<ChildComponentDinamic />
</GenericDadContainer>
I want to do this so that my parent containers have dynamicity. They will serve only as containers, and your children need to be dynamic regardless of their models.
If possible I would also like to know if in this context it would be possible to pass parameters to the same besides the child itself.
I understand little of Razor, and I didn't find anything from the internet on a way to reuse the layout better.
Not exactly the same style, but the same idea: in Razor, you can use the so-called "partial views" to divide your page up into "components", and yes, you can pass data to a partial view.
Here is a mini-example:
<div class="container">
#Html.Partial("view-name-here", model)
</div>
The model variable could be any object you choose.
Read up on partial views in ASP.NET/MVC, for example here.
Related
I'm trying to bind the background-img: url('') property in a WinJS application.
I've got a view model property which is set to something dynamic like:
'images/' + myObject.name + '.jpg'
But I'm unsure how to use data-win-bind to set said property to the css property background-img: url(''); correctly.
My template is currently set like this:
<div class="item" data-win-bind="style.backgroundImage: backgroundImageUrl">
Where backgroundImageUrl is my view model property, but this does not seem to setting things correctly.
Any ideas as to how to bind to these properties?
Your data-win-bind syntax looks correct. So there could be two possibilities.
First, make sure you've called WinJS.Binding.processAll. That's necessary to set the binding context and set up the bindings described by data-win-bind attributes. Nothing happens without it.
Second, the value of the source's backgroundImageUrl must be a string in the form that CSS expects, that is, "url('')". It can't just be the relative path itself, like you would use with an img.src target.
To do this, either make the source's property in that form, or use a binding initializer/converter to add the url('') part automatically. For more on that, I suggest looking at Chapter 6 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, with the general data-binding discussion starting on page 299 and the initializer stuff starting on page 315.
Using knockout, when you call ko.applyBinding(viewModel, "divId") it does a recursive binding down through the children of the element you bound to ("divId"). I would like to stop this evaluation at a child node. Is there a way to do this?
the reason why...
I would like to bind the entire page to a navigation view model, this will handle basic layout and ...smile... navigation. On the various pages I would like to bind certain regions to different view models that are not properties of the navigation view model. At the moment if I do this I get "unable to parse binding" errors as the navigation view model does not have the required properties. If I could stop the binding walking down the dom, I could just bind these items separately.
There are several ways that you can go on this one. Typically, you would add multiple "sub" view models to a main view model and then use the with binding on the various areas with the actual view models to bind against them.
It is possible to technically do what you are after. You can create a custom binding that tells KO that it will handle binding the children itself. It would look like:
ko.bindingHandlers.stopBindings = {
init: function() {
return { controlsDescendantBindings: true };
}
};
When you place this on an element, then KO will ignore the children. Then, you could call ko.applyBindings on a child of this element with a different view model.
Sample: http://jsfiddle.net/rniemeyer/tWJxh/
Typically though, you would use multiple view models underneath a main view model using the with binding.
One way I have done this is to create a section for the navigation (or just a ) and bind the navVM to it. Then create another section for the content and bind the contentVM to it. That way there is no conflict and its all very separated.
<body>
<div id="navSection">
</div>
<div id="contentSection">
</div>
</body>
Then do ko.applyBinding(navVM, "navSection") and ko.applyBinding(contentVM, "contentSection")
In other languages (PHP/Python), I am used to creating a class which represents a given HTML page layout. These classes can have an unlimited number of attributes and dynamic features, such as Navigation (multi level), error messages, info messages, footer text, etc... Most of these items have defaults, but may be overridden on a per-page level. For example:
Layout = MainPage()
Layout.Title = "Google Image Search"
Layout.Nav1.Add("Google", "http://www.google.com", Selected=True)
Layout.Nav1.Add("Yahoo", "http://www.yahoo.com")
Layout.Nav1.Add("Bing", "http://www.bing.com")
Layout.Nav2.Add("Google Image Search", "http://......", Selected=True)
Layout.Nav2.Add("Google Shopping Search", "http://......")
Layout.Nav2.Add("Google Video Search", "http://......")
Layout.Nav2.Add("Google Web Search", "http://......")
or, handling errors:
try:
# do something
except ValidationError as e:
Layout.Error.Add(e)
or a php example:
$Layout->Info[] = "Your changes have been saved!";
My question is: how do I implement similar functionality into ASP.Net MVC 3 Razor (VB)?
So far, I have been able to see how you can use ViewData to pass various bits of data to a view. Also, I have been working with strongly typed views.
Frankly, I'm not sure who's job it is to have this logic, the controller or the view (or is there a model that should be in there somewhere).
Here is a summary of what I am shooting for:
A single place to initialize the default values for the layout (like the first layer of navigation, etc...)
Strongly typed attributes, such as Public Readonly Property Nav1 as List(of NavElement)
And a single place to render these layout elements (I assume _Layout.vbhtml)
Please forgive the here-and-there of this post... I'm trying to figure out the "right way" it's done on a platform that is both new (Razor) and new to me (ASP.Net MVC).
General advise very welcome!
I usually have a controller property (MainMenu) which I add to the ViewData dictionary in Controller.OnResultExecuting in my BaseController. Note that it's named ViewBag in mvc3 and it's a dynamic object.
Another approach would be to use sections in razor. Look at this question: ContentPlaceHolder in Razor?
I lean toward the fat models, skinny controllers perspective. If it were me I would create a base class for your page models that provides support for your common data. You can then inherit from that for individual page models and store your page specific data there.
The MVC implementations that have worked well for me usually have relatively clean Controllers. The controller is just the connector, getting the data from the request into the model and then handing off the prepared model to the correct view.
As for how you store collections of things in .Net - look at the classes that implement IEnumerable interface. Specifically focus on the Dictionary and the List classes. Dictionary objects store name/value pairs and can include nested dictionaries. You can work with them almost exactly like you can use multi-dimensional arrays in PHP. List objects are just indexed collections of items of the same type. You can work with them just like a simple array in PHP.
One side note - if you're just getting started in .Net and coming from a PHP/Python background, it might be better if you can switch to C#. You'll find the syntax much more comfortable and the tutorials/examples more plentiful (especially in the asp.net mvc world)
It's not difficult! :-)
If layout model is of the same type of the content page, the association is automatic! Here is the simplest example...
This is a test layout:
#model string
<style>
.test
{
background:#Model;
}
</style>
<div class="test">
Ciao
</div>
#RenderBody()
And this is a test content page
#{
Layout = "~/Views/Shared/_Test.cshtml";
}
#model string
...blah blah...
Just call the View with something like:
...
return View("Name", (object)"Green");
and it's done! The model is the same in the content page and in the layout page!
Andrea
P.S.: Believe me! This is useful!!! Maybe it's not the best for purists, but it's really useful!!! :-)
I am trying to understand how best to organize some common Dropdown lists used in several views (some are cascading)
Is it best to create
a single \Models\CommonQueries
then create a webservice for each dropdown used in cascading situation
then have a single controller that contains actions for each dropdowns
This way I can follow DRY principle and not repeat the dropdown logics since they are used in various views.
Much Thanks and Regards for reading my question and taking the your time.
+ab
When you say your dropdowns are used in several views, do you still consider these dropdowns as part of the view that is rendering them? If so, I think using a custom HTML helper or a partial view (ascx) is appropriate. Then, like you suggest, you can populate the data for the dropdowns using a common service from your domain layer. I think that is a very reasonable approach.
However, if you feel the dropdowns are somewhat external/unrelated to the view, then you might find that using Html.RenderAction() gives you a much cleaner result. Using Html.RenderAction(), you can output the result of an Action method directly into any other view. Therefore, you can create 1 controller with the necessary Action method(s) to populate those dropdowns. For example, let say you have a view with roughly something like:
<div>
<div id="coreView1">
<!-- some view code here -->
</div>
</div>
<div id="commonDropdowns">
<% Html.RenderAction("Create", "Dropdown"); %>
</div>
where Create is the name of your method in the DropdownController.
For example:
public class DropdownController : Controller
{
public ViewResult Create()
{
// do stuff here to create the ViewResult of the common Dropdowns
}
}
Note: Some people dislike this approach as it doesn't fit the typical MVC seperation of concerns. However, it can be a really great fit for some cases.
Hope one of these approaches can help.
I have 2 components for example (editor.mxml using mx:windows), when I click an edit button, I want to get the current value from the other component's datafield? (datagrid.mxml using mx:window)
I do know how to access the main MXML's datagrid by parentDocument or Application.application method, but stumped block if I want to access other way as mentioned above. Keep the code as simple as possible.
You could either do dependency injection, that is, give component A a reference to component B so that they can communicate directly (example of tighter coupling,) or have both components communicate through a common mediator using events (example of more loose coupling.)
Both of those options would be implemented wherever it is that you're creating those components (A and B in this example) and adding them to the display list.
This might be more complicated than it deserves, and it smacks of Pattern-Fever, but you could use a mediator class that listens for the CLICK event from the button and knows enough about the other component to query its property. It could even transmit that data using a custom event, which the button listens for.
While this involves three classes instead of two, it often turns out to be easier to have two components that focus on looking good and one that worries about coordination.
Cheers
Try this:
FlexGlobals.topLevelApplication
This points Your root. From the root You can grab every element You want.
You can also add an id to the custom component like this,
<custom:Editor id="myCustomComponent">
</Editor:AddressForm>
and
access your datagrid's value like this,
var data:ArrayCollection = myCustomComponent.DatagridID.dataProvider;