Changing html img by value comes from json data which gets database value with some nullable fields
i have a database table that holds the following fields:
product_id | design_id | material_id | color_id | picture1 (picture name field)..
design_id
, material_id
and color_id
are nullable fields in the database..
I am using linqtosql
for it.
I have dropdownlists for the id fields. The dropdowns are in order as so:
Product>Design>Material>Color
This is an unbreakable line. (yeah, I figured how to do this)
When I choose the first dropdown item (Product list item) I want my picture to change. Then when choosing further dropdown items I want it to change again. (for example: after product is chosen when a design is chosen I want it to find the picture which matches product and design id (which can be found in the database).
So if product=1
, design=0
, material=0
and color=0
the picture for this situation will be displayed and if product=3
, design=6
, material=2
and color=9
the picture for this different situation will be displayed.
EDIT : I can now change the image but cant display on the screen only the link comes..
Here is new code:
jquery
$.getJSON('@Url.Content("~/Admin/GetPictures/")', { productId: prod, designId: des, matsid: mats, colid: col }, function (data) {
$.each(data, function (i, c) {
/*$("img#re开发者_如何转开发s").attr("src", "../../Pictures/" + c.Text).attr("alt", "../../Pictures/" + c.Text).attr("width", "100%");*/
$("img#res").attr({ 'src': '../../Pictures/' + c.Text, 'alt': '../../Pictures/' + c.Text, 'width': '100%' });
})
})
Found a solution for this problem :
controller
public JsonResult GetPictures(int productId, int? designId, int? matsid, int? colid)
{
int? d = 0;
int? m = 0;
int? c = 0;
if (designId == null) { d = 0; } else if (designId != null) { d = designId; };
if (matsid == null) { m = 0; } else if (matsid != null) { m = matsid;};
if (colid == null) { c = 0; } else if (colid != null) { c = colid; };
IEnumerable<SelectListItem> PictureItems = db.Pictures.Where(x => x.product_id == productId & x.design_id == d & x.material_id == m & x.color_id == c).AsEnumerable().Select(x => new SelectListItem()
{
Text = x.picture1,
Value = x.id.ToString().TrimEnd()
});
SelectList data = new SelectList(PictureItems, "Value", "Text");
return Json(data, JsonRequestBehavior.AllowGet);
}
view
$.getJSON('@Url.Content("~/Admin/GetPictures/")', { productId: prod, designId: des, matsid: mats, colid: col }, function (data) {
$.each(data, function (i, c) {
$("img#res").attr("src", "../../Pictures/" + c.Text).attr("alt", "../../Pictures/" + c.Text);
})
})
精彩评论