我的bootstrap表不显示任何东西,即使是列也不显示。

问题描述 投票:0回答:1

我用的是条形行表,不知道为什么不能用。名字、描述和行动这3列根本就没有出现。条纹行表的示例代码工作正常,所以我认为我的代码有问题。谁能帮帮我?獶盽稰谅

@model KhachSan.Areas.Dashboard.ViewModels.LoaiAccomodationListingModel

@if (Model != null && Model.loaiAccomodations != null && Model.loaiAccomodations.Count() > 0)
{
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Description</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var loaiAccomodation in Model.loaiAccomodations)
            {
                <tr>
                    <td>
                        @loaiAccomodation.ten
                    </td>
                    <td>
                        @loaiAccomodation.moTa
                    </td>
                    <td>
                        <button data-href="@Url.Action("Action", "loaiAccomodation", new { ID = loaiAccomodation.ID })" type="button" class="data-btn btn btn-primary" data-toggle="modal" data-target="#actionModal"><i class="fas fa-pen mr-1"></i> Edit</button>
                        <button data-href="@Url.Action("Delete", "loaiAccomodation", new { ID = loaiAccomodation.ID })" type="button" class="data-btn btn btn-danger" data-toggle="modal" data-target="#actionModal"><i class="fas fa-trash-alt mr-1"></i> Delete</button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

查看模型

    namespace KhachSan.Areas.Dashboard.ViewModels
    {
        public class LoaiAccomodationListingModel
        {
            public IEnumerable<loaiAccomodation> LoaiAccomodation { get; set; }

        }

        public class LoaiAccomodationActionModel
        {
            public int ID { get; set; }

            public string Ten { get; set; }
            public string MoTa { get; set; }

        }
    }

Controllers
namespace KhachSan.Areas.Dashboard.Controllers
{
    public class LoaiAccomodationController : Controller
    {
        // GET: Dashboard/LoaiAccomodation

        LoaiAccomodationService loaiAccomodationService = new LoaiAccomodationService();
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult Listing()
        {

            LoaiAccomodationListingModel model = new LoaiAccomodationListingModel();
            model.LoaiAccomodation = loaiAccomodationService.GetAll();
            return PartialView("_Listing");
        }

        [HttpGet]
        public ActionResult Action()
        {
            LoaiAccomodationActionModel model = new LoaiAccomodationActionModel();
            return PartialView("_Action",model);
        }

        [HttpPost]
        public ActionResult Action(LoaiAccomodationActionModel model)
        {
            JsonResult json = new JsonResult();

            loaiAccomodation loaiAccomodation = new loaiAccomodation();

            loaiAccomodation.ten = model.Ten;
            loaiAccomodation.moTa = model.MoTa;

            var result = loaiAccomodationService.Save(loaiAccomodation);

            if (result)
            {
                json.Data = new { Success = true };
            }
            else
            {
                json.Data = new { Success = false, Message = "Unable to perform action on Accomodation Types." };
            }

            return json;

        }
    }
}

服务项目

namespace KhachSan.Services
{
    public class LoaiAccomodationService
    {
        public IEnumerable<loaiAccomodation> GetAll()
        {
            var context = new KhachSanContext();
            return context.loaiAccomodations.ToList();
        }

        public bool Save(loaiAccomodation loaiAccomodation)
        {
            var context = new KhachSanContext();
            context.loaiAccomodations.Add(loaiAccomodation);
            return context.SaveChanges() > 0;
        }
    }
}

索引

@model KhachSan.Areas.Dashboard.ViewModels.LoaiAccomodationListingModel

<div class="row">
    <div class="col col-lg-12">
        <h2>Loại Chỗ Ở</h2>
        <hr />
    </div>
</div>

<div class="row mb-3">
    <div class="col col-lg-12">
        <form>
            <div class="input-group">
                <input type="text" name="searchterm" class="form-control" placeholder="Search." >
                <div class="input-group-append">
                    <button class="btn btn-outline-primary" type="submit"><i class="fas fa-search mr-1"></i> Search</button>
                    <a class="btn btn-outline-secondary" href="@Url.Action("Index", "loaiAccomodation")"><i class="fas fa-redo-alt mr-1"></i> Reset</a>
                    <button data-href="@Url.Action("Action", "loaiAccomodation")" class="data-btn btn btn-outline-success" type="button" data-toggle="modal" data-target="#actionModal"><i class="fas fa-plus mr-1"></i> Create</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="row">
    <div class="col col-lg-12">
        @{
            Html.RenderPartial("_Listing", Model);
        }
    </div>
</div>

<div class="modal fade" id="actionModal" tabindex="-1" role="dialog" >
    <div class="modal-dialog" role="document">
    </div>
</div>

<script>
    $(".data-btn").click(function () {
        $.ajax({
            url: $(this).attr("data-href"),
        })
            .done(function (response) {
                $("#actionModal .modal-dialog").html(response);
            });
    });
</script>

请在此输入图片描述

asp.net-mvc bootstrap-4
1个回答
0
投票

你传递的模型(LoaiAccomodationListingModel)是空的。我看不到你图片上的表。

© www.soinside.com 2019 - 2024. All rights reserved.