Deepak Kanswal Sharma Ответов: 0

Я хочу изменить список изображений на основе выбора пользователя в 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

Есть предложения??

0 Ответов