在 C# 中將 GridView 與 MVC 5 中的數據庫綁定，我有 ajax JavaScript

Question

我在創建網格時遇到問題（沒有劍道）我嘗試制作一本字典。 我有一個單詞列表並將其傳遞給 ajax JavaScript 並將其顯示在視圖中的網格中。 但我不知道如何處理這個:(。謝謝大家

這是我的 controller

public ActionResult ChekingInBank(string username, string password, string datasource, string bnkname, string SqlQuery)
{
    SqlConnectionStringBuilder builder = new SqlConnectionStringBuilder();
    builder["Server"] = datasource;
    builder["Connect Timeout"] = 1000;
    builder["Trusted_Connection"] = true;
    builder["Integrated Security"] = false;
    builder.InitialCatalog = bnkname;
    builder.Password = password;
    builder.UserID = username;
   
     List<TranslateViewModel>  translateViewList = new List< TranslateViewModel>();
    WebGrid TranslateGrid = new WebGrid();
   
    using (SqlConnection con = new SqlConnection(builder.ConnectionString))
    {
        con.Open();
        using (SqlCommand cmd = new SqlCommand(SqlQuery, con))
        {
            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);

                }
                if (translateViewList.Count>0)
                {
                    return Json( new {translateViewList = translateViewList, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    return Json("No Record Found");
                }
               
               
            }
           
           
        }
    }
}

JavaScript

function chekingInBank() {
    var translate = $("#eWord").val();
    var bnkname = $("#combo").val();
    var username = $("#Username").val().trim();
    var password = $("#password").val();
    var datasource = $("#Datasource").val();
    var SqlQuery = "select * from lego.LocalizationView  where Word =N'" + translate + "'";
    if (bnkname) {
        $.ajax({
            url: 'Home/chekingInBank?' + "Username=" + username + "&Password=" + password + "&databaseConString=" + datasource + "&bnkname=" + bnkname,
            data: {
                bnkname: bnkname,
                username: username,
                password: password,
                datasource: datasource,
                SqlQuery: SqlQuery
            },
            //dataType: "json",
            type: "get",
            datatype: "json",
            traditional: true,
            success: function (data)
            {
             
               `I have problem with this `
                debugger;
                if (data != "No Record Found") {
                     $('#gridContent').html(data);
                }
                else {
                   alert('No Record Found')
                    
                }
            },
              
        });

    }
    else
    {
        //do nothing
    }
}

和我的看法

還有這個：（（（

@{

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

}
@grid.GetHtml(
tableStyle: "webGrid",
columns: new[]
{
    grid.Column("id"),
    grid.Column("Word"),
    grid.Column("Translate")
});

Answer 1

首先，你不應該從 javascript 向服務器發送數據庫的用戶名、密碼、數據庫名稱和 SQL 查詢等數據。 這很危險，因為任何人都可以訪問您的數據庫。 例如，可以將您的查詢更改為類似

var SqlQuery = "TRUNCATE TABLE lego.LocalizationView"

並且您的服務器代碼將執行此破壞性查詢。

其次，我認為您對使用 WebGrid 有一些誤解。 例如，您的控制器方法返回 JSON，但在 js 代碼中，您將此 JSON 作為 html 放入 HTML 元素中：

$('#gridContent').html(data);

你也沒有提到你的 controller 動作是否用 HttpGet 屬性裝飾。

我建議您找到並實施（復制）一個使用 WebGrid 處理 AJAX 請求的工作示例，例如我用谷歌搜索的內容： 鏈接

在此示例中，實體框架用於連接到數據，但您可以從在 controller 方法中返回 static JSON 開始，以驗證這是否全部有效：

[HttpPost]
public JsonResult AjaxMethod(int pageIndex)
{
    CustomerModel model = new CustomerModel();
    model.PageIndex = pageIndex;
    model.PageSize = 10;
    model.RecordCount = 2; //number of records - for pager
    int startIndex = (pageIndex - 1) * model.PageSize;
    model.Customers = new List<Customer> //some random static data
    {
        new Customer
        {
            CustomerID = "AAAA",
            City = "City 1",
            ContactName = "Contact Name 1",
            Country = "Country 1"
        },
        new Customer
        {
            CustomerID = "BBBB",
            City = "City 2",
            ContactName = "Contact Name 2",
            Country = "Country 2"
        }//, add some more dummy customer's info
    };

    return Json(model);
}

當您重現它時，您可以將 CustomerModel 更改為您的 class，將 POST 更改為 GET，連接到您的數據庫，修改網格列等等。