下拉列表不绑定从两个表中获取数据
本文关键字:两个 获取 数据 绑定 下拉列表 | 更新日期: 2023-09-27 18:32:50
我有一个下拉列表,该列表从数据库中获取它。但它不绑定到下拉列表。
在这里,条件是 1 本书有许多书籍类型。
在这里,我粘贴了编码。
public List<BookModel> GetBooks(string bookId)
{
DatabaseProviderFactory factory = new DatabaseProviderFactory();
Database db = factory.Create("DefaultConString");
con.Open();
String query = @"Select B.BookName,B.Author,BT.BookType
FROM VW_Book B
INNER JOIN VW_BookType BT
ON B.BookId = BT.BookId
WHERE BookId =: BookId";
cmd = db.GetSqlStringCommand(query);
db.AddInParameter(cmd, "BookId", DbType.String,bookId);
var ds = db.ExecuteDataSet(cmd);
var da = ds.Tables[0].AsEnumerable().Select(d => new StaffModel {
bookname= d.Field<string>("BookName"), //From Book table
authorname = d.Field<string>("AuthorName"), //From Book table
booktype = d.Field<string>("BookType"); // From BookType table
});
var lst = da.ToList();
return lst;
}
我的控制器
[HttpPost]
public string GetBookDetails(string bookId)
{
BookBusiness bk = new BookBusiness();
List<BookModel> _book = bk.GetBookDetails("50000").ToList();
return JsonConvert.SerializeObject(_book); //
}
我的模型
Public class BookModel
{
public string BookId {get;set;}
public string BookName {get;set;}
public string BookType {get;set;}
}
阿贾克斯呼叫
$.ajax({
url: '@Url.Action("GetBookDetails", "Books")',
type: "POST",
async: false,
data: JSON.stringify({ BookId: BookId}),
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (_book) {
debugger;
$('#bookdropdown').empty();
$.each(_book, function () {
$("#bookdropdown").append(
$('<option/>', {
value: this,
html: this
})
);
});
}
});
但是我面临的问题是数据未绑定到下拉列表。数据类似于 [{"哈利波特"}] 像 json 格式。
ajax 方法需要 json,因此您需要将控制器方法更改为
[HttpPost]
public JsonResult GetBookDetails(string bookId)
{
BookBusiness bk = new BookBusiness();
List<BookModel> _book = bk.GetBookDetails("50000").ToList();
return Json(_book);
}
但是,目前尚不清楚您希望在视图中使用BookModel
的哪些属性。只需要返回 2 个属性,一个用于分配给选项value
属性,另一个用于选项显示文本(如果它们相同,则只需返回一个属性)。通过从未使用的线路发送其他数据是没有意义的,因此假设您想要BookId
和BookName
属性,控制器方法将是
[HttpPost]
public JsonResult GetBookDetails(string bookId)
{
BookBusiness bk = new BookBusiness();
var books = bk.GetBookDetails("50000").Select(b => new
{
value = b.BookId,
text = b.BookName
};
return Json(books);
}
然后你的脚本将是
var dropdown = $("#bookdropdown"); // cache it
$.ajax({
url: '@Url.Action("GetBookDetails", "Books")',
type: "POST",
data: { BookId: BookId }, // no need to stringify and add contnetType
dataType: "json",
success: function (books) {
debugger;
dropdown.empty();
$.each(books, function(index, item) {
dropdown.append($('<option><option/>').val(item.value).text(item.text));
});
}
});
旁注。您显示的代码将无法编译。您的 GetBooks()
方法返回List<BookModel>
但其代码正在创建List<StaffModel>
。此外,控制器正在调用一个名为 GetBookDetails()
的方法,而不是GetBooks()
所以我假设你显示了错误的代码。此外,您将参数bookId
传递给控制器,但从不使用它。
试试这个。
$.each( _book, function( i, val ) {
$("#bookdropdown").append(
$('<option/>', {
value: val ,
text: val
});
});