Question

我想在选中复选框时将HTML /数据附加到div。我还想知道如何从复选框中轻松附加data / html的最佳实践。

但是，请参阅以下代码：

的Ajax

 $('.myCheck').on('ifChecked', function (event) {
    $.ajax({
        url: '/Home/getCategoryItems',
        type: "GET",
        cache: false,
        data: {
            name: $(this).attr("name")
        },
        success: function (data) {
            setTimeout(function () {


            }, 3000);
        }
    });
});

查看：

 @foreach (var item in Model.Cars)
  {
                <span class="label">
                    @item.CategoryName <span class="badge">@item.CategoryCount</span>
                </span>
                            @Html.CheckBox(item.CategoryName, new { @class = "myCheck", })
                            @Html.Hidden("name", item.CategoryName, new { id = item.CategoryId })
}




Controller:

    [HttpGet]
    public JsonResult getCategoryItems(string name)
    {
        var select = (from r in _db.Cars             
                      where r.Category.Name == name
                      select new
                      {
                          r.Title,
                          r.Price,
                          r.FileName,
                          r.Category.Name,
                          r.City,
                          r.TagName,
                          r.Id,
                          }).ToList();
        return new JsonResult { Data = select, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
    }

这是我想要追加的内容：

@foreach (var item in Model)
    {
        <div class="container" id="sek1">
            <div class="row">

                <div class="col-md-12 no-padding-lr sear-result-column">
                    <div class="latest-job article-row1">
                        <div class="col-md-2 no-padding-lr resp-grid1 box-sadow">
                            <img src="https://wp-themes.com/wp-content/themes/jobile/images/no-image.jpg" width="100" height="86">

                        </div>

                        <div class="col-md-10 no-padding-lr">
                            <div class="col-md-8 col-sm-8 col-xs-8 no-padding-lr job-status resp-grid1 job-status-3">

                                <h3>@item.Title</h3>
                            </div>
                            <div class="col-md-4 col-sm-4 col-xs-4 job-status resp-grid1 job-status-3">
                                <a class="btn btn-primary" id="LesMerBtn">@item.Price</a>
                            </div>
                            <div class="col-md-12 no-padding-lr">
                                <div class="job-btn-group late-job-btn clearfix">

                                    <a href="" rel="category" class="person-post"><span class="glyphicon glyphicon-map-marker"></span>@item.City</a>

                            <a href="" rel="category" class="person-post"><span class="glyphicon glyphicon-list-alt"></span>Kategori: @item.CategoryName</a>

                        </div>
                    </div>
                    <div class="col-md-12 no-padding-lr">
                        <p class="result-btm-text"></p><p>Test....</p>
                        <a href="" class="color-068587"><span class="glyphicon glyphicon-eye-open" id="eye-open"></span>Read more</a><p></p>

                    </div>
                </div>


            </div>
        </div>


    </div>
</div>

    }

Answer 1

您将在ajax调用的success事件中获得json响应。响应是一个数组，你需要迭代数组并获取数组中的每个项目，读取属性值并使用它来构建你想要追加的html标记。

success: function (data) {
   var myHtml="";
   $.each(data,function(a,b){
                               myHtml+="<div><p>"+b.Title+"</p>";
                               myHtml+="<p>"+b.City+"</p>";
                               myHtml+="<p>"+b.Price+"</p></div>";
   });
   $("#YourDivId").append(myHtml);
}

假设YourDivId是您希望显示来自您的ajax调用的数据的Div的ID，并且此div存在于您的页面中。

如果您正在制作简单的html标记，则此方法有效。但是如果你有一些复杂的标记你想要appen / show。我建议你从ajax调用中返回一个局部视图。

因此在你的action方法中，不是返回json数据，而是将该数据传递给局部视图，让action方法返回带有数据的剃刀生成的html标记。

假设您有一个这样的视图模型来表示Car

public class CarVm
{
  public string Title { set;get;}
  public decimal Amount { set;get;}
  public string City { set;get;}
}

在您的操作方法中，从数据库表中的数据创建一个CarVm列表，并将其传递给部分视图。

[HttpGet]
public JsonResult getCategoryItems(string name)
{
    var carVmList= (from r in _db.Cars             
                  where r.Category.Name == name
                  select new CarVm { Title =r.Title,
                                     City =r.City,
                                     Price=r.Price
                                   }
                 ).ToList();
    return PartiaView("CarsPerCategory",carVmList);
}

假设您有一个名为CarsPerCategory.cshtml的部分视图，该视图强类型为CarVm类型的集合。部分视图应存在于~/Views/Shared/或~/Views/YourCurrentControllerName/

中

@model List<CarVm>
@foreach (var item in Model)
{
  <p>@item.Title</p>
  <!-- Add the remaining markup you want (same as the code in your question) -->
}

在您的成功活动中，您只需将回复附加到您的容器div。

success: function (data) {
  $("#YourDivId").append(data);
}

您可以使用append()方法或html()方法，具体取决于您要替换现有值或只是追加它。

如何从MVC中的复选框轻松附加数据？

1 个答案: