Pass data from view to controller using AJAX in C# ASP.NET Core MVC

Question

I have tried looking at answers to similar questions and none of them work for my code. I have tried a lot of different things, all it should do is post the fullname and then display it back in the view. The view code:

    <script type="text/javascript">
        $(document).ready(function () {<script type="text/javascript">
        $(document).ready(function () {

$('#buttonDemo2').click(function () {
                var fullName = $('#fullName').val();
                var payload = {fn : fullName};
                $.ajax({
                    type: 'POST',
                    url: '/demo/demo2/',
                    contentType: 'application/json',
                    data: JSON.stringify(payLoad),
                    success: function (result) {
                        $('#result2').html(result);
                    }
                });
            });
</script>

<fieldset>
        <legend>Demo 2</legend>
        Full Name <input type="text" id="fullName" />
        <input type="button" value="Demo 2" id="buttonDemo2" />
        <br />
        <span id="result2"></span>
</fieldset>

The controller code:

 [HttpPost]
    public IActionResult Demo2(string fullName)
        {
            return new JsonResult("Hello " + fullName);
        }

No errors. It only returns back "Hello" but not whatever I typed in to the form added to the end of it. E.g. it's meant to say "Hello Bob". So the value is not ever arriving at the controller. — agent_smith1984
– agent_smith1984, Commented Sep 27, 2020 at 14:56

LouraQ · Accepted Answer · 2020-09-28 03:04:16Z

1

First, when you pass string by ajax to action,you should ensure the received parameter name is the same as the incoming parameter name.

So, you should change var payload = {fn : fullName}; to var payload = {fullName: fullName};, or change public IActionResult Demo2(string fullName) to public IActionResult Demo2(string fn).

Then, because you passed only a string not an object parameter , so you don't need to use JSON.stringify, and remove contentType: 'application/json' .

Here is the detailed code:

    <script type="text/javascript">
            $(document).ready(function () {

                $('#buttonDemo2').click(function () {
                    var fullName = $('#fullName').val();
                    var payload = { fullName: fullName }; // change name
                    $.ajax({
                        type: 'POST',
                        url: '/demo/demo2/',
                       // contentType: 'application/json', // remove this line
                        data: payload, //remove JSON.stringify
                        success: function (result) {
                            $('#result2').html(result);
                        }
                    });
                });
            });
    </script> 
<fieldset>
    <legend>Demo 2</legend>
    Full Name <input type="text" id="fullName" />
    <input type="button" value="Demo 2" id="buttonDemo2" />
    <br />
    <span id="result2"></span>
</fieldset>

Controller:

 [HttpPost]
        public IActionResult Demo2(string fullName)
        {
            return new JsonResult("Hello " + fullName);
        }

Here is the test result:

answered Sep 28, 2020 at 3:04

LouraQ

6,9312 gold badges9 silver badges20 bronze badges

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

1 Comment

agent_smith1984 Over a year ago

You Sir are a genius! Thank you so much! Yes I think the main issue was the var payload = {fn : fullName}; where the "fn" didn't match "fullName" in the controller method. You have no idea how much frustration you've saved me. Thank you a million times!

Collectives™ on Stack Overflow

Pass data from view to controller using AJAX in C# ASP.NET Core MVC

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related