Я хочу изменить список изображений на основе выбора пользователя в JSON и MVC
Я пытаюсь сгенерировать список по выбору пользователя с помощью json в MVC. При загрузке страницы список будет содержать все изображения, но когда пользователь нажимает на ссылку, указывающую определенную группу изображений. Тогда изображения в этой группе должны быть показаны только.
Проблема, однако, в том, что все изображения успешно загружаются на страницу. Когда я нажимаю кнопку linkbutton для определенной группы, она дает мне строку Json с этой группой и перенаправляет на JSON actionresult.
Пожалуйста, помогите, я очень новичок в использовании Json.
Вид Бритвы:-
@foreach (var item in Model.ImageObj) { using (Html.BeginForm("getImageClick", "Home", new { grp = item.ImgGroup })) { <button class="btn btn-sm" type="submit" value="@item.ImgGroup" onclick="getImageClick()">@item.ImgGroup </button> } } <div class="clearfix"></div> </div> <div class="table-bordered" style="margin-top:40px"></div> <div class="container" style="margin-top:10px"> <div id="status" style="font-size:20px"></div> <table id="tbl" class="table table-responsive table-hover table-bordered text-center" style="font-size:20px"></table> <script language="javascript"> $("#status").text("Loading..."); $.get("getImage", null, BindData); function BindData(Images) { var tbl = $("#tbl"); for (var j = 0; j <= Images.length; j++) { var newRow = "<tr class='col-lg-4 col-md-4 col-sm-12'>" + "<td>" + "<img src=/images/" + Images[j].Image + " " + 'alt="' + Images[j].Alt + '"' + 'style="width:200px; height:200px"' + 'class="img-thumbnail"' + " />" + "<br />" + Images[j].Description + "</td>" + "</tr>" // + // "<tr class='col-md-4'>" + //"<td class='col-md-12'>" + Images[j].Description + "</td>" + //"</tr>" ; tbl.append(newRow); } $("#status").text("Loaded"); } $.get("getImageClick", null, BindDataNew); function BindDataNew(ImagesNew) { var tbl = $("#tbl"); for (var j = 0; j <= ImagesNew.length; j++) { var newRow = "<tr class='col-lg-4 col-md-4 col-sm-12'>" + "<td>" + "<img src=/images/" + ImagesNew[j].Image + " " + 'alt="' + ImagesNew[j].Alt + '"' + 'style="width:200px; height:200px"' + 'class="img-thumbnail"' + " />" + "<br />" + ImagesNew[j].Description + "</td>" + "</tr>" // + // "<tr class='col-md-4'>" + //"<td class='col-md-12'>" + Images[j].Description + "</td>" + //"</tr>" ; tbl.append(newRow); } $("#status").text("Loaded"); } </script>
Методы Контроллера:-
public ActionResult getImage() //JSON Collection { Thread.Sleep(4000); List<ImageTbl> Images = DbContext.ImageTbls.ToList<ImageTbl>(); return Json(Images, JsonRequestBehavior.AllowGet); } public ActionResult getImageClick(string grp) //JSON Collection { Thread.Sleep(4000); List<ImageTbl> ImagesNew = DbContext.ImageTbls.Where(x => x.ImgGroup == grp).ToList<ImageTbl>(); return Json(ImagesNew, JsonRequestBehavior.AllowGet); }
Что я уже пробовал:
Добавлено выше метода контроллера и представлений razor.
Deepak Kanswal Sharma
Есть предложения??