下拉列表不绑定从两个表中获取数据

本文关键字：两个 获取 数据 绑定 下拉列表 | 更新日期: 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 
                    });
});

相关文章：