在 C# 中将 GridView 与 MVC 5 中的数据库绑定，我有 ajax JavaScript

Question

I have problem with create grid (without kendo) I try to make a dictionary. I have a list of word and pass this to ajax JavaScript and show it to grid in view. but I don't know how to work with this:(. thanks all

this is my 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
    }
}

and my view

and this:(((

@{

    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

First of all, you should never send such data like database's username, password, database name and SQL query from javascript to server. This is dangerous because anyone gain access to your database. For example one can change your query to something like

var SqlQuery = "TRUNCATE TABLE lego.LocalizationView"

and your server code will execute this destructive query.

Next, I think you have some misunderstanding with using WebGrid. For example, your controller's method returns JSON, but in js code you put this JSON as html into HTML element:

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

Also you didn't mention whether your controller action is decorated with HttpGet attribute.

I advise you to find and implement (reproduce) a working example of using WebGrid with AJAX requests, for example what I've googled: link

In this example Entity Framework is used to connect to data, but you can begin with returning static JSON in your controller method, to verify this all works altogether:

[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);
}

And when you'll reproduce it you can change the CustomerModel to your class, change POST to GET, connect to your database, modify grid columns and so on.