.NETCORE從控制器呼叫ViewComponent

我在從控制器加載 ViewComponent 時遇到問題，我的主視圖是 Contact.cshtml，我的 ViewComponent 是 AddContact.cshtml。AddContact 是一個帶有提交按鈕的簡單表單，我正在嘗試獲取它，以便在模型無效時，使用輸入的資料和模型驗證訊息重繪 組件。

問題是當我在控制器中回傳 "ViewComponent("AddContact", newContact)" 然后無效模型 'newContact' 時，它會在一個全新的頁面中重新加載 ViewComponent，而不是作為聯系人視圖中的一部分。是否有一些我遺漏的語法，或者這是否需要完全其他的東西？

聯系方式.cshtml：

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

添加聯系人.cshtml

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

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

控制器：

[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);
    }
}

uj5u.com熱心網友回復：

您可以創建一個特定的操作來將請求定向到 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");
        }
    }

之后，您應該Home.cshtml在 Shared>Components>Home 下創建您的組件。

獎金：

我有一個左側導航欄。通過導航欄中的錨點，我正在使用視圖組件更改右側的內容。這是實作這一點的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);
    });
});

uj5u.com熱心網友回復：

問題是當我在控制器中回傳 "ViewComponent("AddContact", newContact)" 然后無效模型 'newContact' 時，它會在一個全新的頁面中重新加載 ViewComponent，而不是作為聯系人視圖中的一部分。

原因是程式首先執行 if 陳述句的內容，然后代碼回傳到 AddContact 頁面。因此它在一個全新的頁面中重新加載 ViewComponent，而不是在 Contact 視圖中作為部分加載。

您可以嘗試更改回傳 ViewComponent("AddContact", newContact); 進入回傳視圖（“聯系人”）；在您的控制器中的if方法中。

我做了一個 Demo 來滿足您的要求。Demo如下。

1.在控制器中，使用接觸動作。

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.Component 類是您的 AddContact。

結果：

標籤：C＃ asp.net-mvc asp.net核心 模型验证 asp.net-core-viewcomponent

上一篇：有沒有一種簡單的方法可以將表單從ASP.NETMVC轉發到ASP.NETAPI？

下一篇：無法安裝ROSMelodicUbuntu21.10