Filter Table inside bootstrap modal popup based on DropDownList in ASP.Net MVC

nabilabolo
 
on Aug 06, 2021 03:41 AM
1448 Views

Hi,

I have 3 dropdown which the value of those 3 dropdowns will be use to determined which option do i need to suggest to user in the modal popup.

 in the modal popup, i have checkbox, which after user choose their selection, the choices will be display in the table as shown in the image.

i already done on View part, but i don't know how to pass the dropdown values to get the list to display in modal popup.

I'm using MVC for this system. 

This is the View

<table>
    <tr class="spaceUnder">
        <td style="width: 200px">
            @Html.Label("*", new { style = "color:red" })
            @Html.Label("Status")
        </td>
        <td> : </td>
        <td>
            <div class="col-md-5" style="width:40%">
                <select>
                    <option>Married</option>
                    <option>Single</option>
                </select>
            </div>
        </td>
    </tr>
    <tr class="spaceUnder">
        <td style="width: 200px">
 
            @Html.Label("Gender")
        </td>
        <td> : </td>
        <td>
            <div class="col-md-5" style="width:40%">
                <select>
                    <option>Female</option>
                    <option>Male</option>
                </select>
            </div>
        </td>
    </tr>
    <tr class="spaceUnder">
        <td style="width: 200px">
            @Html.Label("*", new { style = "color:red" })
            @Html.Label("Area")
        </td>
        <td> : </td>
        <td>
            <div class="col-md-5" style="width:40%">
                <select>
                    <option>London</option>
                    <option>New York</option>
                </select>
            </div>
        </td>
    </tr>
    <tr class="spaceUnder">
        <td style="width: 200px">
            @Html.Label("*", new { style = "color:red" })
            @Html.Label("Option")
        </td>
        <td> : </td>
        <td>
            <div class="col-md-5" style="width:40%">
                <button type="button" class="btn btn-info" data-toggle="modal" data-target="#MachineModal" title="Choose Machine" style="margin: 0; margin-left:1rem;">....</button>
                <span id="properties-error-msg" class="text-danger" style="color:red; margin:5px"></span>
            </div>
        </td>
    </tr>
    <tr class="spaceUnder">
        <td></td>
        <td></td>
        <td>
            <table id="properties-display-table" class="table table-bordered">
                <thead>
                    <tr>
                       
                        <th>Room</th>
                        <th>Prices</th>
                    </tr>
                </thead>
                <tbody>
                    @*Content Here*@
                </tbody>
            </table>
        </td>
    </tr>
</table>

The modal 

<!-- Modal -->
<div class="modal" id="MachineModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Room Listing</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <table class="table table-striped" id="properties-table">
                    <thead>
                        <tr>
                            <th style="width: 10%;"></th>
                            <th>Room</th>
                            <th>Prices</th>
                        </tr>
                    </thead>
                    <tbody style="overflow-y:auto;">
                        
                    </tbody>
                </table>
            </div>
 
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-info" data-dismiss="modal" id="confirm-property">Confirm</button>
                <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
            </div>
 
        </div>
    </div>
</div>

 

SELECT HOTEL_ID, ROOM, PRICES
FROM PVIEW_HOTEL where STATUS =@status and AREA = @area;

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 09, 2021 07:47 AM

Hi nabilabolo,

Check the below example.

Namespaces

using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetData(string status, string area, string gender)
    {
        List<Property> properties = new List<Property>();
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT HOTEL_ID,ROOM,PRICES FROM PVIEW_HOTEL WHERE STATUS=@status AND AREA=@area AND GENDER=@gender";
        using (SqlConnection con = new SqlConnection(conString))
        {
            SqlCommand cmd = new SqlCommand(query);
            cmd.Parameters.AddWithValue("@status", status);
            cmd.Parameters.AddWithValue("@area", area);
            cmd.Parameters.AddWithValue("@gender", gender);
            cmd.Connection = con;
            con.Open();
            SqlDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                properties.Add(new Property
                {
                    HOTEL_ID = Convert.ToInt32(sdr["HOTEL_ID"]),
                    ROOM = Convert.ToString(sdr["ROOM"]),
                    PRICES = Convert.ToString(sdr["PRICES"]),
                });
            }
            con.Close();
        }

        return Json(properties);
    }

    public class Property
    {
        public int HOTEL_ID { get; set; }
        public string ROOM { get; set; }
        public string PRICES { get; set; }
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnMachineModal').on('click', function () {
                var status = $("#ddlStatus").find('option:selected').text();
                var area = $("#ddlArea").find('option:selected').text();
                var gender = $("#ddlGender").find('option:selected').text();
                $.ajax({
                    type: "POST",
                    url: "/Home/GetData",
                    data: "{status:'" + status + "',area:'" + area + "',gender:'" + gender + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (properties) {
                        $("#properties-table tbody").empty();
                        var row = "";
                        $.each(properties, function (i, property) {
                            row += "<tr>";
                            row += "<td>" + property.HOTEL_ID + "</td>";
                            row += "<td>" + property.ROOM + "</td>";
                            row += "<td>" + property.PRICES + "</td>";
                            row += "</tr>";
                        });
                        $("#properties-table tbody").append(row);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            });
        });
    </script>
</head>
<body class="container">
    <br />
    <table>
        <tr class="spaceUnder">
            <td style="width: 200px">
                @Html.Label("*", new { style = "color:red" })
                @Html.Label("Status")
            </td>
            <td> : </td>
            <td>
                <div class="col-md-5" style="width:40%">
                    <select id="ddlStatus">
                        <option>Married</option>
                        <option>Single</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr class="spaceUnder">
            <td style="width: 200px">

                @Html.Label("Gender")
            </td>
            <td> : </td>
            <td>
                <div class="col-md-5" style="width:40%">
                    <select id="ddlGender">
                        <option>Female</option>
                        <option>Male</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr class="spaceUnder">
            <td style="width: 200px">
                @Html.Label("*", new { style = "color:red" })
                @Html.Label("Area")
            </td>
            <td> : </td>
            <td>
                <div class="col-md-5" style="width:40%">
                    <select id="ddlArea">
                        <option>London</option>
                        <option>New York</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr class="spaceUnder">
            <td style="width: 200px">
                @Html.Label("*", new { style = "color:red" })
                @Html.Label("Option")
            </td>
            <td> : </td>
            <td>
                <div class="col-md-5" style="width:40%">
                    <button type="button" class="btn btn-info" data-toggle="modal" data-target="#MachineModal"
                            title="Choose Machine" style="margin: 0; margin-left:1rem;" id="btnMachineModal">
                        ....
                    </button>
                    <span id="properties-error-msg" class="text-danger" style="color:red; margin:5px"></span>
                </div>
            </td>
        </tr>
    </table>
    <input type="" name="name" value="" />
    <!-- Modal -->
    <div class="modal" id="MachineModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Room Listing</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <table class="table table-striped" id="properties-table">
                        <thead>
                            <tr>
                                <th style="width: 10%;"></th>
                                <th>Room</th>
                                <th>Prices</th>
                            </tr>
                        </thead>
                        <tbody style="overflow-y:auto;"></tbody>
                    </table>
                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal" id="confirm-property">Confirm</button>
                    <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Screenshot