My question is somewhat related to this answer - https://stackoverflow.com/a/3458299/1635958.
I am working on Asp.Net MVC 3.0.
I have Page1 where I have many controls. When I click on a Button1, I want the ability to make a list of json objects (lets say List personList ) and send that list to a Controller action. I want the view to be opened as a dialog.
So I am trying something like
var $dialog = $('<div></div>')
.load("http://localhost:XXXX/Controler1/Action1")
.dialog({
autoOpen: false,
title: "SomeTitle",
width: 500,
height: 300
});
$dialog
.data("personList", personList)
.dialog('open');
Once I do this, I want the ability to deserialize this data at the controller's side and pass it to a view. Is this doable through this approach? Is there a better approach?
Edit
Requirement is something like this ->
1. Page1 will display a grid of book details.
2. There is an Action column for each row, which is a checkbox
3. User can select the rows he is interested in, and click on a button outside the grid for a specific Action.
4. I should be able to collate data about all the books selected, and pass that data onto a jQuery dialog that gets opened.
5. The jQuery dialog should display the collated data to the user and present him with the ability to take some extra actions.
Edit 2
What is the best practice to have modal dialogs in MVC?
I have a view which shows a grid of items. I want to provide the ability of selecting a subset of the rows, clicking a button, and opening a modal dialog with the selected rows for editing the selected rows and doing more actions. What is the best practice to get this done in MVC? When we click the button, if we call a controller, what is the recommended way to pass data to that controller?
I did it this way ->
I created a json object from the first page. Posted it to the controller as an ajax call. The controller renders a view as a result. I capture the response and display it as a jquery UI dialog. Worked for me.
Related
I have a MVC 4 project I am currently working on and need some advice on how to implement modal popups, preferably in jQuery.
For instance, on my view I have a zip code text box, with a lookup button next to it. The user can enter in the zip code directly, or click the lookup button. If the user clicks the button, I want to have a modal popup where the user can enter in a city and state and get a list of zip codes, select one, and then have that value posted to the zip code box on the original form.
This is just one example, I have more on that view, but this is the easiest to explain.
Anyone have any tips, links, or example code?
Thanks in advance on any help.
how to implement modal popups, preferably in jQuery.
Generally jQuery dialog with modal : true and handled beforeClose is what you want
$(foo).dialog({
modal: true,
beforeClose: function(event, ui) { ... }
})
Good day,
I have the following scenario:
I have a Razor view with a "#using(Html.BeginForm(....))" statement at the top of the page. Inside the using statement I have a few textboxes, whose values get populated by the user, and a button.
At the click of that button, a telerik modal window (displaying a partial view of the same model as the initial view) pops up so that the user can populate some more fields. Inside the modal window there is a button that must submit the entire form, which it does, however after I debug my action, I notice that the model is missing the values which were entered in the popup (partial view).
My code for the telerik window resides inside the using statement and looks as follows:
Html.Telerik().Window()
.Name("AddEditScaleWindow")
.Title("Save Scale")
.Content(#<text>#Html.Partial("AddUpdateFeeScale")</text>)
.Buttons(e => e.Close())
.Height(250)
.Width(350)
.Modal(true)
.Draggable(true)
.Visible(false)
.Render();
I tried different methods of getting the window to post its values but to no avail.
If I view source, I can see that the window (partial view) is inside the form. If I do a network trace I can see that the values being posted are all values that were entered on the view, but none from the partial view.
Does anyone have any idea why the values inside the window don't get posted?
Thank you in advance.
Matei
You might need to check this because I am guessing, but many dialog renderers create their dom elements below document and outside of your Form element. If that is the case with Telerik, you will need to do a bit of work on the client to copy the values from the dialog back to your other form.
I have a C#.NET MVC3 web app. I have a View that has a List of Models. This list can be long, requiring the user to scroll down on the View. When selecting one of the models in the View to Edit, the user is taken to the Edit View. After submitting the Edit View, the user is redirected back to the List View. However, the List View is now displaying back at the top of the list. How can I redirect the user back to the same position in the List View where they clicked the Edit button?
You would probably be better suited using a modal popup dialog to edit the data, rather than navigating to another page.
While it's possible to do what you want, it's a pain. You would have to get the scroll location via javascript, save it to a hidden field, post that to your edit page, along with record number and anything else, then re-post it back to your original page when you return, then read the post value and scroll to it via javascript.
All that is avoided if you just use a modal edit dialog, then when the dialog goes away the page is still in the same place.
I have a Form to create a new model object and persist it. That form is displayed in a lightbox or popup.
Some fields are dropdownlist showing related info that lives in another table (other model object related to the main model).
What I need to achieve is without leaving the creation form, create a new item of the related type and update the DropDownList in order to continue filling fields and finaly submit the form.
I have done this in winforms but not really sure which is the best approach in MVC 3:
Trigger another popup with a small form?
Use some kind of editable dropdownlist?
Place a small hidden form right next/after the DDL to allow entering the info to create an item in DDL (and to DB also)?
What do you thing is the best option?
Thanks!
There is no editable dropdown list in HTML. There are some toolkits that simulate it, but in general these are clumbsy and really complex. It's a lot easier to stick with basic controls.
You would proably do best to have a small + sign next to the field, and then popup an editing field that inserts the element into the combobox and sends it to the controller via ajax to add to the database.
An alternative to a second pop up is having a toggle add button. When toggled, then show a small area where you can enter the name. Using ajax, save the name, and then refresh your dropdown. This works well if you only have a few attributes to fill in.
I am new to ASP.NET MVC and I have a question regarding viewing entity relationships.
Say I have an entity called 'Person'. This holds the usual data relating to a person (Name, Email, etc). I also have a 'Notes' entity. Under EF, a 'Person' can have many 'Notes'.
I have a Person controller where I can view and preform CRUD operations on a Person object.
I can show the notes in the view easily but what is the best way to allow a user to add/edit/delete these notes from the Person view? I am hoping to do this using AJAX and not have the user move to a completely different page to add/edit/delete a note.
Thanks in advance,
ViperMAN.
When they edit a note, popup a jQuery dialog pointing to your URL to edit or have a separate Ajax.BeginForm() on the page that the details go into. When they finish the edit call a method to refresh the notes.
So:
1. In your Notes grid (or whatever)
you have an edit link for each note called "edit"
this link looks something like the following:
This one actually uses 'notes' : )
http://www.iwantmymvc.com/dialog-form-with-jqueryui-and-mvc-3
ASP.NET MVC | Problem about showing modal dialog using jQuery dialog widget
ASP.NET MVC modal dialog/popup best practice
Also beware of this scenario for multiple links:
MVC3 - Only first row link works well with Jquery Modal Dialog
Now the urls you use to populate the dialogs would be for example
/Note/Edit/10
One thing to note - jQuery validation needs to know about these new items that are being loaded via ajax into the DOM , so in your partial view you need to tell jQuery validation to include the new items - I'll edit in a bit to add this, have to grab it from another machine.