I have a table that displays information. When the user clicks on the row, I would like to display the data in a modal pop up. Since the Model already contains my data my initial thought would be to just pass the model to a JavaScript function which would then populate my modal popup but I see that is not possible.
razr:
foreach (Insurance insurance in Model.Patient.InsuranceCollection)
{
<tr style="border-bottom:#676767 solid 1px;">
<td class="table_highlight"><span style="cursor:pointer;" onclick="EditInsurance(#insurance)">#insurance.Company</span></td>
<td>#insurance.IdNumber</td>
<td>#insurance.Group</td>
<td>#insurance.PlanType</td>
<td>#insurance.PaymentRatio</td>
</tr>
}
I know I can pass the id to my function if I do EditInsurance(#insurance.Id) and could do an ajax call to the server to pull the data from the database but this seems bad since I already have the data in the model, I just can't seem to figure out the best way to access this model data to display in my pop-up when the user clicks on the row.
Thanks for your help.
The reality is that MVC pretty much expects you to pass the ID and then do another dip for the data off that.
That said, you could do this with javascript anyway.. You just need to expose the data as a webservice, then fetch it into a JSON object, and pass it around to modals to your hearts content..
For this kind of stuff you can try various option the easiest way is to use knockout js in which you can pass whole row data in observable function or jquery function and you can do anything with it.
Related
In Angular, speed is the name of the game and rendering views with useful data as quickly as possible is always sought after. Angular allows us to reference data between the Controller and the View seamlessly using Angular's templating engine, which can make rendering views with correctly bound data lightning fast.
For example, lets say we have a simple Angular App which is simply a table of contacts with fields like First Name, Last Name, Phone, Email, and Address. We then want a Details view that appears when you click on a table row. We can wire up the <tr> to change views on click like this
<tr ng-repeat="contact in Contacts" ng-click="showDetails(contact)">
Then we can change the view and "instantly" show contact data in the new view. For example, we can change an <h1> at the top of the page to be Contact - John Smith using the data that was provided in showDetails.
While this data is being shown, more data can be retrieved from the server asynchronously that will then fill in the rest of the fields.
However, what do we do if we want to get to this details page directly from the url? If the contact table was sitting at /contacts and the details page was something like /contacts/detail/1 then attempting to go directly to /contacts/detail/1 would result in the <h1> above to be blank.
This is clearly because we did not use the showDetails() method to invoke the view and pass the clicked contact into it directly. In this case, we would need to take the contact id in the URL and run an AJAX request to get ALL of the data.
My question is, at what point do we draw the line between trying to make our views and data quickly accessible and making them robust?
Robust is a must.
So we need to start there. Then we can move forward to optimize and make data "quickly accessible", as you put it, as much as possible.
In order to do that, every view in an SPA that is directly correlated to a URL needs to be initially stateless. That basically means that a reload on any url will load the desired view correctly and completely.
We can get the best of both worlds by using nested routes. If every route loads only what it needs, but also draws on parent routes (loading them if necessary, or just using them if they have already been provided) then you can achieve both robustness and "quick accessibility" to data.
In your particular example, the base route would be contacts. Then there could be a nested route inside of that which would display the details of a particular contact, contacts/detail/{id}. Loading the base url would load the list of contacts, and loading the details view would load both the list of contacts and the details of a particular contact. To provide quickly accessible data when going to the nested view, we could include logic that checks to see if the parent view data is already loaded, and only load if necessary. Then when navigating from the contacts to the contacts/detail/{id} view, we could quickly display data from the parent view in the child view, while loading data specific to the child view. A reload at contacts/detail/{id} would simply load both. When navigating back to the parent, the parent data would already be loaded.
If you were to use something like ui-router to create complex routes, then you would not use showDetails() to alter the model, you would use showDetails() to alter the route. Then your model would set itself up based on the route, and your view would follow.
For example, you could have something like:
$scope.showDetails = function(contact) {
$state.go('contacts.detail', { contactId: contact.id });
};
Then the controller could use $stateParams to retrieve any data you wanted for the specific contact from the server (asynchronously using promises). You could also include your own flavour of caching/loading via services to manage things like performance if you found it necessary.
i have a MVC3 project with KnockoutJS and in my view.
The form that the user fills, has information already loaded from the server and the user is filling and selecting from this data so then, the user saves the data selected.
So... sometimes, the user, in the middle of the form, realize that some data is missing and it must cancel the form fill and edit the data that is missing and come back and do it again. So, my question is this... can i persist the view model in some way that the user can edit the missing data in other tab or window in the explorer and then refresh the form and dont lose the data?
I hope the explanation was clear.. my English is a little bit rusty.
Thanks!
Yes, you can. If the data is on the same page, you could save the viewmodel data to another object, possibly using ko.toJSON. Then you can pull it back in later.
If you have to reload the page, you could save the viewmodel or the form's state in storage, using a library like amplify.js. http://amplifyjs.com/api/store/
pseudo code:
amplify.store('myData', myViewModel);
I have a form that only has a checkbox. If the checkbox is not checked then the page won't be valid and won't submit the data. On the view I have out putted some fields from the model object, just to let the user know what they are deleting. When I click the Submit button and the model state is not valid the page will show the validation error but the data from the model is no longer there!
Does anyone know how I can persist this data without making another call to the database to populate the model object?
Thanks
ASP.Net MVC will not magically persist model info.
You need to either include it in hidden fields in the form (which an attacker can modify), or re-fetch it from the database.
If you don't repopulate the Model from the DB, you have to postback all the data, using hidden fields for example.
Anyway, I don't understand how the model validation could fail, being just a checkbox :/.
I'm trying to use a html.dropDownList helper with a strongly typed view model with ajax. I can't the post the code because of the nature of the project.
Here basically what I'm doing...
loading a mvc view via a strongly type view model
clicking a button which does an ajax post to a controller method
using the TryUpdateModel to parse the view model
processing the request
rendering a parital view for the ajax request
According to the article listed below, the problem is that "ASP.NET MVC assumes that if you’re rendering a View in response to an HTTP POST, and you’re using the Html Helpers, then you are most likely to be 'redisplaying a form' that has failed validation."
http://blogs.msdn.com/b/simonince/archive/2010/05/05/asp-net-mvc-s-html-helpers-render-the-wrong-value.aspx
Instead of "redisplaying the same form value", I need the html.dropDownList to be set to the same value in the view model.
Does anyone know of any custom dropDownList helpers or have any ideas of how to achieve this?
Things I've already tried/considered
per the blog, manually removing the modelstate item...didn't work - didn't pick up the value in the view model - just defaulted to the first item in dropdown list
considered just writing a regular select list...but this is sloppy and cumbersome since I'm rending multiple select lists in a loop
writing my own custom dropDownList helper...wanted to avoid reinventing the wheel
Thanks in advance
Its not fully clear to me what your problem exactly is, but I've had a similar problem. I used the Html.DropDownListFor(, SelectListItem[]) helper. At postback it sets the value to the choosen one. Your postback view doesn't require to have all the fields of the original model.
#Html.DropDownListFor(model => model.SelectedValue, MyModels.DropDownSelectables());
Here I want the selected value as the model.SelectedValue variable and within my (seperate) model I made a array of selectlistitems. The rest is automagic.
Hope it helps, D
I was curious to see if its possible that from a controller (or else where) could I get a instance of a Control View pass it the model it requires and get back the html that it would output?
For example I have a Control View that builds a league table. This is fine for when using it on the site but I also want to put this league table into a html email that I send out... can I use the control view to do this or do I have to recreate the league table?
If you put the table itself in a partial view, you could easily use Html.RenderPartial() to get the output from it. If you go so far as having an action method that gets the appropriate data from your data store and returns the partial, you could even use Html.Action() (given that you use MVC2 or higher).