How to call a function from button in .NET Core Razor page

Question

I want the user to be able to generate new input fields by the click of a button given a situation where the user would want to add additional information. It should also be possible to pass the amount of input fields to generate.

@{
Func<int, object> genInput =@<div class="generated">
    @{
        for (int i = 0; i < item; i++)
        {
            <input id="generatedInput[@i]" />
        }
    }
</div>;

@genInput(4);
<input id="amount" type="text" placeholder="Number of inputs to create"/>
<input type="button" onclick="genInput" />
}

I have created the function, but I don't know how to call it using the button or how to pass the amount of inputs to generate from the amount input along with it.

Sondre · Accepted Answer · 2020-05-28 05:10:57Z

1

I have created the function, but I don't know how to call it using the button or how to pass the amount of inputs to generate from the amount input along with it.

You can not call the razor function from HTML by a button click, just do what you did like @genInput(4); is correct.

To meet your requirement, I suggest that you could do this by using Jquery.

As a workaround,here is the working demo:

@{
    Func<int, object> genInput =@<div class="generated">
        @{
            for (int i = 0; i < item; i++)
            {
                <input id="generatedInput[@i]" />
            }
        }
    </div>;

@genInput(4);
}

<input id="amount" type="text" placeholder="Number of inputs to create" />
<input type="button" onclick="add()" value="Create" />
<div id="new_chq"></div>
<input type="hidden" value="3" id="total_chq">

@section Scripts{
    <script>
        function add() {
            var amount = $("#amount").val();
            for (i = 0; i < parseInt(amount); i++) {
                var new_chq_no = parseInt($('#total_chq').val()) + 1;
                var new_input = "<input id='generatedInput[" + new_chq_no + "]' />";
                $('#new_chq').append(new_input);
                $('#total_chq').val(new_chq_no);
            }   
            $('#new_chq').append("<br/>");        
        }
    </script>
}

Result:

edited May 28, 2020 at 5:10

Sondre

1052 silver badges13 bronze badges

answered May 13, 2020 at 7:10

Rena

37.2k7 gold badges50 silver badges93 bronze badges

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

5 Comments

Sondre Over a year ago

Impressive answer(very helpful with the gif), however this does not solve my problem. As I understand it your code does not use the Razor-code, but simply recreates it in jQuery. This is a problem as I created the question to simplify my actual problem that requires the use of the model. The easiest solution as I now see it, would be to create a JavaScript object out of the relevant parts of the model and generate the HTML using JavaScript. Unless there is a way for the user to generate HTML using Razor-engine. The annoying part here is that I would have to specify where to generate it.

Rena Over a year ago

No,you can't.You could only call the genInput manually like what you did.From your requirement,you could just use js to meet your requirement.

Rena Over a year ago

If my answer helped you,could you please accept as answer?

Sondre Over a year ago

If you add the information that you CAN'T call a Razor function from HTML to your answer, I will mark your answer as having resolved my problem. If you add a comment to your code suggestion below the razor that says: Recreating Razor with jQuery(or something similar) I will also upvote your answer.

Rena Over a year ago

Please check my answer.

Collectives™ on Stack Overflow

How to call a function from button in .NET Core Razor page

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related