bootstrap 卡片 ahown 错误 NullReferenceException: 对象引用未设置到对象的实例

Question

当我创建 bootstrap 卡片时，它显示错误 NullReferenceException：对象引用未设置为对象的实例。

NullReferenceException: 对象引用未设置到对象的实例。

我从数据库中获取数据


<style>
    .card:hover {
        box-shadow: -1px 9px 40px -12px #808080;
    }
</style>
@foreach (var Member in Model)
{
    <div class="row">
        <div class="card" style=" width:20em;margin:10px;">
           
            <div class="card-body">
                <div class="card-title">
                    <h2>@Member.Name</h2>
                </div>
                <div class="card-text">
                    <p>@Member.Address</p>
                </div>
                <a href="#" class="btn btn-primary">Read More</a>
            </div>
        </div>
    </div>

}

<script src="/Users/harmeetsingh/Desktop/collages data/TeamManagement/TeamManagement/wwwroot/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">$('.card').hover(
        function () {
            $(this).animate({
                marginTop: "-=1%",
                marginBottom: "+=1%"
            }, 200)
        },
        function () {
            $(this).animate({
                marginTop: "-=1%",
                marginBottom: "+=1%"
            })

    )</script>

控制器

public class HomePageController : Controller
    {
        [Authorize]
        public IActionResult Index()
        {
            return View();
        }
        public IActionResult AboutUs()
        {
            return View();
        }
        public IActionResult Privacy()
        {
            return View();
        }

这是一个成员控制器，我可以在其中使用脚手架添加所有成员功能

public class MemberController : Controller
    {
        private readonly TeamContext _context;

        public MemberController(TeamContext context)
        {
            _context = context;
        }
        [Authorize]
        public async Task<IActionResult> Index()
        {
            return View(await _context.Member.ToListAsync());
        }

        public async Task<IActionResult> Details(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var member = await _context.Member
                .FirstOrDefaultAsync(m => m.MemberId == id);
            if (member == null)
            {
                return NotFound();
            }

            return View(member);
        }

        public IActionResult Create()
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create([Bind("MemberId,Name,Gender,DOB,MaritalStatus,Address,PhoneNo,Skills,Hobbies,JobTitle,Technology")] Member member)
        {
            if (ModelState.IsValid)
            {
                _context.Add(member);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(member);
        }

        // GET: HomePage/Edit/5
        public async Task<IActionResult> Edit(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var member = await _context.Member.FindAsync(id);
            if (member == null)
            {
                return NotFound();
            }
            return View(member);
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Edit(int id, [Bind("MemberId,Name,Gender,DOB,MaritalStatus,Address,PhoneNo,Skills,Hobbies,JobTitle,Technology")] Member member)
        {
            if (id != member.MemberId)
            {
                return NotFound();
            }

            if (ModelState.IsValid)
            {
                try
                {
                    _context.Update(member);
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!MemberExists(member.MemberId))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
                return RedirectToAction(nameof(Index));
            }
            return View(member);
        }

        public async Task<IActionResult> Delete(int? id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var member = await _context.Member
                .FirstOrDefaultAsync(m => m.MemberId == id);
            if (member == null)
            {
                return NotFound();
            }

            return View(member);
        }
  
        [HttpPost, ActionName("Delete")]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> DeleteConfirmed(int id)
        {
            var member = await _context.Member.FindAsync(id);
            _context.Member.Remove(member);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }

       
        private bool MemberExists(int id)
        {
            return _context.Member.Any(e => e.MemberId == id);
        }
    }

Answer 1

问题出在您的视图上，您必须像下面这样从控制器向视图提供模型。

 @model List<Member> // Add this line into your view
 <style>
    .card:hover {
        box-shadow: -1px 9px 40px -12px #808080;
    }
</style>
@foreach (var Member in Model)
{
    <div class="row">
        <div class="card" style=" width:20em;margin:10px;">
           
            <div class="card-body">
                <div class="card-title">
                    <h2>@Member.Name</h2>
                </div>
                <div class="card-text">
                    <p>@Member.Address</p>
                </div>
                <a href="#" class="btn btn-primary">Read More</a>
            </div>
        </div>
    </div>

}

<script src="/Users/harmeetsingh/Desktop/collages data/TeamManagement/TeamManagement/wwwroot/lib/jquery/dist/jquery.js"></script>
<script type="text/javascript">$('.card').hover(
        function () {
            $(this).animate({
                marginTop: "-=1%",
                marginBottom: "+=1%"
            }, 200)
        },
        function () {
            $(this).animate({
                marginTop: "-=1%",
                marginBottom: "+=1%"
            })

    )</script>

Answer 2

你可以创建一个最简单的项目，像这样在数据库中手动存储一些数据。

型号：

public class Member
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Address { get; set; }
}

控制器：

public async Task<IActionResult> Test()
{
     var mumber = await _context.Member.ToListAsync();
     return View(await _context.Member.ToListAsync());
}

查看：

@model List<Member>
<style>
    .card:hover {
        box-shadow: -1px 9px 40px -12px #808080;
    }
</style>
@foreach (var Member in Model)
{
    <div class="row">
        <div class="card" style=" width:20em;margin:10px;">
           
            <div class="card-body">
                <div class="card-title">
                    <h2>@Member.Name</h2>
                </div>
                <div class="card-text">
                    <p>@Member.Address</p>
                </div>
                <a href="#" class="btn btn-primary">Read More</a>
            </div>
        </div>
    </div>

}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('.card').hover(
    function() {
        $(this).animate({
            marginTop: "-=1%",
            marginBottom: "+=1%"
        }, 200)
    },
    function() {
        $(this).animate({
            marginTop: "-=1%",
            marginBottom: "+=1%"
        })
    }
)
</script>

会员Table:

验证它是否正常加载并查看问题是否仍然存在occurs.If它工作正常，您可以继续添加您想要的其他逻辑。

bootstrap 卡片 ahown 错误 NullReferenceException: 对象引用未设置到对象的实例

bootstrap cards ahown error NullReferenceException: Object reference not set to an instance of an object

asp.net-mvc

asp.net-core

asp.net-core-mvc