1

メソッドを含む以下のコントローラーがあります。1 つはパラメーターを受け取り、もう 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

最初の質問に焦点を当てましょう。デフォルト以外のルートを使用しているため、アクションが呼び出されていない可能性があります。また、同じ名前と動詞を持つアクションを持つことは良い習慣ではありません。

それでは、アクション シグネチャを次のように変更しましょう。

[HttpPost]
public JsonResult GetAllProducts(string searchName)

HttpPost動詞を変更するには、JsonResultJavaScript でデータを使用する必要があるため、これが最善の方法です。

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

これが機能するようになったらすぐに、次の質問に移ります。

では、第2弾。JavaScript を使用して行を追加します。まずはidあなたの食卓に彩りを添えましょう。呼びましょうitems

<table id="items">

ajax promise にハンドラーを追加しましょう。

$('#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 に答える