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

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 标记，则此方法有效。但如果您有一些复杂的标记，您想要附加/显示。我建议从 ajax 调用中返回部分 View 。

因此，在您的操作方法中，不要返回 json 数据，而是将该数据传递到您的分部 View ，并让操作方法返回 razor 生成的带有数据的 html 标记。

假设您有一个像这样的 View 模型来代表一辆汽车

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

在操作方法中，根据数据库表中的数据创建 CarVm 列表，并将其传递给分部 View 。

[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 的部分 View ，它强类型化为 CarVm 类型的集合。部分 View 应存在于 ~/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() 方法，具体取决于您想要替换现有值或仅附加它。