我想根据JSON和MVC中的用户选择更改图像列表 [英] I want to change the list of images based on user selection in JSON and MVC

问题描述

我正在尝试在MVC中使用json帮助生成用户选择列表。在页面加载时，列表将包含所有图像，但是当用户单击指定特定图像组的链接时。然后，该组中的图像应仅显示。



然而问题是所有图像都在页面上成功加载。当我单击特定组的链接按钮时，它会为我提供一个包含该组的Json字符串，并重定向到Json actionresult。



请帮助我使用Json非常新。



Razor查看： -

I'm trying to generate a list on user selection with the help of json in MVC. On page load the list will contain all the images but when the user clicks a link specifying a particular image group. Then images in that group should be shown only.

The problem is however all the images are loaded successfully on page. When I click the linkbutton for particular group it gives me a Json string with that group and redirects to Json actionresult.

Please help I'm very new to using Json.

Razor View:-

@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>

控制器方法： -

Controller Methods:-

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);
       }

我的尝试：



上面添加了控制器方法和剃刀视图。

What I have tried:

Added above the controller method and razor views.

推荐答案

（＃status）。text（Loading ...）;

("#status").text("Loading...");

.get（getImage，null，BindData）;
函数BindData（图像）{
var tbl =

.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]。图像++'alt ='+图像[j] .Alt +''+'style =width：200px; height：200px '+'class =img-thumbnail'+/> +< br /> +图片[j]。描述+< / td> +
< / tr>
// +
//< tr class ='col-md-4'> +
//< td class ='col-md-12'> +图片[j]。描述+< / td> +
//< / tr>
;

tbl.append（newRow）;
}

("#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); }

这篇关于我想根据JSON和MVC中的用户选择更改图像列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！