I'm building an MVC3 application and would like to have a form with a dropdown list, and if the option the user requires is not there, then they can click on a link to open a modal popup box, fill a different form out, submit it and close the form, and repopulate the dropdown list which will contain the option they have just added.
I've looked at options of using either jQuery Ajax or MVC Ajax (e.g. Ajax.BeginForm, Ajax.ActionLink). Can anyone recommend the best one to use, and also point me in the direction of a good tutorial? Been having a good look today but can't find anything that really does what I'm looking for.
Thanks
I typically use jQuery in these situations. In this case I would use .ajax() post to perform the form's action. I would then add a handler in the .ajax()'s success event to add my new item to the dropdown using append, example minus all properties except for success handler:
$.ajax({
success: function() {$(myDropDown).append(theNewListItem);}
});
You can generate theNewListItem by having it created and returned from the server in the ajax call, or simly build it using the current form values, assuming the values have been validated.
Related
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.
I'm trying to build a fairly complex form which as a couple of cascading selects - i.e. the user selects a value in one combo and the other combo is populated according to their first selection.
I've followed a tutorial on how to handle the cascading but the problem I have is that I now have nested forms (the code in the tutorial uses forms inside partial views to POST to a controller action to load the 2nd combo). I have my main form on which I want to collect the input values but also the nexted forms for the cascading select boxes. The problem I have is that the cascading selection doesn't post to the correct controller action, but instead posts to my main (outer) form's action.
I understand this is the correct behaviour for a browser (as nested forms apparently aren't supported) but what's the correct way to implement this?
The correct way is to only have one form. Then use AJAX to populate the cascading drop down list. The are 100s of examples online how to do this with JSON
use this to have multiple submit buttons on one form which each have different controller actions to post to:
http://iwayneo.blogspot.co.uk/2013/10/aspnet-mvc-action-selector-with-list.html
as for cascading stuff - i would focus on populating these without Ajax 1st - then you can worry about adding this sort of flare - if it doesn't work without JS anyway you're in a bad place.
I would have the 1st dropdown populated when you initially load the form and have a "next" button to populate the next dropdown in the cascade. this submit can use the method above to post to an action which then populates the second data set based on the selection of the 1st dropdown.
make sense?
Then how you ajax that after the point is up to you but you'll have a very solid foundation to build up stuff like that as you will have it working in the minimal tech scenario.
w://
I have a page with several forms on one page. I have a button (outside all forms) that I want to submit only ONE form, but all form data is getting submitted from all forms.
$("#indiv_save").click( function() {
alert($("#indiv_form").serialize()); // Shows only correct form
$.post("/admin/update", $("#indiv_form").serialize(), function(data) {
notify(data); // quick and easy feedback
});
});
The alert() call shows exactly what I want to submit, but then Firebug shows fields being submitted from all forms after the .post(), even though the serialize() function is identical.
All forms have different names and element ids.
What am I doing wrong?
You are making an ajax POST and returning. Depending on your button, it's going to attempt to submit the page's forms. What you need to do is prevent the default action:
$('#indiv_save').click(function(e)
{
e.preventDefault();
// Your Code Here
});
The default action for your button is probably "submit the form", and you are not preventing it.
Return false from your click function should do it.
The forms can't be inside a single all encompassing <form> tag, they have to be separated out in individual <form>'s instead.
Currently, a spring application I am working on has several wizards that it is using with Spring's AbstractWizardFormController. During the early stages of development(pre-design phase), the type of "next" button did not matter.
Just to refresh, the Next and Back button are submit buttons with target attributes. So a next button on the first page of a wizard would look like the following.
<input type="submit" name="_target1" value="Next"/>
This is the standard way Spring does wizards on the view. This works fine, given that you want your Next button to be a standard HTML submit button. Otherwise, in my case, If I want a custom button, I am not sure how to do this. I know it is possible, but haven't found any documentation.
I imagine I will need to do a javascript submit, but I am not sure how to set the name of the button, of if something else needs to be done.
I just need to know how I can still extend AbstractWizardFormController, and use custom buttons.
When clicked, HTML submit button submits a form with additional parameter {name}={value}, that is _target1=Next. I guess the value doesn't matter here, controller looks at the name. So, if you want to emulate this with Javascript, you may, for example, dynamically add a hidden field with name = "_target1" before submit.
I'm using the jQuery Form plugin and more specifically the ajaxForm method to hijack a normal form and post it using ajax. I have a form with lots of rows. Each row has edit and delete options and each section has an add option. Hijacking the form I can work out on the server whether to add, edit or delete but would like the ability to know which button was pressed in the success method back in my JS. Is this possible?
I know there are two params: responseText and statusText and that I can work out the button type in beforeSubmit but I need it when the data is returned which button has been pressed. The reason is that I want to display a form in a light box for edit and add but for delete I want to do something different. It seems a bit naff to check the data coming back to look for a certain string (not to mention flakey and unmaintainable).
Anyone know of a simple solution?
Look at the beforeSubmit option: it's a function that will get called, well, before submit. More importantly, it provides the data. You could look at the data and set a flag that would then be used within the success function. This isn't beautiful, but better than being coupled to the server's behavior.
In this situation, I have often just created two different forms-- one for update and one for delete. Then, instrument them separately.