提问人：nhaemcotivi_1999 提问时间：11/15/2023 最后编辑：freedomn-mnhaemcotivi_1999 更新时间：11/15/2023 访问量：38
.net mvc 中的 css 按钮下拉列表问题
Problem with css button Dropdownlist in .net mvc
问：
我尝试使用库 select2 作为下拉列表，但它的 CSS 按钮有问题
现在如何解决它
下面的代码是我制作的关于此页面的所有代码
我希望按钮下拉列表搜索可以正常工作。
@addTagHelper*, Microsoft.AspNetCore.Mvc.TagHelpers
@model CMMSBT.Domain.Thietbi
<style>
.error {
color: red;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-9">
@using (Html.BeginForm("Create", "ThietBi", FormMethod.Post, new { @id = "Create", @enctype = "multipart/form-data" }))
{
<input type="hidden" asp-for="DiaDiemId" class="form-control" />
<div id="exTab1" class="container row">
<ul class="nav nav-pills">
<li class="active">
<a href="#1a" data-toggle="tab">THÔNG TIN CHUNG</a>
</li>
<li>
<a href="#2a" data-toggle="tab">KỸ THUẬT</a>
</li>
<li>
<a href="#3a" data-toggle="tab">CHỈ SỐ</a>
</li>
</ul>
<div class="tab-content clearfix">
<div class="tab-pane active" id="1a">
<h3>Content's background color is the same for the tab</h3>
</div>
<div class="tab-pane" id="2a">
<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
</div>
<div class="tab-pane" id="3a">
<h3>We applied clearfix to the tab-content to rid of the gap between the tab and the content</h3>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<div class="col-md-4">
<div class="row">
<label class="control-label">Nhóm thiết bị</label>
<div class="controls">
@Html.DropDownListFor(m => m.NhomThietBiId, new SelectList(ViewBag.ListNhomThietBi, "NhomThietBiId", "TenNhom"),
"Tất cả", new {@id="NhomThietBiId", @class = "form-control" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Nhà cung cấp</label>
<div class="controls">
@Html.DropDownListFor(m => m.NhaCungCapId, new SelectList(ViewBag.ListNhaCungCap, "NhaCungCapId", "Tenncc"),
"Tất cả", new { @id = "NhaCungCapId", @class = "form-control select2" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Nước sản xuất</label>
<div class="controls">
@Html.DropDownListFor(m => m.NuocSanXuatId, new SelectList(ViewBag.ListNuocSanXuat, "NuocSanXuatId", "Tennuocsx"),
"Tất cả", new {@id="NuocSanXuatId" })
</div>
</div>
</div>
<div class="clr-10"></div>
<div class="col-md-4">
<div class="row">
<label class="control-label">Hãng sản xuất</label>
<div class="controls">
@Html.DropDownListFor(m => m.HangSanXuatId, new SelectList(ViewBag.ListHangSanXuat, "HangSanXuatId", "TenHangsx"),
"Tất cả", new {@id="HangSanXuatId", @class = "form-control" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Vị trí</label>
<div class="controls">
@Html.DropDownListFor(m => m.DiaDiemId, new SelectList(ViewBag.ListVitri, "DiaDiemId", "Tendd"),
"Tất cả", new {@id="DiaDiemId", @class = "form-control" })
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Mã thiết bị</label>
<div class="controls">
<input asp-for="Model" class="form-control" placeholder="Nhập mã thiết bị" />
</div>
</div>
</div>
<div class="clr-10"></div>
<div class="col-md-4">
<div class="row">
<label class="control-label">Tên thiết bị</label>
<div class="controls">
<input asp-for="TenTb" class="form-control" placeholder="Nhập tên thiết bị" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Năm sản xuất</label>
<div class="controls">
<input asp-for="NamSx" class="form-control" placeholder="Nhập năm sản xuất" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Ngày mua</label>
<div class="controls">
<input asp-for="NgayMua" class="form-control" placeholder="Nhập ngày mua" />
</div>
</div>
</div>
<div class="clr-10"></div>
<div class="col-md-4">
<div class="row">
<label class="control-label">Ngày sử dụng</label>
<div class="controls">
<input asp-for="NgaySuDung" class="form-control" placeholder="Nhập ngày sử dụng" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Ngày bảo hành</label>
<div class="controls">
<input asp-for="NgayBh" class="form-control" placeholder="Nhập ngày bảo hành" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Ngày hết hạn bảo hành</label>
<div class="controls">
<input asp-for="NgayHetBh" class="form-control" placeholder="Nhập ngày hết hạn BH" />
</div>
</div>
</div>
<div class="clr-10"></div>
<div class="col-md-4">
<div class="row">
<label class="control-label">Chu kỳ bảo trì</label>
<div class="controls">
<input asp-for="ChuKyBaoTri" class="form-control" placeholder="Nhập chu kỳ bảo trì" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">hình ảnh</label>
<div class="controls">
<input asp-for="HinhAnh" class="form-control" placeholder="Hình ảnh" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Ngày hết hạn bảo hành</label>
<div class="controls">
<input asp-for="CongDung" class="form-control" placeholder="Công dụng" />
</div>
</div>
</div>
<div class="clr-10"></div>
<div class="col-md-4">
<div class="row">
<label class="control-label">Công suất thiết kế</label>
<div class="controls">
<input asp-for="CongSuatThietKe" class="form-control" placeholder="Công suất thiết kế" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Công suất thực tế</label>
<div class="controls">
<input asp-for="CongSuatThucTe" class="form-control" placeholder="Công suất thực tế" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Hạn bảo hành</label>
<div class="controls">
<input asp-for="HanBaoHanh" class="form-control" placeholder="Hạn bảo hành" />
</div>
</div>
</div>
<div class="clr-10"></div>
<div class="col-md-4">
<div class="row">
<label class="control-label">Tuổi thọ</label>
<div class="controls">
<input asp-for="TuoiTho" class="form-control" placeholder="Tuổi thọ" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Thời gian sử dụng</label>
<div class="controls">
<input asp-for="ThoiGianSuDung" class="form-control" placeholder="Thời gian sử dụng" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Vị trí lắp đặt</label>
<div class="controls">
<input asp-for="ViTriLapDat" class="form-control" placeholder="Vị trí lắp đặt" />
</div>
</div>
</div>
<div class="clr-10"></div>
<div class="col-md-4">
<div class="row">
<label class="control-label">Ghi chú</label>
<div class="controls">
<input asp-for="GhiChu" class="form-control" placeholder="Ghi chú" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Trạng thái hoạt động</label>
<div class="controls">
<input asp-for="Status" class="form-control" placeholder="Trạng thái hoạt động" />
</div>
</div>
</div>
<div class="col-md-3 col-sm-offset-1">
<div class="row">
<label class="control-label">Thông số thiết bị</label>
<div class="controls">
<input asp-for="ThongSoThietBi" class="form-control" placeholder="Thông số thiết bị" />
</div>
</div>
</div>
<div class="clr-10"></div>
<div class="form-group">
@if (ViewBag.Name == "Add")
{
if (!ViewBag.Insert)
{
<p class="error"><img src="@Url.Content("~/images/iconCritical.gif")" /> Bạn không có quyền truy cập vào chức năng này. Vui lòng liên hệ ban quản trị!</p>
<button type="button" class="btn btn-success btn-sm" disabled><i class="fa fa-plus"></i> Thêm</button>
}
else
{
<button type="submit" id="btnsubmit" class="btn btn-success btn-sm" asp-action="Create" onkeypress="return submitKeyPress(event)"><i class="fa fa-plus"></i> Thêm</button>
}
}
else
{
if (!ViewBag.Update)
{
<p class="error"><img src="@Url.Content("~/images/iconCritical.gif")" /> Bạn không có quyền truy cập vào chức năng này. Vui lòng liên hệ ban quản trị!</p>
<button type="button" class="btn btn-success btn-sm" disabled><i class="fa fa-pencil-square-o"></i> Cập nhật</button>
}
else
{
<button type="submit" id="btnsubmit" class="btn btn-success btn-sm" asp-action="Update" onkeypress="return submitKeyPress(event)"><i class="fa fa-pencil-square-o"></i> Cập nhật</button>
}
}
</div>
}
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#Create").validate({
rules: {
NhomThietBiId: {
required : true
},
Model: {
required: true
},
TenTb: {
required: true
}
},
messages: {
NhomThietBiId: {
required: "Trường bắt buộc"
},
Model: {
required: "Trường bắt buộc"
},
TenTb: {
required: "Trường bắt buộc"
}
}
});
});
$(document).ready(function () {
$('select').select2();
});
function LoadListViTriByKhuVuc(value) {
var obj = {};
obj.KhuVucId = value;
var data = JSON.stringify(obj);
$.ajax({
url: '@Url.Action("LoadListViTriByKhuVuc","ViTri")',
data: data,
type: 'POST',
dataType: 'html',
contentType: "application/json; charset=utf-8",
success: function (response) {
$(".LoadParent").html(response);
}
});
};
现在如何解决它
下面的代码是我制作的关于此页面的所有代码
我希望按钮下拉列表搜索可以正常工作。
答： 暂无答案
下一个：选择2 无限滚动前置选项
评论