我正在尝试从服务器获取数据并在HTML网格中使用它。 HTML网格代码为：
HTML：
protected void gvTemplates_RowCreated(object sender, GridViewRowEventArgs e)
{
//GridView gv1 = (GridView)sender;
//foreach (GridViewRow item in gv1.Rows)
//{
if (e.Row.RowType == DataControlRowType.DataRow)
{
PopupControlExtender pce = e.Row.FindControl("PopupControlExtender1") as PopupControlExtender;
string behaviorID = "pce_" + e.Row.RowIndex;
pce.BehaviorID = behaviorID;
Panel pnl = (Panel)e.Row.FindControl("Panel2");
string OnMouseOverScript = string.Format("$find('{0}').showPopup();", behaviorID);
string OnMouseOutScript = string.Format("$find('{0}').hidePopup();", behaviorID);
pnl.Attributes.Add("onmouseover", OnMouseOverScript);
pnl.Attributes.Add("onmouseout", OnMouseOutScript);
}
//}
}
[System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]
public static string GetDynamicContent(string contextKey)
{
StringBuilder b = new StringBuilder();
b.Append("<table style='background-color:#f3f3f3; border: #4DB3A4 2px solid; ");
b.Append("width:100px;height:100px; font-size:8pt; font-family:'lucida grande', tahoma, verdana, arial, sans-serif;' cellspacing='0' cellpadding='3'>");
b.Append("<tr><td colspan='3' style='background-color:white;'>");
b.Append(contextKey);
b.Append("</td></tr>");
b.Append("</table>");
return b.ToString();
}
我要粘贴所有这些代码，因为我需要以这种格式显示页面。我需要将以下变量值从ajax成功传递到Grid：
@ item.ItemName，@ item.ImageUrl，item.ItemID，@ item.BrandName，@ item.ItemName
因此，我需要从服务器获取项目列表。此JavaScript代码用于在单击按钮时从控制器调用数据：
JavaScript ：
<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>
控制器：
$(".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');
}
)
}
});
我可能试图为该过程做一个错误的逻辑，但如果可以这种方式，请建议我如何将相关数据从AJAX传递到HTML网格。
.CSS
public JsonResult GetCategoryItems (string categoryName)
{
var itemList = db.Items.Where(x => x.CategoryName == categoryName).ToList();
return Json(itemList, JsonRequestBehavior.AllowGet);
}