Question

我有一个下拉列表，该列表从数据库中获取它。但它没有绑定到下拉列表。

在这里条件是1本书有很多BookTypes。

我在这里粘贴编码。

  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 Call

        $.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
                    })
                );
            });
        }
    });

但我面临的问题是数据没有绑定到下拉列表。数据就像[{“HarryPotter”}]，就像json格式一样。

Answer 1

你的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传递给控制器，但从不使用它。

Answer 2

试试这个。

$.each( _book, function( i, val ) {
 $("#bookdropdown").append(
                    $('<option/>', {
                        value: val ,
                        text: val 
                    });

});

下拉列表不绑定来自两个表

我的控制器

我的模特

Ajax Call

2 个答案: