I need to delete a record using standard routing and redirect to a separate page. The link needs to be within a turbo frame and have a confirmation message. I'm using rails 7 and would expect the following to work;
# _form.html.slim
<%= turbo_frame_tag 'frame' do %>
<%= link_to "Delete", url_for(writable), data: { turbo_target: "_top", turbo_method: :delete, turbo_confirm: 'Are you sure?' }, class: "button" %>
<% end %>
# records_controller.rb
def destroy
#record = Record.find(params[:id])
#record.destroy
redirect_to records_path, status: :see_other
end
When pressed, the confirm dialog does appear and, when confirmed, the record is deleted.
However the frame content then disappears resulting in the standard turbo.es2017-esm.js:3060 Response has no matching <turbo-frame id="frame"> element error. This suggests to me that the system isn't able to escape the turbo frame (which I thought would be handled turbo_target: "_top".
Here is the rendered HTML of the link:
<a data-turbo-target="_top" data-turbo-method="delete" data-turbo-confirm="Are you sure?" class="button" href="/events/aff7ec0e-eeea-4d5c-bd4a-f81f79b70c6b">Delete</a>
How can I ensure that the user is correctly redirected out of the frame and to a separate page?
Related
Im manually Creating the table using the built in razor GETHtml Function.
#table.GetHtml(
columns: table.Columns(
table.Column("Account"),
table.Column("Due"),
table.Column("Topic"),
table.Column("Type"),
table.Column("Completed?", format: #<input id="Complete" name="Complete" type="checkbox" onclick="/Tasks/Complete?ID=700" />)
)
)
What I want is a way of clicking a checkbox, or button to activate the controller. it is not accepting Dynamic checkbox. Nor does the html checkbox do anything.
I Have a working solution without using forms, the column would be set using the following code:
table.Column("Completed?", format: #<input type="checkbox" onclick="location.href='#Url.Action("Complete", "Tasks", new { TaskID = item.TaskID })'" />
I think its possible that having the name property was causing it to post it as a parameter, rather than treat it as a submit.
Otherwise it must ahve been the onclick event. Ive used location.href, then set it using razor syntax, and included the id as a property.
Couple of ways to go about performing a post to your desired controller. Wrap your table with the form you would like to submit or add a few AJAX handlers to post the data you desire. A simple form could be accomplished like:
<% using (Html.BeginForm<SomeController>(x=> x.SomeAction())
{
#table.GetHtml(
columns: table.Columns(
table.Column("Account"),
table.Column("Due"),
table.Column("Topic"),
table.Column("Type"),
table.Column("Completed?", format: #<input id="Complete" name="Complete" type="submit" " />)
)
)
}
I am rendering a parital view which has a submit button with HttpPost action in controller. This action method needs parent model as its parameter. Is there any way to send parent model as first parameter from inside a partial view?
Main view -> aspx file which has model as ParentModel
Partial view -> ascx file which has model as ParentModel.ChildModel
Controller action -> MyActionName(ParentModel model, int direction, int user)
If I keep the method as HttpPost then by default Parent model gets passed but then I cannot send 2nd and 3rd parameter as their values are decided at run time and these are not childmodel properties. e.g. direction parameter which indicates if user has clicked next/prev button. In this case, next and prev buttons call same action method (MultipleAction submit)
Additional info: My parent model has a collection of child model. I am looping through this collection and calling RenderPartial for each item. So, I cannot pass this parent model directly to my partial view (which is default behavior).
Any suggestions please? Thanks..
You could wrap all those partials into a HTML <form> so that all values get submitted too the server when this form is posted:
<% using (Html.BeginForm()) { %>
<%= Html.TextBoxFor(x => x.SomePropertyOfParent) %>
<%= Html.TextBoxFor(x => x.SomeOtherPropertyOfParent) %>
<%= Html.EditorFor(x => x.Children) %>
<input type="submit" value="OK" />
<% } %>
I use an editor template instead of partials for the Children collection. The custom editor template will automatically be rendered for each element of this children collection and provide any input fields allowing to modify it.
Then when the form is finally submitted all the properties required by the model binder to reconstruct the ParentModel will be sent to the server. As far as the direction and user parameters are concerned I would make them part of the parent view model so that my POST controller action looks like this:
[HttpPost]
public ActionResult MyActionName(ParentViewModel model)
{
...
}
I created a dropdown like this:
<%= Html.DropDownList("Nick") %>
When a user selects an item I wanna send the text of the item back to a controller Action. I am guessin I add the same name of the the get controller with an [HTTPPOST] attribute, but how do I pass the selected item text into the controller?
I want this 2 happen in 2 scenerios
-When a user selects an item
-Add a button to the html (im not sure the best way??) and when a user clicks the button
the dropdowns selected text is sent.
I am populating the dropdown from ViewData["items"] i populated in the controller.
You need a form. You need to populate the drop down. And if you want the form to be sent as soon as the item is selected, you need half a line of javascript.
<% using (Html.BeginForm()) { %>
<%: Html.DropDownList("nick",
new SelectList[] { new[] { "hello", "world", "wazza" } },
new { #onchange = "this.form.submit()" })%>
<% } %>
You may also want your controller to receive a value rather than the text in the list option. See the SelectList class for more details.
Have your form submit to this action.
public ActionResult MyAction(string nick)
{
//do stuff
}
I have a form with multiple submit buttons:
using(Ajax.BeginForm("Submit", "myController", new AjaxOptions { HttpMethod = "Post" }))
{ %>
<button type="submit" name="submitType" value="submit_a">a</button>
<button type="submit" name="submitType" value="submit_b">b</button>
<% } %>
The controller method is as follows:
[Authorize, HandleError, HttpPost]
public ActionResult Submit(string submitType)
{
//placeholder
}
With IE (js on or off) the buttons post back with their respective submitType value, however with Chrome and FireFox submitType is null (when js is on, it's fine when js is off)
Does anyone know how I can fix this behaviour please?
(Please note I need to use the Ajax form as it does partial postbacks/updates)
Crap, the previous developer had placed the BeginForm() tags in invalid places (start of form tag in the middle of a div, end of form tag in an entirely seperate div) and whilst VS didn't throw any errors, it resulted in an invalid markup, which caused FireFox and Chrome to ignore and not return the submit value!
Once I corrected the tag positions it started working correctly.
I'm trying to do an Ajax delete in a fairly standard Index view, i.e. I have a generated Index view with one added filter drop-down, of little relevance here. I have changed the free Delete Html.ActionLink on every row to an Ajax.ActionLink, and the delete and ajax update work, but whichever container div I try and update, I always somehow get some kind of nesting in the updated page, e.g. after a delete and update, I get duplicate Home and About links from the master page inside my content.
Here is my current action link that causes what I describe above:
<%: Ajax.ActionLink("Delete", "Delete", new { id = item.InstallationDBNumber }, new AjaxOptions { UpdateTargetId = "jobList" }) %>
... and here is where jobList is located, just outside the table used for the index list:
<div style="clear: both;">
</div>
<div id="jobList" class="index-list">
<table>
<tr>
You should post your code for your Delete action method on your controller. But from the sounds of it, you are returning Return View(myModel) instead of Return PartialView("partialViewName", myModel).
Create a partial view contianing the layout information for jobList and return that from your controller action method.