.NET CORE 从 Controller 调用 ViewComponent

Question

我在从 controller 加载 ViewComponent 时遇到问题，我的主视图是 Contact.cshtml，而我的 ViewComponent 是 AddContact.cshtml。 AddContact 是一个带有提交按钮的简单表单，我正在尝试获取它，以便当 model 无效时，组件会使用输入的数据和 model 验证消息进行刷新。

问题是当我在 controller 中返回“ViewComponent("AddContact", newContact)" 时，model 'newContact' 无效时，它会在一个全新的页面中重新加载 ViewComponent，而不是在联系人视图中作为部分。 是否有一些我遗漏的语法或者这完全需要其他东西？

联系人.cshtml：

@await Component.InvokeAsync("AddContact", new { addContact = newContactModel })

AddContact.cshtml

@using (Html.BeginForm("AddContact", "Contact", FormMethod.Post))
{
    ....

    <input id="addContactBtn" type="submit" value="Add" class="btn btn-success">
}

Controller：

[HttpGet]
public ActionResult AddContact()
{
      return ViewComponent("AddContact");
}

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AddContact(AddContact_VM newContact)
{
      if (!ModelState.IsValid)
      {
            return ViewComponent("AddContact", newContact);
      }

      OperationStatus opStat = granteeRepo.AddContact(newContact);

      return View("Contact");
 }

零件：

public class AddContact : ViewComponent
{
    public IViewComponentResult Invoke(AddContact_VM newContact)
    {
         return View("AddContact", newContact);
    }
}

Answer 1

您可以创建一个特定的操作来将请求定向到 ViewCompoent。

这是一个例子，

对于将被定向的cshtml ：

 <a href="#" data-url='@Url.Action("LoadParametersContent","Home",new {key="Home"})'>

对于您的HomeContoller.cs

   public IActionResult LoadParametersContent(string key)
   {
       return ViewComponent(key);
   }

对于HomeViewComponent.cs ：

    public class HomeViewComponent : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            return View("Home");
        }
    }

之后，您应该在 Shared>Components>Home 下将组件创建为Home.cshtml 。

奖金：

我有一个左侧导航栏。 使用该导航栏中的锚点，我正在使用视图组件更改右侧的内容。 这是实现这一目标的 jquery：

 $('.nav-link').on('click', function (evt) { evt.preventDefault(); evt.stopPropagation(); var $detailDiv = $('#content-right'), url = $(this).data('url'); $.get(url, function (data) { $detailDiv.html(data); }); });

Answer 2

问题是当我在 controller 中返回“ViewComponent("AddContact", newContact)" 时，model 'newContact' 无效时，它会在一个全新的页面中重新加载 ViewComponent，而不是在联系人视图中作为部分。

原因是程序首先执行 if 语句的内容，然后代码返回到 AddContact 页面。所以它在一个全新的页面中重新加载 ViewComponent，而不是在 Contact 视图中作为部分。

您可以尝试更改返回 ViewComponent("AddContact", newContact); 进入返回视图（“联系人”）； 在您的 controller 中的if方法中。

我做了一个演示来满足您的要求。 Demo如下。

1.在 controller 中，使用接触动作。

public class ctController : Controller
    {
        [HttpGet]
        public IActionResult Contact()
        {
            return View();
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Contact(AddContact_VM newContact)
        {

            if (!ModelState.IsValid)
            {
                return View("Contact");
            }

            OperationStatus opStat = granteeRepo.AddContact(newContact);
            return View("Contact");
        }

2.在Contact.cshtml中，添加@await Component.InvokeAsync("AddContact")

3.在 AddContact.cshtml 中，更改表单中的操作名称。

   @model MVCviewcompent.Models.AddContact_VM
    @using (Html.BeginForm("Contact", "ct", FormMethod.Post))
    {
        <form asp-controller="ct" asp-action="Contact" method="post">
            <table border="0" cellpadding="2" cellspacing="2">
                <tr>
                    <td>Username</td>
                    <td>
                        <input asp-for="Username" />
                    </td>
                    <td>
                        <span asp-validation-for="Username"></span>
                    </td>
                </tr>
                <tr>
                    <td>Password</td>
                    <td>
                        <input asp-for="Password" type="password" />
                    </td>
                    <td>
                        <span asp-validation-for="Password"></span>
                    </td>
                </tr>
                <tr>
                    <td>Age</td>
                    <td>
                        <input asp-for="Age" />
                    </td>
                    <td>
                        <span asp-validation-for="Age"></span>
                    </td>
                    
                </tr>
    
                <tr>
                    <td>&nbsp;</td>
                    <td>
                        <input type="submit" value="Save" />
                    </td>
                </tr>
            </table>
        </form>
}

4.在 AddContact_VM.cs

public class AddContact_VM
    {
        [Required]
        [MinLength(3)]
        [MaxLength(10)]
        public string Username
        {
            get;
            set;
        }

        [Required]
        [MinLength(3)]
       
        public string Password
        {
            get;
            set;
        }


        [Required]
        [Range(18, 50)]
        public int Age
        {
            get;
            set;
        }
   }

5.组件 class 是您的 AddContact。

结果：