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">×</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
