ASP.Net Core MVC: Pass RadioButton selected value to Controller using jQuery AJAX

bigbear
 
on May 26, 2022 11:09 PM
2109 Views
Answered

I really feel like this should be easy but I’m thinking it may have changed with .Net 6.

I can pass values to my controller with the input “name=’name’” but for some reason I cannot get any values from my model into my controller.

I am trying to POST my row values to the controller. I am using an enumerable. I’m not sure if I should be using a or not. Another thing is how should I be populating my table row from a loop of the model.

I thought using @Html. Was for older .net and tag helpers are the new way but I couldn’t get any to work populating my rows.

    <form method="post">
        <div id="tblPullParts" class="container justify-content-center mt-3">
       
            <table class="table table-striped">
           
                <thead>
                    <tr>
                        <th></th>
                        <th >Order #</th>
                        <th >Item</th>
                        <th >Description</th>
                        <th >Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var p in Model)
                    {
                        <tr>
                            <td><input type="radio" id="radio" name="radio"
                                value="@Html.DisplayFor(item => p.PartID)" /></td>
                            @*<td><input asp-for="Selected" type="radio" value="Selected" /></td>*@
                            <th scope="row">@Html.DisplayFor(item => p.PartID)</th>
                            <td>@Html.DisplayFor(item => p.Name)</td>
                            <td>@Html.DisplayFor(item => p.ItemLocation)</td>
                            <td>@Html.DisplayFor(item => p.PartGroup)</td>
                            <td>@Html.DisplayFor(item => p.Description)</td>
                            <td>
                                <input type="text" asp-for="@p.Name" id="txtNameN" />
                            </td>
                        </tr>
                    }
                    
                </tbody>

            </table>         
            @*<input type="text" id="@Model[0].Name" />*@
            <input type="text" id="txtName" name="txtName" value="" />
        </div>
        <div class="text-center">
            <button type="submit" class="btn btn-lg btn-success mt-3">Start Pick</button>

        </div>
     </form>

 

        [HttpPost]
        public async Task<IActionResult> Index( PartVM model, string radio, string txtName)
        {
            
            if (model?.PartID != 0)
            {
                return View("UpdatePickQuantity", model);
            }

            if (!String.IsNullOrWhiteSpace(txtName))
            {

            }

            //Request.QueryString["radio"];
            var lstParts = await _ordersService.GetAllParts();

            return View(lstParts);
        }

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on May 27, 2022 05:52 AM
on May 27, 2022 05:57 AM
Answer

Hi bigbear,

You need to make ajax call to passs the model value to Controller.

Refer below example.

Controller

public class CustomerModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Country { get; set; }
    public string Gender { get; set; }
}

Controller

public class HomeController : Controller
{
    public IActionResult Index()
    {
        List<CustomerModel> customers = new List<CustomerModel>();
        customers.Add(new CustomerModel { Id = 1, Name = "John Hammond", Country = "United States", Gender = "Male" });
        customers.Add(new CustomerModel { Id = 2, Name = "Mudassar Khan", Country = "India", Gender = "Male" });
        customers.Add(new CustomerModel { Id = 3, Name = "Suzanne Mathews", Country = "France", Gender = "Female" });
        customers.Add(new CustomerModel { Id = 4, Name = "Robert Schidner", Country = "Russia", Gender = "Male" });
        return View(customers);
    }

    [HttpPost]
    public IActionResult Index(CustomerModel model)
    {
        if (model?.Id != 0)
        {
            return View("UpdatePickQuantity", model);
        }

        return View();
    }
}

View

@model List<RadioButton_Model_Core_MVC.Models.CustomerModel>
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

</head>
<body>
    <form>
        <div id="tblPullParts" class="container justify-content-center mt-3">
            <table id="tblCustomers" class="table table-striped">
                <thead>
                    <tr>
                        <th></th>
                        <th>Id</th>
                        <th>Name</th>
                        <th>Country</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var customer in Model)
                    {
                        <tr>
                            <td>
                                <input id="@customer.Id" type="radio" name="customer" value="@customer.Id" />
                                <label for="@customer.Id">@customer.Gender</label>
                            </td>
                            <td>@Html.DisplayFor(item => customer.Id)</td>
                            <td>@Html.DisplayFor(item => customer.Name)</td>
                            <td>@Html.DisplayFor(item => customer.Country)</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <div class="text-center">
            <button id="btnSubmit" type="button" class="btn btn-lg btn-success mt-3">Start Pick</button>
        </div>
    </form>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("body").on("click", "#btnSubmit", function () {
                var customer = {};
                $("#tblCustomers TBODY TR").each(function () {
                    var row = $(this);
                    if (row.find("input[type=radio]").attr('checked') == "checked") {
                        customer.Name = row.find("TD").eq(2).html();
                        customer.Country = row.find("TD").eq(3).html();
                    }
                });

                $.ajax({
                    type: "POST",
                    url: "/Home/Index",
                    data: { model: customer },
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (r) {
                        alert(r + " record(s) inserted.");
                    }
                });
            });
        });
    </script>
</body>
</html>

Screenshots

The Form

Value in Controller

Disclaimer
This site is started with intent to serve the ASP.Net Community by providing forums (question-answer) site where people can help each other. The content posted here is free for public and is the content of its poster. The site does not provide any warranties for the posted content. If you feel any content is violating any terms please contact.
© 2023 www.aspsnippets.com All rights reserved | Privacy Policy | Powered by Excelasoft Solutions Excelasoft Solutions