1

我有下面的控制器和方法。一个带参数，另一个不带。我希望能够进行搜索。

  1. 当我点击提交按钮时。什么都没发生。我的ajax调用没有命中。
  2. 如果问题 1 得到解决，我希望能够输入我的搜索条件并让它返回我的索引视图中使用的现有表中的数据。

请协助。Ajax 和 mvc 的新手。

public class HomeController : Controller
                {
                    public ActionResult Index()
                    {

                        //List<Product> myProductList = GetAllProducts();
                        //return View(myProductList);

                        //List<Product> myProductList = GetAllProducts();
                        return View();
                    }

                    public ActionResult About()
                    {
                        return View();
                    }




                    public List<Product> GetAllProducts()
                    {            
                        string myConnect = ConfigurationManager.ConnectionStrings["ConnectSir"].ConnectionString;
                        List<Product> prdResults = new List<Product>();
                        SqlConnection con = new SqlConnection(myConnect);
                        SqlCommand cmd = new SqlCommand("select * from products",con);

                        using (con)
                        {
                            con.Open();
                            SqlDataReader reader = cmd.ExecuteReader();
                            while (reader.Read())
                            {
                                Product newProduct = new Product();
                                newProduct.Id =  Convert.ToInt16(reader["Id"]);
                                newProduct.Name = reader["Name"].ToString();
                                newProduct.Description = reader["description"].ToString();
                                newProduct.Price =  Convert.ToDecimal(reader["Price"]);
                                newProduct.UnitsInStock = Convert.ToInt16(reader["UnitsInStock"]);
                                prdResults.Add(newProduct);
                            }

                        }

                        return prdResults;
                    }


                    [HttpPost]
                    public JsonResult GetAllProducts(string searchName)       
                    {
                        string myConnect = ConfigurationManager.ConnectionStrings["ConnectSir"].ConnectionString;
                        List<Product> prdResults = new List<Product>();

                        string sqlcmd = @"select * from products where name = @name";
                        SqlConnection con = new SqlConnection(myConnect);
                        SqlCommand cmd = new SqlCommand();
                        cmd.Connection = con;
                        cmd.CommandText = sqlcmd;

                        cmd.Parameters.Add("@name", SqlDbType.NVarChar);
                        cmd.Parameters["@name"].Value = searchName;
                        cmd.Parameters["@name"].Direction = ParameterDirection.Input;

                        using (con)
                        {
                            con.Open();
                            SqlDataReader reader = cmd.ExecuteReader();
                            while (reader.Read())
                            {
                                Product newProduct = new Product();
                                newProduct.Id = Convert.ToInt16(reader["Id"]);
                                newProduct.Name = reader["Name"].ToString();
                                newProduct.Description = reader["description"].ToString();
                                newProduct.Price = Convert.ToDecimal(reader["Price"]);
                                newProduct.UnitsInStock = Convert.ToInt16(reader["UnitsInStock"]);
                                prdResults.Add(newProduct);
                            }

                        }
                        //return prdResults;
                       return Json(prdResults);
                    }

                }

            *********************************
            Html

            @model IEnumerable<MvcAjax.Models.Product>

            <script src="../../Scripts/jquery-1.10.2.js" type="text/javascript"></script>

            <form>
            <div>
                <input type="text" name="search" id="searchItem" />
                <input type="submit"  value="Retrieve" id="btnSearch"/>
            </div>

            <div>
            &nbsp;
            </div>


            <table id="items">
                <tr>
                    <th></th>
                    <th>
                        Name
                    </th>
                    <th>
                        Description
                    </th>
                    <th>
                        Price
                    </th>
                    <th>
                        UnitsInStock
                    </th>
                </tr>



            </table>

            <script type="text/javascript">
                $('#btnSearch').click(function () {
                    $.ajax({
                        url: 'Home/GetAllProducts/',
                        type: 'POST',
                        dataType: 'json',
                        data: { searchName: $('#searchItem').val() }
                    }).done(function (data) {
                        if (data && data.length) {
                            for (var i = 0; i < data.length; i++) {
                                var newTR = '<tr>';

                                //create your TR, such as
                                newTR += '<td>' + data[i].Name + '</td>';
                                newTR += '<td>' + data[i].Description + '</td>';
                                newTR += '<td>' + data[i].Price + '</td>';
                                newTR += '<td>' + data[i].UnitsInStock + '</td>';
                                //and so on...

                                newTR += '</tr>';

                                $('#items > tr:last').append(newTR);
                            }
                        }
                    });
                });

            </script>

            </form>
4

3 回答 3

3

发送带有数据的 ajax 并将内容类型更改为 application/json；charset=utf-8"，像这样：

$('#btnSearch').click(function () {
    $.ajax({
        data: '{searchName:'  + $('#searchItem').val() + '}'
        url: 'Home/GetAllProducts/',
        contentType: 'application/json; charset=utf-8"',
        type: 'Get',
        dataType: 'html'
    })

});

于 2013-09-10T14:30:29.557 回答
0

改变

data: { Name: mysearchName }

在您的 ajax 调用中

data: { searchName: mysearchName }

因为您的操作方法正在接受searchName

[HttpPost]
public JsonResult GetAllProducts(string searchName)
{...
 }
于 2013-09-10T15:59:53.860 回答
0

让我们专注于您的第一个问题。您的操作可能没有被调用，因为您使用的是非默认路由。此外，具有相同名称和动词的动作也不是一个好习惯。

因此，让我们将您的操作签名更改为：

[HttpPost]
public JsonResult GetAllProducts(string searchName)

HttpPost更改动词，JsonResult因为我们想将您的数据与 javascript 一起使用，这是最好的方法。

最后更改您的操作，让我们修改return语句：

return Json(prdResults);

在您看来，我们必须修改 ajax 调用：

$('#btnSearch').click(function () {
    $.ajax({
        url: 'Home/GetAllProducts/',
        contentType: 'application/html; charset-ut',
        type: 'POST',
        dataType: 'json',
        data: { searchName:  $('#searchItem').val()}
    });
});

一旦我们完成这项工作，我将转到下一个问题。

现在，第二部分。我们将使用 javascript 添加这些行。首先，让我们给id你的桌子一个。让我们称之为items

<table id="items">

让我们为您的 ajax 承诺添加一个处理程序：

$('#btnSearch').click(function () {
    $.ajax({
        url: 'Home/GetAllProducts/',
        type: 'POST',
        dataType: 'json',
        data: { searchName:  $('#searchItem').val()}
    }).done(function(data){
        if(data && data.length){
        for(var i = 0; i < data.length; i++){
            var newTR = '<tr>';

            //create your TR, such as
            newTR += '<td>' + data[i].Name + '</td>';
            //and so on...

            newTR += '</tr>';

            $('#items > tr:last').append(newTR);
        }
        }
    });
});

就是这样

对于调试用户，让我们用以下代码替换其中的代码done(data){...}：

if (data && data.length) {
    for (var i = 0; i < data.length; i++) {
        var newTR = '<tr>';

        //create your TR, such as
        newTR += '<td>' + data[i].Name + '</td>';
        newTR += '<td>' + data[i].Description + '</td>';
        newTR += '<td>' + data[i].Price + '</td>';
        newTR += '<td>' + data[i].UnitsInStock + '</td>';
        //and so on...

        newTR += '</tr>';

        alert(newTR);

        $('#items > tr:last').append(newTR);
    }
}
else{
    alert('empty response. Please set a breakpoint at the action and make sure that something is returning');
}
于 2013-09-10T14:25:49.100 回答