I want to bind Model Data to the form on Back Button
The Scenario is like On Continue I am saving the data into View Model and on Go Back I want to populate the Model data back to form
there are various ways to do this.
1) You can use jQuery to show/hide specific forms. A good example is available here http://blog.degree.no/2012/03/creating-a-simple-form-wizard-in-asp-net-mvc-4/
2)You can use TempData to save your viewmodels and retrive it back from TempData to bind it back to the form?
Does this help?
Related
I´m starting a Proof-of-concept SPA using the new Web API and Knockout, so far I´ve managed to create the API controller, consume it with Knockout and map entities and arrays using Knockout mapping.
I´m now trying to create a simple CRUD, but I can´t get my head around as to how to implement the ViewModels.
So far I´ve come up with 2 options, listed below:
I can define a ViewModel on the server, that contains the entity´s attributes, plus an array of the same entity. When I enter the CRUD functionality, I call the server and retrieve that ViewModel, with the entity list and the attributes for creating a new entry.
I can define 2 ViewModels, one with the grid data, and another with the entity´s attributes. When I call the CRUD functionality, I get the grid data, and when I want to edit/create a new entry, I call the server and retrieve the ViewModel for that.
On both options I use one single view, which contains the grid definition, and the edit/create form format, which I display on a JQuery pop-up.
I can´t figure out which would be the best option, I´m starting to lean towards the 2nd one, but some guidance would be appreciated.
Thanks in advance!
Do you really need to call the server at the point that you launch the Create / Edit dialog? Could you not have, say, an ObservableArray of EntityVM (a Knockout view model) as the binding source of your grid, and when you either click Add New or click an existing item, the Create / Edit dialog is made visible (that could be done with binding too) with either an empty EntityVM as its data source or a populated EntityVM copied from the grid source's item? Then when you click Save, Ajax the entity as JSON to the server and return a JSON response representing the updated grid data? Or is that not the right understanding of your context?
I have an asp.mvc app the presents to the user different forms when they click on the next button - like a wizard. I do it this way so I can use JQuery to validate each form as the user progresses through them. i.e.
...
// use jquery validator to funk up the form validation
// user clicks the Next button ...
switch(currPageIndex) {
case 0:
if($('#form1'.valid()) {
$('#form1').hide();
$('#form2').show();
}
break;
}
...
However I can't use a single submit button to post the all the forms formcollection data back to my controller - if I do I only get back the one form that the submit button was in and not all of them.
Is there some magic icantation I can type in to get all the forms data sent back to the controller?
Presumably I can cruft up the data myself and send it back to my controller as a jason string, but I'm not sure if this is the best way.
Many thanks.
Wizard-like forms basically rely on a model which is kept on the server-side (in session or a database table) and kept updated.
For example, each post from the client you get back the model from session or database and then call UpdateModel() using the FormCollection which updates the model and the you can check if it is valid.
You can only submit one form at a time, however there are multiple ways around this in your scenario. When you change to the second form you could populate some hidden fields using javascript that would contain the information from the previous form. Then it would all be in the second form and you wouldn't have a problem getting the information.
You could also do it via ajax/json, but then you would probably want to do it with both of the forms data anyway.
In the end I just json'd up the form data and ajax'd it over to the controller, it works very well, nice and and clean to.
many thanks for the replies.
You can do that using $('#form1').submit() function, I don't think there is another way.
Wasnt sure how to word the question, but this is the scenario:
the view is a data entry form eg http://127.0.0.1/User/AddEdit/
so edit the user I have an ID: http://127.0.0.1/User/AddEdit/7838fd9c-425c-4c98-b798-771bba10d9c1
This ID gets the data to populate the form values in a ViewModel, which populates the form
I am using jquery/ajax to save the form, which returns a Json result, indicating ok/error etc
In the View, I get the ID and use this in a hidden field which is set via jquery when the page loads and when the form is saved via ajax.
This seems a bit clunky, how do others do this?
in my opinion best solution is to create a partial view with all the fields and use it on add and edit view which are separate actions in controller. after you create user you can redirect to action edit. if you must / like use ajax you can reload div with form (change from user/add to user/edit/1). i might be wrong but i never see a code or example with one action in controller for add and edit.
I'm new to Ajax, but I think I know how to reasonably use MVC + model binding.
What I'm trying to do is to create an Add button (or Ajax.ActionLink) to add a new row in my grid for data entry. Example: Think of a typical Order entry system with Order (header) and Product (items). My OrderViewModel contains an "Order" object, and the Order object contains a collection List.
The way I plan to do this is that my View render the grid in a PartialView, and the PartialView is a simple for-loop to create the table tags from the List. I will use the default model binder (for collections).
Anyone have suggestions on how to do this?
I've already figured out how to do this using jQuery, but I want (i think I want) to try and use Ajax so that I can add my custom business logic (e.g. like setting defaults, translations, etc.)as opposed to do this client-side.
In other words, I want to do do something similar to what the Telerik grid does with its Ajax Editing with the Add/Remove link/buttons.
Tips and sample code would be greatly appreciated.
One of my challenges, and not sure if I'm going down the wrong way, is that I don't know how to pass back the model back to the Controller Action from the Ajax submit. When I look at Telerik's code, it looks like they store the persisted items in HttpContext.Session, and this is exactly the reason why I don't want to use their grid.
Thanks.
They might choose the session repository storage for demonstration purposes. If you transform the logic from their SessionProductRepository class for your model and implement identical Update/Insert/Delete methods for it, you'll probably get what you want.
HI,
I'm sure I'm missing something very obvious here so please forgive me.
I'm using MVC 2 Beta and I have a model that has several properties, strings, ints etc. the usual stuff.
It also has a byte array that contains an image.
I have an edit action method on my controller decorated with a [HTTPGet] attribute.
The method passes the model to the view which is a form that has the usual text boxes that bind to the various string properties and an img element that is bound to the byte array/image.
This all works as it should and I see all the data including the image. This is all pretty standard stuff.
But when the user submits the form to my [HTTPPost] version of the action method that accepts the same model as its parameter the image property is null. i.e. the image property does not appear to be part of the model binding.
In the normal course of events we would do some validation and pass the model back to the view to be rendered so the user can see if the edits were successfull or not. But just passing the model back "as is" - the view does not render the image again because its no longer in the model.
I know I can go and get the image again (from the database or where ever) and put it back in the model before passing it to the view, but is that the right stratergy or have I missed something?
Regards,
Simon
How do you render the image that is contained as binary data in model? Do you use classic webforms controls (what would be not recomded in mvc terminology)?
Anyway, if the image is only displayed in the view it is not posted when the user submits the form because only input fields (checkboxes, text fields, hiddens) are submited to the server. image element is not. Remember that in MVC it is simple HTML doing all the work of posting data to the server - there is no viewstate nor automatical postback that will persist the state of the controls.
You have two solutions:
Encode binary data in some hidden field so it would be posted again.
(better) Do not send the image data back and forth between the client and the server, but detect if the user provided new image (i expect you wolud use file input for that) and if the user left the file input empty then update the model with the image already stored in database to display it again. Otherwise update the image in the database.
Anyway, i'm curious how do you display image from binary data in model. I think it would be simpler to create some controller action that would return binary data so you could use URL of that action in src attribute of img tag, or store images as files and use their URL instead of binary data.