Pass routing value to Html.BeginForm using javascript

Question

I currently have panels and each panel has an ID associated with it which is held in the data-id attribute of each panel. I can get this easily through JavaScript. One the panels I have a delete button which will delete the panel and it's entry within the database. Once this delete button is clicked, a modal will fire up with a Html.BeginForm() which is hooked up to an action on my controller. I was wondering if it was possible to add an the widget ID to the routing values via JavaScript?

Here is my modal:

<div class="modal fade" id="deleteWidgetModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Delete widget?</h4><!--add depending on which panel you have clicked-->
        </div>
        <div class="modal-body" id="myModalBody">
            <!--Depending on which panel insert content-->
            @using (Html.BeginForm("DeleteWidgetConfirmed", "Dashboard", FormMethod.Post,))
            {
                @Html.AntiForgeryToken()

                <div class="form-horizontal">
                    Do you wish to delete this widget?

                    <div class="form-group">
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            <button type="submit" value="DeleteWidgetConfirmed" class="btn btn-danger btn-ok" id="delete-widget">Delete</button>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

and here is the JavaScript:

    /*---------------------------------------------DELETING PANELS-------------------------------------------------*/
$(document).ready(function () {
    $('#columns').on('click', '.glyphicon.glyphicon-trash', function (event) {
        //get id here

        //toggle the modal
        $('#deleteWidgetModal').modal('toggle');

        //pass id to form
    });
});

$(document).ready(function () {
    document.getElementById('#delete-widget').onclick = function (event) {
        event.preventDefault();

        var parentElement = $(this).closest(".col-md-4.column");
        var targetElement = $(this).closest(".panel.panel-default");
        targetElement.remove();

        //parentElement.addClass("expand-panel");
        checkEmptyPanelContainers();
    }
});

can you put some code that helps to understand your need ?

Kaushik Thanki
– Kaushik Thanki

2015-06-02 15:04:53 +00:00
Commented Jun 2, 2015 at 15:04 — Kaushik Thanki
– Kaushik Thanki, Commented Jun 2, 2015 at 15:04

pollirrata · Accepted Answer · 2015-06-02 15:07:26Z

1

Html.BeginForm is transformed into a <form> tag before your javascript and user interaction is executed. You can modify that form using something like this

$("form").prop('myattribute', value)

answered Jun 2, 2015 at 15:07

pollirrata

5,2942 gold badges35 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Johnathon64 Over a year ago

do you know what myattribute would be in my case? for route value?

Basic Over a year ago

@Johnathon64 HTML Doesn't have a concept of routes/MVC. What you need to do is set the Action on the form. I'd suggest you use server-side code to output a sample route with known values, then substitute actual values in JS. Of course, if you're using multiple routes/need multiple styles you'd need to do each type individually which is less than ideal

user326608 Over a year ago

action is the name of the property on the form tag

Collectives™ on Stack Overflow

Pass routing value to Html.BeginForm using javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related