Hi,
I tried to populate data from database using ajax but I'm stuck on the ajax function data not populate on dropdownlist.
I have table like this below :
CREATE TABLE [dbo].[Tbl_Kamar](
[ID_Kamar] [int] IDENTITY(1,1) NOT NULL,
[ID_Tipe_Kamar] [int] NULL,
[Deskripsi] [varchar](255) NULL,
[Status] [varchar](255) NULL,
CONSTRAINT [PK_Tbl_Kamar] PRIMARY KEY CLUSTERED
(
[ID_Kamar] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO
I want is show all the available ID_Kamar based ID_Tipe_Kamar when button is clicked and then show all the available ID_Kamar to dropdownlist. For example is when user type ID_Tipe_Kamar on textbox number 1 it will show available ID_Kamar number 1,2,3,6.
Any help could be apriciate.
The View
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="ID_Tipe_Kamar" class="control-label"></label>
<div class="input-group">
<input asp-for="ID_Tipe_Kamar" id="ID_Tipe_Kamar" name="ID_Tipe_Kamar" class="form-control" required />
<div class="input-group-append">
<button type="button" id="BtnCariIDTipeKamar" class="btn btn-warning">Cari ID Tipe Kamar</button>
</div>
</div>
<span asp-validation-for="ID_Tipe_Kamar" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="No_Kamar_Tersedia" class="control-label"></label>
<select id="DropdownList" class="form-control" name="DropdownList"> </select>
<span asp-validation-for="No_Kamar_Tersedia" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Deskripsi_Kamar" class="control-label"></label>
<textarea asp-for="Deskripsi_Kamar" id="Deskripsi_Kamar" name="Deskripsi_Kamar" cols="4" class="form-control" readonly="readonly" required></textarea>
<span asp-validation-for="Deskripsi_Kamar" class="text-danger"></span>
</div>
</div>
The Ajax
<script type="text/javascript" lang="javascript">
$(document).ready(function () {
$('#BtnCariIDTipeKamar').on("click", function () {
$.ajax({
url: "@Url.Action("CariDataTipeKamar", "PesananKamar")",
type: "GET",
contentType: "application/json;charset=UTF-8",
dataType: "json",
data: { ID_Tipe_Kamar: $('#ID_Tipe_Kamar').val() },
success: function (data) {
if (data != "") {
$('#DropdownList').val(data.ID_Kamar);
$('#Deskripsi_Kamar').val(data.Deskripsi_Kamar);
}
else {
window.alert(' error : ' + respons.message);
}
}
});
});
return false;
});
</script>
The Controller.cs
[HttpGet]
public IActionResult CariDataTipeKamar(string ID_Tipe_Kamar)
{
List<PesananKamarModel> TipeKamar = new List<PesananKamarModel>();
using (SqlConnection con = new SqlConnection(this._configuration.GetConnectionString("Penginapan_Apps")))
{
using (SqlCommand cmd = new SqlCommand())
{
con.Open();
cmd.Connection = con;
cmd.CommandType = CommandType.Text;
cmd.CommandText = "Select * From Tbl_Kamar Where ID_Tipe_Kamar='" + ID_Tipe_Kamar.Trim() + "' And Status='N'";
cmd.Parameters.AddWithValue("@ID_Tipe_Kamar", ID_Tipe_Kamar);
using (SqlDataReader rdr = cmd.ExecuteReader())
{
if (rdr.Read())
{
TipeKamar.Add(new PesananKamarModel
{
ID_Kamar = Convert.ToInt32(rdr["ID_Kamar"].ToString()),
Deskripsi_Kamar = rdr["Deskripsi"].ToString()
});
}
else
{
ViewBag.Message = "ID Tipe Kamar tidak ditemukan !!!";
}
}
con.Close();
cmd.Connection.Close();
}
}
return Json(TipeKamar);
}