Asp.Net-Core pass JavaScript function to partial view

Question

Using asp.net-core I made a "PopUp.cshtml" file:

<div class="popUpDeleteBackground" hidden>
    <div class="popUpDelete">
        <h3>Are you sure you want to delete this?</h3>
        <p>This action is irreversible</p>
        <div class="popUpDeleteButtonDiv">
            <button class="btn deleteConfirm">JA</button>
            <button class="btn" onclick="PopUpRemove()">NEE</button>
        </div>
    </div>
</div>
<script>
    function PopUpShow(licensePlate) {
        $(".popUpDeleteBackground").attr("hidden", false);

        $(".deleteConfirm").on("click", () => {
            Delete(licensePlate);
            PopUpRemove();
        });
    }
    function PopUpRemove() {
        $(".popUpDeleteBackground").attr("hidden", true);
    }
</script>

I want this popup partial to be used in multiple pages of the website. The problem is that the delete functions are different for each page.
So my question is: Is there a way to pass a JavaScript function to a partial view?

What I've tried so far is passing a string with @await Html.PartialAsync("_ConfirmPopUp", "functionToRun()"); and then tried to run it with <script>@Model</script>.
But I got an error message in the console saying: "Uncaught SyntaxError: Unexpected token '&'".

Md Rahatur Rahman · Accepted Answer · 2021-11-17 14:56:26Z

1

You are passing functionToRun() as a string to the Model of the view. Instead just pass the name of the function without the parenthesis - functionToRun.

Then in the code dont write <script>@Model</script>. Instead just put the name of the calling function dynamically when the page loads like this:

<script>
    function PopUpShow(licensePlate) {
        $(".popUpDeleteBackground").attr("hidden", false);

        $(".deleteConfirm").on("click", () => {
            //Delete(licensePlate);
            @string.Format("{0}();", Model)
            PopUpRemove();
        });
    }
    function PopUpRemove() {
        $(".popUpDeleteBackground").attr("hidden", true);
    }
</script>

This will render the name of the function that would be called on click of the .deleteConfirm element. Note the @string.Format("{0}();", Model) code instead of the Delete function call.

edited Nov 17, 2021 at 14:56

answered Nov 17, 2021 at 14:27

Md Rahatur Rahman

3,2763 gold badges37 silver badges51 bronze badges

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

2 Comments

Samball Over a year ago

I get the error "Uncaught SyntaxError: Unexpected token '<'" when using <text>@Model + "();"</text>.

Md Rahatur Rahman Over a year ago

I have updated the code. This is a cleaner version and less error-prone.

Collectives™ on Stack Overflow

Asp.Net-Core pass JavaScript function to partial view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related