Passing data to controller in ASP.NET MVC using C#

Question

What am I doing wrong?

I want to pass Id to the controller where I can use it.

My controller

[HttpGet]
public ActionResult ListCoach(int id)
{
    List<Training> ListCoachTraining = _TraningService.ListCoach(id);
    var ChoachList = _TraningService.Coach(id);
    return View(ChoachList);
}

My view - what is correct way call the script? It doesn't work right now:

 <div class="container">
        <div class="row">
            @foreach (var item in Model)
            {
                <div class="col-md-4">
                    <div class="card" style="width: 18rem;">
                        <img src="~/Content/no_foto.png" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">@item.Name</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <div id="textButton">
                                <a href="~/TrainingType/ListCoach" id="btnSave" class="btn btn-primary">Go to anywhere</a>
                                <a id="btnSave" class="btn btn-primary">Go to anywhere</a>
                                <input class="btn btn-primary" type="button" id="btnSave" value="Save" />
                            </div> 
                        </div>
                    </div>
                </div>
                }
        </div>
    </div>
//call the script
<script src="@Url.Content("~/scripts/ManagerAccount.js")" type="text/javascript"></script>

My script - I use Ajax for it. There I want to pass id to the controller:

function PassToContoller(data) {
    $("#btnSave").click(function () {

        $.ajax({
            type: "Get",
            url: '/TrainingType/ListCoach',
            data: { id: data },
            success: function (data) {
                window.location.href = '/appUser/ManageAccount';
                //return data;
            },
            error: function () {
                $("#loader").fadeOut("slow");
                console.log("error1");
            }
        });
    });
};

How are you routing to the ListCoach method? did you define proper routing? $.ajax(: type:"GET", (get is capital not sure if it makes a difference) — vaira
– vaira, Commented Sep 7, 2021 at 1:19
Would you kindly share your Training class defination. So that it can be reporduce accordingly. — Md Farid Uddin Kiron
– Md Farid Uddin Kiron, Commented Sep 7, 2021 at 1:30
yes exectly it was mistake I edit rout but it dosent work correct route: url: '/TrainingType/ListCoach', — Boris
– Boris, Commented Sep 7, 2021 at 1:31
Please have a try the solution on Update with Comment Can I do without? part which has the solution of your last comment. Every way has been shown now it's your choice which one you would implement. — Md Farid Uddin Kiron
– Md Farid Uddin Kiron, Commented Sep 7, 2021 at 7:43

Md Farid Uddin Kiron · Accepted Answer · 2021-09-07 07:41:53Z

You haven't call the function accordingly. You are expecting your PassToContoller function should invoke while you click on save in your case either you have to call this function with btnSave onlick or onClick="PassToContoller(@item.Name)"

I am showing you both here:

When onClick="PassToContoller(@item.Name)" In Line:

Razor HTML

<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    @*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*@
                    <div class="card-body">
                        <h5 class="card-title">@item.Name</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div id="textButton">
                            <a href="~/TrainingType/ListCoach" id="btnSave" class="btn btn-primary">Go to anywhere</a>
                            <a id="btnSave" class="btn btn-primary">Go to anywhere</a>
                            <input class="btn btn-primary" type="button" id="btnSave" onClick="PassToContoller(@item.Name)" value="Save"  />
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Script:

<script>
    function PassToContoller(data) {
        alert(data);
        $.ajax({
            type: "GET",
            url: '/ListCoachController/ListCoach',
            data: { id: data },
            success: function (data) {
                console.log(data);
                window.location.href = '/appUser/ManageAccount';
                return data;
            },
            error: function () {
                $("#loader").fadeOut("slow");
                console.log("error1");
            }
        });
    }
</script>

Output:

Aother way btnSave Onlick:

In this you need few modifications:

Need to introduce a input type text which will be hidden it will contrain a value like this <input type="text" id="getValue" value="@item.Name" hidden /> and will pass that hidden value when you would click the button.

Another thing is your btnSave seems you have used same for other button as well so your onclick function will getConfused which event to fired. So need to set unique btn id Now rest of the same like below:

Razor HTML

<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    @*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*@
                    <div class="card-body">
                        <h5 class="card-title">@item.Name</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div id="textButton">
                            <a href="~/TrainingType/ListCoach" id="btnSave" class="btn btn-primary">Go to anywhere</a>
                            <a id="btnSave" class="btn btn-primary">Go to anywhere</a>
                            <input class="btn btn-primary" type="button" id="btnNewSave" value="Save" />
                            <input type="text" id="getValue" value="@item.Name" hidden />
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Script:

@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#btnNewSave").click(function () {
                var data = $("#getValue").val();
                $.ajax({
                    type: "GET",
                    url: '/ListCoachController/AnotherListCoach',
                    data: { id: data },
                    success: function (data) {
                        console.log(data);
                        window.location.href = '/appUser/ManageAccount';
                        return data;
                    },
                    error: function () {
                        $("#loader").fadeOut("slow");
                        console.log("error1");
                    }
                });
            });
        });
    </script>
}

Update: Based on your new requirement on comment you just need to update your HTML like below:

<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    @*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*@
                    <div class="card-body">
                        <h5 class="card-title">@item.Name</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div id="textButton">
                            <a href="~/TrainingType/ListCoach"  class="btn btn-primary" onClick="PassToContoller(@item.Name)">Go to anywhere</a>
                            <a  class="btn btn-primary" onClick="PassToContoller(@item.Name)">Go to anywhere</a>
                            <input class="btn btn-primary" type="button" onClick="PassToContoller(@item.Name)" value="Save" />
                            <input type="text" id="getValue" value="@item.Name" hidden />
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Note: You have to get rid of id="btnSave" from all the <a> and <button> and need to replace with onClick="PassToContoller(@item.Name)" it will pass all of your value. No matter how many cycle you have.

Update with Comment Can I do without?:

HTML:

<div class="container">
    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4">
                <div class="card" style="width: 18rem;">
                    @*<img src="~/Content/no_foto.png" class="card-img-top" alt="...">*@
                    <div class="card-body">
                        <h5 class="card-title">@item.Name</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <div id="textButton">
                            <a href="#"  class="btn btn-primary" >Go to anywhere</a>
                            <a  class="btn btn-primary">Go to anywhere</a>
                            <input class="btn btn-primary" type="button"  value="Save" />
                            <input type="text" id="getValue" value="@item.Name" hidden />
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

Script:

 @section scripts {
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
        <script>
            function PassToContoller(data) {
                alert(data);
                $.ajax({
                    type: "GET",
                    url: '/UserLog/AnotherListCoach',
                    data: { id: data },
                    success: function (data) {
                        console.log(data);
                        window.location.href = '/appUser/ManageAccount';
                        return data;
                    },
                    error: function () {
                        $("#loader").fadeOut("slow");
                        console.log("error1");
                    }
                });
            }
            $(document).ready(function () {
               
                $("a").click(function () {
                    var data = $("#getValue").val();
                    var callFunc = PassToContoller(data)
                });
                $(":button").click(function () {
                    var data = $("#getValue").val();
                    var callFunc = PassToContoller(data)
                });
                
            });
        </script>
    }

Hope it would guide you accordingly. You can used either of the approach.

Thank you sir it worked. But I dont get it. I have cycle For where I get six or ten value ` <input class="btn btn-primary" type="button" id="btnNewSave" value="Save" />` this's won't work if I choose second or third card
Which approach you are adapting? I have seen you had on item only which is @item.Name?
Did you mean whichever button been clicked you want to call the same function is it?
Yes possible in that need to set your button id dynamically which is diffrent issue, but here your main question were how to invoke that function I mostly focus on that.

Le Vu · Accepted Answer · 2021-09-07 01:33:26Z

0

With GET method, you should pass the data via query string /TrainingType/ListCoach?id=1

In ASP.NET MVC, we have default route template is {Controller}/{Action}/{id} So, alternative we can use this URL /TrainingType/ListCoach/1

answered Sep 7, 2021 at 1:33

Le Vu

4373 silver badges13 bronze badges

3 Comments

Boris Over a year ago

if I change GEt to POST. can I use Jquery for passing data to controller?

Md Farid Uddin Kiron Over a year ago

You can use either of it, I am showing you the way.

Le Vu Over a year ago

@Boris: Could you check the value of data? If it contains non-digit characters, the id in action unable to binding because its data type is int.

Collectives™ on Stack Overflow

Passing data to controller in ASP.NET MVC using C#

2 Answers 2

8 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related