Question

我正在尝试从控制器读取查询，并且已经有了Ajax调用来通过我的按钮进行查询。但是我的问题是索引视图上没有发生任何变化，表没有变化，也无法弄清楚原因。

这是我的观点：

@{
    ViewBag.Title = "LoadInfo";
}

@model IEnumerable<MyApp.Models.LoadInfo>
<html>
<body>
    <input style="text-align:left; width:250px" id="txtSearch" type="text" />
    <button type="button" id="search" onclick="search()" class="btn btn-primary">Search</button>

    <div class="tableFixHead" ; style="margin-top: 10px;">
            <table class="table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Address</th>                    
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model)
                    {
                        <tr>
                            <td>@item.ID</td>
                            <td>@item.Name</td>
                            <td>@item.Address</td>                        
                        </tr>
                    }
                </tbody>
            </table>
        </div>
</body>
</html>

<script>
function search() {
    var search = document.getElementById("txtSearch").value    

    $.ajax({
        url: '/Home/LoadInfo',
        type: 'GET',
        data: {
            'name': search                
        },

        success: function (data) {
            alert("success")                

        },
        error: function (jqXhr, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
}
</script>

控制器：

public ActionResult LoadInfo(string name)
{            
    List<readDetails> userDetails = new List<readDetails>();
    string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    using (MySqlConnection con = new MySqlConnection(constr))
    {                
        string query = "SELECT ID, Name, Address FROM EmpDetails WHERE Name like '%" + name + "%' LIMIT 500";
        using (MySqlCommand cmd = new MySqlCommand(query))
        {
            cmd.Connection = con;
            con.Open();
            using (MySqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {                   
                        userDetails.Add(new readDetails
                        {
                            op = sdr["ID"].ToString(),
                            op_desc = sdr["Name"].ToString(),
                            doc_id = sdr["Address"].ToString(),                            
                        });

                }
            }
            con.Close();
        }
    }
    return View(userDetails);    
}

我还在启动页面加载时使用了该控制器，不确定是否是问题的起因，我是否需要创建一个单独的控制器并查看初始加载和搜索功能。

结果提醒我“成功”，但它很奇怪，因为我的表没有更改或刷新，就像您使用查询浏览器中的过滤器进行简单查询一样。

Answer 1

您需要为表的<tbody>元素添加html()函数，以使用新的覆盖现有结果：

$.ajax({
    url: '/Home/LoadInfo',
    type: 'GET',
    data: {
        'name': search                
    },

    success: function (data) {
        alert("success");
        $('.table tbody').html(data); // override previous results               
    },
    error: function (jqXhr, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

如果响应包含整个<table>元素，则应省略tbody选择器：

$('.table').html(data);

您还可以尝试返回PartialView()，例如如果在同一搜索页面中提供搜索结果，则return PartialView(userDetails);而不是整个视图页面。

更新：

由于data返回整个HTML页面，因此应修改当前控制器操作以返回JSON响应，如以下示例：

public ActionResult LoadInfo(string name)
{            
    List<readDetails> userDetails = new List<readDetails>();
    string constr = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    using (MySqlConnection con = new MySqlConnection(constr))
    {                
        string query = "SELECT ID, Name, Address FROM EmpDetails WHERE Name like '%" + name + "%' LIMIT 500";
        using (MySqlCommand cmd = new MySqlCommand(query))
        {
            cmd.Connection = con;
            con.Open();
            using (MySqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {                   
                        userDetails.Add(new readDetails
                        {
                            op = sdr["ID"].ToString(),
                            op_desc = sdr["Name"].ToString(),
                            doc_id = sdr["Address"].ToString(),                            
                        });

                }
            }
            con.Close();
        }
    }
    return Json(userDetails, JsonRequestBehavior.AllowGet);    
}

然后，用响应中的数据替换现有的<tbody>内容：

$.ajax({
    url: '/Home/LoadInfo',
    type: 'GET',
    data: {
        'name': search                
    },
    dataType: 'json',
    success: function (data) {
        alert("success");
        var tblbody = $('.table').find('tbody');
        tblbody.empty(); // remove existing rows
        var row = '';
        $.each(data, function(i, item) {
            row += $('<tr>').append($('<td>').text(item.ID), $('<td>').text(item.Name), $('<td>').text(item.Address));
            tblbody.append(row); // add new rows
        });              
    },
    error: function (jqXhr, textStatus, errorThrown) {
        alert(errorThrown);
    }
});

这时，搜索结果应该出现在同一表上，而不是返回整个HTML内容。

来自控制器的asp.net mvc负载查询

1 个答案: