MVC5 C#中无Kendo实现Ajax加载数据到WebGrid问题求助

核心问题分析 #

你的代码存在以下关键问题：

1. Controller返回格式错误：直接返回Json无法直接渲染WebGrid，应返回包含WebGrid的PartialView HTML
2. SQL注入风险：直接拼接用户输入到SQL语句中，极易被攻击
3. Ajax请求参数重复：URL和data同时传递参数，导致参数冲突
4. WebGrid初始化逻辑错误：主View未设置正确的异步加载容器，且未分离网格渲染的PartialView

步骤1：修正Controller代码 #

改为返回PartialView，同时修复SQL注入问题：

public ActionResult ChekingInBank(string username, string password, string datasource, string bnkname, string word)
{
    SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder();
    builder["Server"] = datasource;
    builder["Connect Timeout"] = 1000;
    builder["Integrated Security"] = false;
    builder.InitialCatalog = bnkname;
    builder.Password = password;
    builder.UserID = username;

    List<TranslateViewModel> translateViewList = new List<TranslateViewModel>();

    using (SqlConnection con = new SqlConnection(builder.ConnectionString))
    {
        con.Open();
        // 使用参数化查询避免SQL注入
        string sqlQuery = "select * from lego.LocalizationView where Word = @Word";
        using (SqlCommand cmd = new SqlCommand(sqlQuery, con))
        {
            cmd.Parameters.AddWithValue("@Word", word);
            using (SqlDataReader dr = cmd.ExecuteReader())
            {
                while (dr.Read())
                {
                    TranslateViewModel translateView = new TranslateViewModel();
                    translateView.id = dr[0].ToString();
                    translateView.word = dr[1].ToString();
                    translateView.translate = dr[2].ToString();

                    translateViewList.Add(translateView);
                }
            }
        }
    }

    // 返回PartialView，将数据传给视图生成WebGrid
    return PartialView("_TranslateGrid", translateViewList);
}

步骤2：创建PartialView（_TranslateGrid.cshtml） #

专门用于渲染WebGrid：

@model List<TranslateViewModel>

@{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
                      selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
    grid.Pager(WebGridPagerModes.All);
}

@grid.GetHtml(
    tableStyle: "webGrid",
    columns: new[]
    {
        grid.Column("id", "ID"),
        grid.Column("word", "单词"),
        grid.Column("translate", "翻译")
    })

步骤3：修正JavaScript代码 #

调整Ajax请求，接收PartialView的HTML并渲染：

function chekingInBank() {
    var word = $("#eWord").val().trim();
    var bnkname = $("#combo").val();
    var username = $("#Username").val().trim();
    var password = $("#password").val();
    var datasource = $("#Datasource").val();

    if (!bnkname || !word) {
        return;
    }

    $.ajax({
        url: '/Home/ChekingInBank',
        data: {
            bnkname: bnkname,
            username: username,
            password: password,
            datasource: datasource,
            word: word // 传递单词，而非拼接好的SQL
        },
        type: "GET",
        dataType: "html", // 接收HTML格式的PartialView
        success: function (html) {
            if ($.trim(html).length > 0) {
                $('#gridContent').html(html);
            } else {
                alert('未找到匹配记录');
            }
        },
        error: function () {
            alert('请求出错，请检查参数或数据库连接');
        }
    });
}

步骤4：调整主View代码 #

添加容器用于加载WebGrid：

<!-- 保留你原有的输入控件 -->
<input type="text" id="eWord" placeholder="输入单词" />
<select id="combo">...</select>
<input type="text" id="Username" />
<input type="password" id="password" />
<input type="text" id="Datasource" />
<button onclick="chekingInBank()">查询</button>

<!-- WebGrid异步加载容器 -->
<div id="gridContent"></div>

额外注意事项 #

• 确保TranslateViewModel类的属性名称与数据库字段映射一致（如word、translate需和类属性匹配）
• 前端直接传递数据库用户名、密码存在安全风险，建议改为后端配置或使用更安全的认证方式
• 可为WebGrid添加自定义CSS样式，优化显示效果

内容的提问来源于stack exchange，提问作者ghazal koobchi