1

webbapplication で Entity Framework を使用して MVC3 Viewmodel パターンを使用しています。

私のインデックスビューは、画像、価格、説明などを含む製品のリストです.

上記の情報を含む製品は、「購入」というボタンのある div ボックスにあります。

divbox

すべての製品を表示するインデックス ビューと、購入ボタンでクリックされた製品を表示するビューの 2 つのビューで作業します。

私が達成しようとしているのは、ユーザーが購入ボタンをクリックすると、製品がカートビューである他のビューに保存されて表示されることです。

その部分のコーディングを開始する方法に問題があります。

製品のインデックス ビューが完了し、購入ボタン機能が残っていますが、開始方法がわかりません。

これは私のIndexControllerです：

private readonly HomeRepository repository = new HomeRepository();

public ActionResult Index()
{
    var Productlist = repository.GetAllProducts();

    var model = new HomeIndexViewModel()
    {
        Productlist = new List<ProductsViewModel>()
    };

    foreach (var Product in Productlist)
    {
        FillProductToModel(model, Product);
    }

    return View(model);

}

private void FillProductToModel(HomeIndexViewModel model, ProductImages productimage)
{
    var productViewModel = new ProductsViewModel
    {

        Description = productimage.Products.Description,
        ProductId = productimage.Products.Id,
        price = productimage.Products.Price,
        Name = productimage.Products.Name,
        Image = productimage.ImageUrl,
    };
    model.Productlist.Add(productViewModel);
}

私の ActionResult インデックスでは、リポジトリを使用して製品を取得し、製品からのデータを ViewModel にバインドして、ビュー内で ViewModel を使用できるようにしています。それが、ビューにすべての製品を表示する方法です。

これは私のインデックスビューです:

    @model Avan.ViewModels.HomeIndexViewModel

         @foreach (var item in Model.Productlist)
                    {
                     <div id="productholder@(item.ProductId)" class="productholder">  
                     <img src="@Html.DisplayFor(modelItem => item.Image)" alt="" />
                     <div class="productinfo">
                     <h2>@Html.DisplayFor(modelItem => item.Name)</h2> 
                     <p>@Html.DisplayFor(modelItem => item.Description)</p>    
                     @Html.Hidden("ProductId", item.ProductId, new { @id = "ProductId" }) 
</div>
                     <div class="productprice">     
                     <h2>@Html.DisplayFor(modelItem => item.price)</h2>
                     <input type="button" value="Läs mer" class="button" id="button@(item.ProductId)">  
                     @Html.ActionLink("x", "Cart", new { id = item.ProductId })  // <- temp its going to be a button                   
                    </div>                                   
                    </div>

             }

製品ごとに製品 ID を取得できるため、コントローラーで ID を使用してデータベースからデータを取得できます。しかし、私はまだそれを行う方法がわからないので、誰かが購入ボタンをクリックすると、ID をどこに保存しますか? やりたいことを達成できるようにするにはどうすればよいですか？

今、私は IndexController で次のことをしようとしています:

public ActionResult cart(int id)
        {
            var SelectedProducts = repository.GetProductByID(id);


            return View();
        }

ここで行ったことは、ID で製品を取得することです。したがって、誰かが一時「x」Actionlink を押すと、製品が届きます。私が知っているのは、私がやろうとしていることを達成するためにそのようなものが必要であることだけですが、その後、何をすべきか、どのような構造でそれを行うべきかわかりません.

どんな種類の助けも大歓迎です！

短いシナリオ:

インデックスを見ると、5 つの製品が表示されています。3 つの製品を購入することを選択したので、3 つの [購入] ボタンをクリックします。次に、ナビゲーション メニューにある [カート] をクリックします。新しいビューがポップアップし、クリックして購入した 3 つの製品が表示されます。

4

1 に答える 1

1

次のように、別のアクションで ajax を使用してカートに追加します。

アクションは次のようになります。

    public ActionResult AddToCart(int productID)
    {
        List<int> cart = (List<int>)Session["cart"];
        if (cart == null){
           cart = new List<int>();
        }
        cart.Add(productID);

        return new JsonResult() { Data = new { Status = "Success" } };
    }

Javascript は次のようになります。

$(function(){ // after page load

    $(".button").live("click", function(){ // add a listener to the buttons
        var $this = $(this), // record which button has been pressed
            productID= $this.data('productID'); // Get the product ID from the button

        $.ajax({ // initiate a ajax request
                url: '/controller/AddToCart', // to this address
                type: "post", // of type post
                cache: false, // don't cache any results
                data: {id: productID}, // post the product id
                success: function (data) { // on success
                   data = eval(data); // get the data if you want it
                   $this.addClass('productSelected'); // add a class that shows that the button was updated
                },
                error: function (result) { // on error
                    $(".validation-summary-errors").append("<li>Error connecting to server.</li>"); // this tells the world that there was an error in the ajax request
                }
            });
    }
});

ビューに追加する必要がある小さなビットは次のとおりです。

<input type="button" value="Läs mer" class="button" id="button@(item.ProductId)" data-productID='@item.ProductId' />

JQuery に慣れていない場合は、MVC エクスペリエンスを大幅に向上させるため、数秒かけて確認することをお勧めします。他にご不明な点がありましたらお知らせください。

于 2012-10-30T21:19:20.487 に答える