来自控制器的 asp.net mvc 加载查询答案

【问题标题】：asp.net mvc load query from controller来自控制器的 asp.net mvc 加载查询
【发布时间】：2018-10-29 06:36:18
【问题描述】：

我正在尝试从控制器读取我的查询，并且我已经通过 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);    
}

我也使用这个控制器来加载我的起始页面，不确定这是否是问题的原因，我是否需要为初始加载和搜索功能创建一个单独的控制器和视图。

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

【问题讨论】：

标签： asp.net ajax asp.net-mvc

【解决方案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 内容。

【讨论】：

结果是正确的，但似乎它在表内创建了一个新表，而不是仅覆盖 tbody。 @Tetsuya
返回的响应是否包含<table>元素？如果我的猜测是正确的，那么就做$('.table').html(data)。
还是一样的结果没有运气。
我想看看控制器代码返回了什么样的响应，因为您返回的可能与 <tr> 和 <td> 标签不同。
是的，我再次返回整个 html 而不仅仅是表格。我怎样才能只返回桌子？