I am completely new to ASP.NET MVC, so the question might sound silly.
I have a view that should display a part of the data from it's model at a time. And there are buttons that should trigger which part of the data gets shown.
So far, I have encapsulated each part of the data into a div and added buttons. I have also added a function that returns CSS style for a given id (basically, it returns display:visible or display:none).
I assume that I'll be able to wire up event handlers for buttons. But I am completely stuck at redrawing/updating of div elements. I mean I don't understand how should I cause divs to update their style.
Could you please help me to show/hide div elements and buttons dynamically?
That should be standard javascript (or in your case jquery). It is unrelated to MVC3. Once you have the view built that includes all your divs with content, you call $('#div_id').show() or $('#div_id').hide() to show or hide. You can also use many other methods that have related animations, but that should get you started.
http://docs.jquery.com/Tutorials:Basic_Show_and_Hide
Like this:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});
Related
Can anyone give me an idea about how to do this? My goal is to build a multi step claim submission form where user need to provide information for different sections. I am using VS2015 and Umbraco 7. Thanks.
In my opinion if you want to do it all from one template, it would be best to use a javascript/jquery solution that hides and shows different sections/divs as needed. These divs can be rendered from the partial views. I'm not sure if this works but maybe if you have one Form and all of these divs underneath it, you only need one form button and just submit at the end (I'm pretty positive this would work as the partial view elements would just be rendered as elements inside the form). But if not the values can be stored either in Jquery Data, or just using hidden variables, etc.
In cases where new items need to be added to a list via ajax, what is the biggest benefit of using something like Knockout.
So far what I have been doing is, on my view, use an editortemplate (with asscociated viewmodels) to render a list of items. Then to add a new item, I make a request to an action that loads a server-side viewmodel, and returns an EditorTemplte object which just gets appended to the list. Like this:
return Json(new { this.RenderPartialViewToString("MyEditorTemplate", model) });
The knockout way of doing things requires the implementation of another view model to display items, and then another template to display it. But doing it this way requires duplication of code since the view model has to be represented in 2 places: in the cserver side code and then the view for the knockout viewmodel. Isn't that bad practice?
Am I missing something, or understanding the purpose of knockout and MVVM?
The biggest benefit that you will see from Knockout is that you will not need to hit the server in order to add a new item to your list - everything happens client side. This has multiple benefits including:
You reduce load on your server.
You improve the end-user's experience.
You can keep multiple elements on the page up-to-date with your model without any server interactions.
Two great examples of this can be found at these Knockout tutorials:
Working with Lists and Collections
Loading and Saving Data
As far as duplicating code, if you take a look at those two tutorials, you'll notice that you don't need to duplicate code. For example:
Create a view to display your entire list.
To add a new item to the list, create a partial view that you load when you add a new item to the page - that partial view is bound to Knockout
When you submit the entire form, everything in that list will be submitted - including those items you added via Knockout.
Your ViewModel will be specific to your list item (you don't need to create an entire ViewModel for everything, necessarily). And your view is specific to a single list item.
Hope that's clear. Knockout is pretty straightforward and they have some great documentation and tutorials to help you move forward.
IMHO, the following is cleanest option for the architecture of knockout and asp mvc mixed together.
Have your ASP.net acting as a webservice and have knockout control all your view templating and logic.
Otherwise, yes there will be potential replication of viewmodels and having to refactor both front and backend code when you need to change your model.
I am loading a Razor View via AJAX and putting the content into a div on a page.
If I want to send some arbitrary data from the view to our AJAX framework, is there a recommended HTML tag to do this with? A hidden field sounds like the wrong this to use for this. I could use an empty div with custom data- attributes, but again, a div sounds wrong.
My data isn't relevant to any element within this view, more related to the view itself.
Yes - this is simply a question of systematics and aesthetics.
I use data-* attributes, and try to find and attach them to already existing related elements. This convention is also used by asp.net mvc framework itself - when link target needs to be loaded, data-ajax-* is attached to anchors. When you need to set update target of form submit, you attach data-ajax-* to form, so in most cases it is possible to find good candidate for it. If it is not possible in any particular case, I do not see problems using body instead.
All, I am new to Windows 7 Phone. My situation is that I have a main page which contains a ScrollViewer which in turn houses a StackPanel. I want to populate this StackPanel with multiple sub-StackPanels (at runtime) which are to hold an Image Thumb nail a hyperlink and some basic information about the image.
This is all good when I do this from the main page, but I want to know how to update this control (which is on the main page), but from any page other than the main page. I would like to know what is considered best practice for updating a page's control (like that outlined above) from another page.
Obviously there are a number of ways to pass data between pages
PhoneApplicationService.Current.State["yourparam"] = param
NavigationService.Navigate(new Uri("/view/Page.xaml", UriKind.Relative));
then in other page simply
var k = PhoneApplicationService.Current.State["yourparam"];
and many others. But what is best practice for updating a generic control from a different page?
Note: There are many question about data access and passing between pages.
Passing data from page to page
How to pass the image value in one xaml page to another xaml page in windows phone 7?
Passing image from one page to another windows phone 7
and more. This is not what I am asking.
If I understand your question correctly, you are trying to update a control which is on for example MainPage.xaml from another page for example Page2.xaml.
As far as I know there is no way to reach a pages controls from another page, and that seems unnecessary for the cases that I can think of.
The method used to achieve what you are trying is usually done by triggering an action (like the press of a button ) and passing a parameter to the page you are trying to update the control. And on that page's onnavigatedto event (or viewmodel constructor if you are using the MVVM pattern), update your control based on the passed parameter.
If your update is based on data then the best practice is to bind an observable collection or an object that extends the INotifyPropertyChanged (basically any object that can signal that one of their property changed to the ui) and change the data based on the parameter that is passed.
If these two pages somehow are visible at the same time and there is no navigation needed between them( like a popup or sliding menu kind of ui) then you can make the page that you are showing in the popup a usercontrol, and reach to the parent's controls by this.Parent.
I can be more helpful if you give more specifics about your app's flow.
The MVVM pattern would be a good way to go. Saying MVVM is too complicated for small teams isn't exactly accurate - the purpose of MVVM is to decouple Silverlight or WPF code. Using the codebehind of a Silverlight page to directly access data creates coupling in your code and accrues technical debt. Whether you're one developer or 100, if your UI is coupled with your data classes, if you have to change your data classes, you will have to make changes to every UI element that uses those classes. This takes longer and makes your application more difficult to change.
MVVM makes it so your UI (the View) doesn't know anything about the data (your Model). The ViewModel is the code in between that the UI can bind to, and which manages events in the UI that need to be persisted to the Model, and also changes in the Model that need to be represented in the View. For this reason, it handles events, and that's what it sounds like you need in your code - an event that can exist off of the codebehind, that can update the Views bound to it when the data changes. If you have two pages, then an event on one of the pages will be sent to the ViewModel, which will make a change to the Model (data) if necessary, and pass it back to the ViewModel. The ViewModel would then update any of the UI elements (Views) bound to that piece of data.
There's a REALLY good demonstration of how to implement the MVVM design pattern here
. The guy goes through and takes a typical WPF application (just like Silverlight), where the UI codebehind implements event handlers that directly access data, and refactors it using the MVVM pattern.
I am buiding a UI screen for editing the details of an Ecommerce Order. The model for my view (OrderModel) has everything I need (in properties that are also ViewModels), but the UI isn't designed to be able to edit all of it at once.
For example, one part of the UI is for customer data..another for order details, and another for tracking information, each having their own "Save" buttons.
I realize that I could use one giant form and use hidden form fields to populate the non-editable fields, making each "Save" button post all the data, but that smells bad.
I'd like to segment the editable chunks into smaller ViewModels that are posted and validated individually while retaining the strong typing but I'm unsure of how to achieve this in MVC3. Will I need partial views that are called from the primary view?
FYI, I'm using ASP.NET MVC 3 with Razor syntax and client side FluentValidation.
Partial Views are a good solution. You can pass different ViewModels to each partial view. But if only sections of the overall view are updated at a time I would not do a post back on the whole page. Instead I would use Ajax calls using JQuery/Javascript to update the individual information back to the controller. I would also look into something like Knockout.js to handle the data binding on the page.