i have an html table in my asp.net mvc view an i am running into some real estate issues with screen space.
I think in one area of my view i am going to have a button in a column of an html table that says "Details" which, when clicked, loads up some dialog ui. what i am trying to get my head around is that i want the fields in the dialog to also be part of data binding object in the overall form which i am passing to the controller when i submit the form.
is there anything that i should be worried about or anything that you need to do special if you have a form where inside your form you have a button that create a popup with some more details elements. I am just trying to see from a data binding view if there are any issues.
also any examples of doing anything similar would be great.
EDIT
So i tried doing this an ran into a binding issue. i have a follow up question with the specifics about this binding issue with jquery ui dialog here:
why does jquery ui dialog break asp.net mvc's default model binding .
There shouldn't be any issues if you are binding elements from your popup dialog to corresponding hidden elements in your main view. These hidden elements will bind correctly like any other control in your main form.
Of course, you might be POSTing the form elements from your popup form to its own controller method directly, and that is also a perfectly good approach.
Related
As titled,
In my webpage, i have a jqgrid, and a button that will pop up a modal dialog that contains another jqgrid (displaying different data) on it. The problem is, the jqgrid on the modal dialog breaks the jqgrid on the page, like for example, if i set my jqgrid on the dialog to have no filter function, then it will cause the jqgrid's filter on the webpage to suddenly disappear.
Just want to know if anyone encounter such issues before?
By the way the webpage was created using Grails, so i'm not sure if this is related to Grails's resource issue or not.
It's difficult to help you because you don't posted your code. I can only to suppose that you could have id conflicts between the grid in modal dialog and the grids on the main page. I would suggest you to add idPrefix option with some non-empty unique value in the modal dialog. For example you can add idPrefix: "g1_" in the first grid and idPrefix: "g2_" in the second grid. Then the rows with ids "1", "2", "3" will be "g1_1", "g1_2", "g1_3" in the first grid and there will be "g2_1", "g2_2", "g2_3" in the second grid.
I am using the SkillBuilders Modal Page within my Oracle APEX application, i.e.
SkillBuilders Modal Page
to present the user with a tabular form, where they can enter specific values via select lists.
What I also have is validation based on another thread that I raised in Stackoverflow:
How to perform row by row validation on an Oracle APEX Tabular form using Ajax?
The problem that I am having is within my SkillBuilders Modal Page, I have some validation by where I want to make a call to jQueryUI dialog, in order to present the user a message. I do this by calling:
$('#dialogbox').dialog('open');
Unfortunately it doesn't actually seem to appear on screen and I believe it's something to do with the fact that I am trying to overlay a modal dialog over a modal page (skillbuilders modal plugin).
How can I solve this problem?
I am working on a help page which is composed of a navigation tree, content box, and search box. The navigation tree has links to Frequently Asked Questions and Glossary, each of which are linked to an Action which return partial views.
To the right of the navigation tree I have a single content div that I would like to contain whichever partial view is selected in the navigation tree.
Success case (what I want to accomplish): clicking on one of the FAQ links calls the FAQ() method in my controller, then returns a partial view which is then displayed in my content div to the right of the navigation tree. Clicking on another item would cause another partial view to be loaded.
How do I go about this? I've read a ton of ASP.NET MVC JQuery loading blog posts and tutorials but can't find anyone who's done exactly this.
Many thanks!
You should be able to use the jQuery method .load() to load HTML into your div.
http://api.jquery.com/load/
You can create an action that returns the partial view as HTML.
ASP.NET MVC Returning Partial View as a full View Page
jQuery:
one easy way you can do is load all partial views in "Container Div" at page load in one go (if performance is not a issue)
then assign each partial div with different div id inside "container", than use jquery to control show(); hide(); for each div.
MVC:
however if i were you, "Glossary" and "FAQ" looks same model to me it shouldn't be put in different partial view in first place.
if they did designed in separate model, in this scenario, i would recommend you to create a proxy class as a ViewModel above models you want to display, and then load it with one partial view only
I have 2 radio button with values New & Existing. If user chooses New, then I show a textbox on the form and if Existing a dropdown and textbox is hidden. The question is , does the hide/show of the textbox/dropdownlist have to be written in the View or the Controller class? Also when I choose the selection my whole form is posting back and hence all validation error msgs are being shown which should not be shown nless the save button is clicked, how do I a partial postback without full form submission? Any code snippets or urls would be benificial in this respect.
The question is , does the hide/show of the textbox/dropdownlist have to be written in the View or the Controller class?
Just show/hide with jQuery that.
Also when I choose the selection my whole form is posting back and hence all validation error msgs are being shown which should not be shown nless the save button is clicked, how do I a partial postback without full form submission? Any code snippets or urls would be benificial in this respect.
Perform 'partial postbacks' through javascript.
Post form to save action only once when it's ready (when Save button is clicked).
Some resources:
jQuery tutorial
jQuery AJAX
About form AJAX`ifying
If I understand you correctly, the answer is the hiding and showing of controls should be done on the view as it's display specific.
If you use javascript to show and hide the controls then because it's on the client side you would not have to postback the form, and could do server side validation when the save button is clicked.
jQuery is very good: Jquery Website
Hope that helps?
As an example, I have a table of items with edit buttons on each item:
I want to populate an edit form in a bootstrap modal as quickly, efficiently and as easily as possible.
Currently, I have tried populating via Javascript into a partial but this is a bit bulky and doesn't suit my needs when there are specific functions, varying inputs and different ways to input data. In some of my tables, the editing functions require 500+ lines of Javascript to calculate and process a bunch of different situations.
I've also tried generating a new modal partial for each item with partial Models but in larger tables with 1000+ items, this tends to lag the page quite a bit or take a significant time to load.
I need a way to quickly populate a modal with as little code as possible. Hopefully, I'd like a globalised way to do this for any given Model.
I also need the ability to populate the form action to do a variety of different things depending on the item.
I've heard that Ajax is a possible way to do this, but as I am relatively new to web development, I am not 100% sure how to do this.
What would be incredibly useful and would solve all my issues, is a way to render the modal AFTER loading of the page and on the input of an edit button.
So page renders -> you click edit on a given item -> it then renders the edit modal. Although I don't think this is possible.
This is just an example modal form:
Thanks
Currently, I have tried populating via Javascript into a partial but this is a bit bulky and doesn't suit my needs when there are specific functions, varying inputs and different ways to input data.
I've also tried generating a new modal partial for each item with partial Models
To display editing record in popup modal, we can achieve it either with JavaScript completely or mix using partial view.
If you do not want to generate/populate popup modal for editing row via 100% JavaScript client code, you can try:
1) when you click on edit button, make ajax request to controller action that accepts parameter Id of selected item
2) in that action, you can retrieve detailed and expected information of the item you want to edit based on Id, and the action would return a partial view
3) in partial view, you can render expected input fields based on your retrieved item information
4) in ajax success callback function, dynamically populate body of popup modal with returned data
Besides, this thread discussed rendering partial view as modal popup, you can refer to it.