无法通过 Jquery append() 方法将数据附加到 <tbody> 元素

Question

我有一个在 ASP.NET MVC5 上开发的应用程序。以下是控制器的代码：

namespace ACCOUNTS2.Controllers
{
public class SelectDealController : Controller
{
    private ACCOUNTSEntities db = new ACCOUNTSEntities();



    // GET: /SelectDeal/
    public ActionResult Index(string option,string search)
    {
        var sell_deal = db.Sell_Deal.Include(s => s.Client_Info);
        return View(sell_deal.ToList());
    }

    [HttpPost]
    public JsonResult GetSearchingData(string SearchBy, string SearchValue)
    {
        List<Sell_Deal> selldeal = new List<Sell_Deal>();
        if(SearchBy == "Dealer_Name")
        {

                string Dealer_Name = SearchValue;
                selldeal = db.Sell_Deal.Where(x => x.Dealer_Name.StartsWith(SearchValue) || SearchValue == null).ToList();


            return Json(selldeal, JsonRequestBehavior.AllowGet);
        }
        else if(SearchBy == "Location")
        {
            selldeal = db.Sell_Deal.Where(x => x.Location.StartsWith(SearchValue) || SearchValue == null).ToList();
            return Json(selldeal, JsonRequestBehavior.AllowGet);
        }
        else if (SearchBy == "Client_Name")
        {
            selldeal = db.Sell_Deal.Where(x => x.Client_Info.Client_Name.StartsWith(SearchValue) || SearchValue == null).ToList();
            return Json(selldeal, JsonRequestBehavior.AllowGet);
        }
        else
        {
            var sell_deal1 = db.Sell_Deal.Include(s => s.Client_Info).ToList();
            return Json(sell_deal1, JsonRequestBehavior.AllowGet);
        }
    }

以下是我的模型代码：

namespace ACCOUNTS2
{
using System;
using System.Collections.Generic;



public partial class Sell_Deal
{
    public Sell_Deal()
    {
        this.Sell_Deal_Details = new HashSet<Sell_Deal_Details>();
    }

    public decimal Deal_ID { get; set; }
    public Nullable<System.DateTime> Deal_Date { get; set; }
    public Nullable<decimal> Total_Amount_Remaining { get; set; }
    public Nullable<decimal> Client_ID { get; set; }
    public string Dealer_Name { get; set; }
    public Nullable<System.DateTime> Validity_Date { get; set; }
    public string Location { get; set; }
    public Nullable<decimal> Deal_Amount { get; set; }

    public virtual Client_Info Client_Info { get; set; }
    public virtual ICollection<Sell_Deal_Details> Sell_Deal_Details { get; set; }
}

}

以下是我在视图中的 jquery 代码：

 $(document).ready(function () {

    $("#BtnSearch").click(function () {
        var SearchBy = $("#SearchBy").val();
        var SearchValue = $("#Search").val();
        var SetData = $("#DataSearching");
        SetData.html("");
        $.ajax({
            type: "post",
            url: "/SelectDeal/GetSearchingData?SearchBy=" + SearchBy + "&SearchValue=" + SearchValue,
            datatype: JSON,
            contentType: "html",
            success: function (result) {
                if (result.length == 0) {
                    SetData.append('<tr style="color:red"><td colspan="3">No Match Data</td></tr>')
                }
                else {
                    $.each(result, function (Index, value) {
                        var val = "<tr>" +
                       "<td>" + value.Deal_Date + "</td>" +
                       "<td>" + value.Total_Amount_Remaining + "</td>" +
                       "<td>" + value.Dealer_Name + "</td>" +
                       "<td>" + value.Validity_Date + "</td>" +
                       "<td>" + value.Location + "</td>" +
                       "<td>" + value.Deal_Amount + "</td>" +
                       "<td>" + value.Client_Info.Client_Name + "</td>" +
                       "</tr>";

                        SetData.append(val)
                    });
                }
            }
        });
    });
});

当我点击按钮时，我希望根据控制器中 JsonResult 方法中编写的逻辑，过滤后的数据显示在 table 中，但它没有发生。据我所知，ajax 成功事件的第一个 "if" 条件是将数据附加到元素，但它在 "else" 的正文中根本不起作用 ajax代码。我的代码有没有做错什么？我需要在这里做任何更正吗？请帮忙！

Answer 1

您的Ajax请求无效。删除contentType: "html"并修改datatype: JSON为datatype: "json";

$.ajax({
    type: "post",
    url: "/SelectDeal/GetSearchingData?SearchBy=" + SearchBy + "&SearchValue=" + SearchValue,
    datatype: "json",
    success: function (result) {
        if (result.length == 0) {
            SetData.append('<tr style="color:red"><td colspan="3">No Match Data</td></tr>')
        }
        else {
            $.each(result, function (Index, value) {
                var val = "<tr>" +
               "<td>" + value.Deal_Date + "</td>" +
               "<td>" + value.Total_Amount_Remaining + "</td>" +
               "<td>" + value.Dealer_Name + "</td>" +
               "<td>" + value.Validity_Date + "</td>" +
               "<td>" + value.Location + "</td>" +
               "<td>" + value.Deal_Amount + "</td>" +
               "<td>" + value.Client_Info.Client_Name + "</td>" +
               "</tr>";

                SetData.append(val)
            });
        }
    }
});

此外，您正在应用 Post 请求，但参数 SearchBy 和 SearchValue 通过 GET 传递到服务器端。这不是执行它的正确方法。 Post请求体中的参数不在url.

无法通过 Jquery append() 方法将数据附加到 <tbody> 元素

Cannot append data to <tbody> element by Jquery append() Method

c#

ajax

jquery

jsonresult

asp.net-mvc-5