Я пытаюсь получить данные с сервера и использовать их в сетке HTML.Код HTML-сетки:
HTML:
<div id="wrapper-Baby" class="wrapper">
<div class="Product" style="width:100%">
<header class="product-header">
<div class="product-image-container">
<a class="product-image-link" OnClick="window.location.href='@Url.Action("Details", "Home", new { id = item.ItemID })'">
<div class="product-image">
<img alt="@item.ItemName" src="@item.ImageUrl" />
</div>
</a>
</div>
<div class="product-main-info">
<h3 class="product-title">
<a OnClick="window.location.href='@Url.Action("Details", "Home", new { id = item.ItemID })'">
<span>
<span class="product-brand">
@item.BrandName
</span>
<span class="product-name">
@item.ItemName
</span>
</span>
</a>
</h3>
<span class="product-pricing-info">
<span class="price-container">
<span class="currency-sign">Rs.</span>
<span class="rs-value">
@item.ItemPrice
</span>
<span class="paisa-value">.00</span>
</span>
<span class="saving-container">
<!----to be filled-->
</span>
</span>
</div>
<div class="product-info">
<p>
<span class="package-size">
<!--to be filled-->
</span>
</p>
</div>
</header>
<div class="product-actions-container">
<div class="fat-controller is-full-width">
<div class="fc-button" id="fcButton">
<div class="button-main-container clear">
<a href="/ShoppingCart/AddToCart/@item.ItemID/1" class="button button-main">
<span class="button-main-inner">
<span>
Add
</span>
<span class="product-qty">1</span>
<span class="product-text">for</span>
<strong class="product-price">Rs. @item.ItemPrice</strong>
</span>
</a>
</div>
<button class="button button-down">
<svg focusable="false" class="icon icon-dropdown-small">
<use xlink:href="#icon-dropdown-small">
<symbol viewBox="0 0 9 4" id="icon-dropdown-small">
<path d="M4.092,3.999 C4.092,3.999 0.008,0.002 0.008,0.002 C0.008,0.002 8.177,0.002 8.177,0.002 C8.177,0.002 4.092,3.999 4.092,3.999 Z" id="icon-dropdown-small-path-1" fill-rule="evenodd"></path>
</symbol>
</use>
</svg>
</button>
<div class="button-confirmation">
<div class="button-confirmation-container clear">
<div class="button-confirmation-label">
<span data-colrs-fat-controller-animation-message=""></span>
</div>
</div>
<div class="button-confirmation-icon">
<span class="icon-loading"></span>
</div>
</div>
<!---->
<div class="fc-dropdown">
<span class="popup-arrow"></span>
<ul class="fc-button-options" id="fcDropDown">
<!---->
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/@item.ItemID/1" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">1 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">@item.ItemPrice</strong>
</span>
</a>
</li>
<!---->
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/@item.ItemID/2" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">2 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">@(item.ItemPrice * 2)</strong>
</span>
</a>
</li>
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/@item.ItemID/3" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">3 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">@(item.ItemPrice * 3)</strong>
</span>
</a>
</li>
<li class="fc-option">
<a href="/ShoppingCart/AddToCart/@item.ItemID/4" class="button-add button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<!---->
<span class="combined">
<span class="product-qty" style="width: 12px;">4 </span>
<span class="product-text">for </span>
<strong class="product-price" style="width: 52px;">@(item.ItemPrice * 4)</strong>
</span>
</a>
</li>
<li class="fc-option fc-option-more">
<button class="button-more button-measure">
<svg focusable="false" class="icon icon-tick">
<use xlink:href="#icon-tick"></use>
</svg>
<span class="option-more combined" style="width: 93px;">
<span class="product-text">
<span class="product-qty" style="width: 12px;">
5
</span> or more...
</span>
</span>
</button>
@using (Html.BeginForm("AddToCart", "ShoppingCart", new { id = item.ItemID }, FormMethod.Post))
{
<div class="fc-option-more-input ng-hide">
<input type="number" id="itemCount" name="itemCount" class="ItemCount">
<button type="submit" class="button button-add-custom-qty" id=@item.ItemID disabled="disabled">
<!----><span>Add</span><!---->
</button>
</div>
}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Я вставляю весь этот код, потому что мне нужно показать свою страницу в этом формате.Мне нужно передать следующие значения переменных в Grid из ajax success:
@item.ItemName, @ item.ImageUrl, item.ItemID, @ item.BrandName, @ item.ItemName
Так что длячто мне нужно было получить список элементов с сервера.Этот код JavaScript используется для вызова данных из контроллера нажатием кнопки:
JavaScript :
$(".CategoryAnchors").click(function (e) {
e.preventDefault();
// Get the category name given in the id from the button
var category = this.id;
// Perform the ajax post
if (category != '') {
$.post("/Home/GetCategoryItems",
{
"categoryName": category
},
function (data) {
//successful request gets here
//Update page element
$("#wrapperShop").css('visibility', 'hidden');
}
)
}
});
Контроллер:
public JsonResult GetCategoryItems (string categoryName)
{
var itemList = db.Items.Where(x => x.CategoryName == categoryName).ToList();
return Json(itemList, JsonRequestBehavior.AllowGet);
}
Возможно, я пытаюсь сделать неправильную логику для процесса, но если это возможно, посоветуйте, пожалуйста, как передать соответствующие данные из AJAX в мою HTML-таблицу.
.CSS
#wrapper-Baby {
display: grid;
grid-template-columns: 214px 214px 214px 214px 214px 214px;
grid-auto-rows: minmax(20px, auto);
grid-gap: 15px;
margin-top: 0;
position: relative;
left: 12px;
width: 100%;
bottom: 880px;
}