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

bigbear
 
on May 26, 2022 11:09 PM
1020 Views

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

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