How to pass data from a modal button toggle to a modal window-CodePudding

I have a button which toggles a modal window i would like the button to get the current Model.ID of it item that the button is attached to then pass that Model.ID into the window i would like to do this without using JavaScript.

At the moment the first Model.ID out of all of them is passed in but i want the current one

To do this would i need to put the modal toggle in a form with Method GET then post the data back to a partial view inside the modal window.

HTML Code

<button type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop2" >Modal</button>

<div  id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div >
        <div >
            <div >
                <h1  id="staticBackdropLabel">Delete</h1>
                <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div >
                Are you sure that you want to delete @Model.ID this action cannot be reversed
            </div>
            <div >
                <div>
                    <form action="@Url.Action("DeleteLesson","Lesson", new{ID = Model.ID})" method="post">
                        <button type="button"  data-bs-dismiss="modal">Cancel</button>
                        <button type="submit"  value="Delete">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

CodePudding user response：

The data entered the input fields are extracted using the ids of the respective fields using the jQuery val() method. Next the data obtained from the input fields are concatenated into a string. This string is passed to the modal body using the html() method of jQuery.

CodePudding user response：

You can specify some custom parameter for your button, like

<button type="button" data-bs-toggle="modal" something="@Model.ID" data-bs-target="#staticBackdrop2" >Modal</button>

<div  id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div >
        <div >
            <div >
                <h1  id="staticBackdropLabel">Delete</h1>
                <button type="button"  data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div >
                Are you sure that you want to delete @Model.ID this action cannot be reversed
            </div>
            <div >
                <div>
                    <form action="@Url.Action("DeleteLesson","Lesson", new{ID = Model.ID})" method="post">
                        <button type="button"  data-bs-dismiss="modal">Cancel</button>
                        <button type="submit"  value="Delete">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Now, at the event that opens the modal, you will have to find the referrer, which is the button. Its something attribute should hold your model's id.