在 ASP.NET Core 3.1 MVC 中单击按钮导航到新视图

Navigate to new view on button click in ASP.NET Core 3.1 MVC

我正在尝试通过单击按钮将用户导航到新页面。我在渲染新视图时遇到问题。每当我单击该按钮时,我要么在我的页面上收到下拉菜单错误,要么我得到了主页视图,但在 URL 中有我想要的路线。我想指出的是,用户将从主页导航到此页面,我将其作为应用程序的新登录页面。我想指出这一点,以防我在这里所做的事情可以被修改。

我想从我的登陆页面导航到我的图书库存页面。

我的观点(在着陆页上):

<form method="post" asp-controller="Home" asp-action="Home" role="post">
    <div class="form-group">
        <label asp-for="bookName"></label>
        <select name="bookName" asp-items="@(new SelectList(ViewBag.message, "ID", "bookName"))">
</select>
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>
<div class="row">
    <div class="form-group">
        <a asp-controller="BookInventory" asp-action="Index">
            <input type="button" value="Book Inventory Page" /> 
        </a>
    </div>
</div>

我的控制器(在我的着陆页上)

        public void GetBooksDDL()
        {
            List<BookModel> bookName = new List<BookModel>();
            bookName = (from b in _context.BookModel select b).ToList();
            bookName.Insert(0, new BookModel { ID = 0, bookName = "" });
            ViewBag.message = bookName;
        }

        [HttpGet("[action]")]
        [Route("/Home")]
        public IActionResult Home()
        {
            GetBooksDDL()
            return View();
        }

我的控制器(在我的图书清单页面上):

        [HttpGet("[action]")]
        [Route("/Index")]
        public IActionResult Index()
        {
            return View();
        }

我想指出,我在图书库存控制器上的断点确实命中了 'return View()',但它仍会呈现主页中的项目。

我在图书下拉菜单中遇到的错误是:

ArgumentNullException: 值不能为空。 (参数'items') Microsoft.AspNetCore.Mvc.Rendering.MultiSelectList.ctor(IEnumerable items, string dataValueField, string dataTextField, IEnumerable selectedValues, string dataGroupField).

我想知道为什么在尝试导航到其他页面时会出现此错误。由于这是新的着陆页,它是否可能将其所有数据传递给其余页面?

您的锚标记格式不正确。不能在锚标记内写按钮。

做这样的事情:

<a asp-action="Index" asp-controller="BookInventory" class="btn btn-primary">Book Inventory Page</a>

这里的 class 将帮助您的锚标记看起来像按钮。我希望你在你的项目中使用过 bootstrap。如果没有,那就用吧。

希望对您有所帮助。

ArgumentNullException: Value cannot be null. (Parameter 'items') Microsoft.AspNetCore.Mvc.Rendering.MultiSelectList.ctor(IEnumerable items, string dataValueField, string dataTextField, IEnumerable selectedValues, string dataGroupField).

关于这个错误,说明你没有为select元素设置值,在return查看之前,请检查ViewBag.message值,确保它包含价值。

注意:请记得检查 post 方法,如果 Http Get 和 Post 方法 return 是同一页面,请确保设置 ViewBag.message两种操作方法中的值。

I wanted to note that my breakpoint on my book inventory controller does hit the 'return View()', but it will still render the items from the homepage.

在 BookInventory Controller Index 操作方法中,右键单击并单击“Go to View”选项,确保您已经添加了 Index 视图。

根据你的代码,我用下面的代码创建了一个示例,看起来一切正常。

家庭控制器中的代码:

    [HttpGet("[action]")]
    [Route("/Home")]
    public IActionResult Home()
    {
        GetBooksDDL();
        return View();
    }

    [HttpPost("[action]")]
    [Route("/Home")]
    public IActionResult Home(BookModel book, string bookName)
    {
        GetBooksDDL();
        //used to set the default selected value, based on the book id (bookName) to find the book.
        List<BookModel> booklist = (List<BookModel>)ViewBag.message;
        book = booklist.Find(c => c.ID == Convert.ToInt32(bookName));

        return View(book);
    }

主页视图中的代码:

@model BookModel
@{
    ViewData["Title"] = "Home";
}

<h1>Home</h1>

<form method="post" asp-controller="Home" asp-action="Home" role="post">
    <div class="form-group">
        <label asp-for="bookName"></label>
             <select name="bookName" asp-items="@(new SelectList(ViewBag.message, "ID", "bookName", Model == null? 0:Model.ID))">
        </select>
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>
<div class="row">
    <div class="form-group">
        <a asp-controller="BookInventory" asp-action="Index">
            <input type="button" value="Book Inventory Page" />
        </a>
    </div>
</div>

BookInventory 控制器中的代码:

public class BookInventoryController : Controller
{
    [HttpGet("[action]")]
    [Route("/Index")]
    // GET: BookInventory
    public ActionResult Index()
    {
        return View();
    }

截图如下:

如果还是不行,请检查你的路由配置,可能是路由配置有问题。

这是另一种简单的方法:

<button type="button" class="btn" onclick="window.location.href = '/YourPage'">Button Title</button>