Question

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

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

请帮助我使用Json的新手。

Razor查看： -



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

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

控制器方法： -

Answer 1

即使你的按钮有一个onclick事件处理程序，它在一个表单内并点击它将进行正常的表单提交。表单的action属性值设置为getImageClick，并返回JSON数据。这就是您在单击按钮时看到json数据的原因。

你应该做的是，阻止正常的表单提交行为，以便它执行js代码，该代码进行ajax调用并获取数据并更新DOM。

这是一种不引人注目的ajax方式。

@foreach (var item in Model.ImageObj)
{
   <button class="btn grpBtn" 
       data-url="@Url.Action("getImageClick", "Home", new { grp = item.ImgGroup})">
     @item.ImgGroup
    </button>
}

这将向按钮添加一个css类grpBtn。它还添加一个名为url的数据属性，其值为getImageClick操作方法的相对URL，查询字符串中的组具有键grp现在听一下此按钮上的click事件，阅读data-url值并对其进行ajax调用。

$(function(){

   $(document).on("click",".grpBtn",function(e){
      e.preventDefault();  //prevents normal link click behavior

      $("#tbl").empty(); //clear existing images

      $.getJSON($(this).data("url"),function(data){
         //loop through the items in data and build the markup for table
         $.each(data,function(a,item)
         {
           var newRow="<tr><td>"+item.Image="</td><tr>"; //Fix this as needed for your use case
           $("#tbl").append(newRow);
         });
      });
   });

});

我想根据JSON和MVC

1 个答案: