locked
How to pass the model data to Partial View in .NET Core RRS feed

  • Question

  • User-1256377279 posted

    Hi All,

    I have partial view in main Index.cshtml, How to pass model to Partial view using ASP.NET core 3.0 mvc

    Many Thanks,

    Shabbir

    Tuesday, April 7, 2020 11:44 AM

Answers

  • User-217098811 posted

    <trans oldtip="Hi shabbir," newtip="嗨,Shabbir,">Hi Shabbir,</trans>

    There is no essential difference between the definition of view and partial view. Both of them are used to create. Cshtml file as view, only to render / load as partial view when rendering.

    The common razor view file name is_ Start and place in the /views/shared folder, and partial views are no exception.

    For example, / views / shared/_ PartialViewTest.cshtml

    If a partial view is only referenced in the view returned by a controller, you can also create a view directory corresponding to that controller.

    For example, / views / home/_ PartialViewTest.cshtml

    Synchronous reference

    @ Html.Partial ( PartialViewTest")

    Asynchronous reference

    @await Html.PartialAsync ( PartialViewTest")

    For example:

    1:Model:

    using System;
    namespace Ken.Tutorial.Web .Models
    {
        public class NoteViewModel
        {
            public string Title { get; set; }
            public DateTime PublishTime { get; set; }
            public string Body { get; set; }
        }
    }



    2:Partial views:
    Create views in / views / shared directory '_ NoteInfo.cshtml '

    @model Ken.Tutorial.Web . Models.NoteViewModel ;
    <h3>@ Model.Title </h3>
    <span>@ Model.PublishTime.ToString ("yyyy-MM-dd")</span>
    <p>@ Model.Body </p>
    
    

    3:Reference in index view:

    @await Html.PartialAsync ( Noteinfo ", new noteviewmodel() {title =" this is a partial view test note ", publishtime= DateTime.Now , body = "this is the content of the note"})

    4:Write the corresponding action in the controller

    In the controller PartialController.cs Add the following actions in:

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

    Best Regards,

    Yinqiu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 28, 2020 5:15 AM

All replies

  • User439975351 posted

    In the parent view:

    @{
          await Html.RenderPartialAsync("_Page", model);
    }



    Tuesday, April 7, 2020 1:08 PM
  • User-1256377279 posted

    Is _Page is name of the ActionResult or Name of the Parial.

    Can you also provide how to call in Controller as well.

    Many Thanks,

    Shabbir

    Tuesday, April 7, 2020 2:42 PM
  • User439975351 posted

    In this example "_Page" is the name of the Partial View file.

    If you are passing a model from the parent views controller then this is the model that will be passed through.

    If you want to send a different model then you may have to pass this in as View Data and cast it then pass it through as a named model. So if you passed ViewBag.MyPartialModel for example:

    var myPartialModel = (MyPartialModel)ViewbBag.MyPartialModel;

    In your Partial View file you will also need to specify the model that it should expect:

    @model MyPartialModel

    @{
          await Html.RenderPartialAsync("_Page", myPartialModel);
    }
    Tuesday, April 7, 2020 2:47 PM
  • User711641945 posted

    Hi shabbir,

    Here is a working demo about how to use partial view:

    1.Model:

    public class ParentViewModel
    {
        public int Id { get; set; }
        public string Firstname { get; set; }
        public string Fullname { get; set; }
        public ChildViewModel Children { get; set; }
    }
    
    public class ChildViewModel
    {
        public string Child1 { get; set; }
        public string Child2 { get; set; }
    }

    2.Index.cshtml:

    @model ParentViewModel
    
    <div>
        @Model.Id
    </div>
    <div>
        @Model.Firstname
    </div>
    
    @*you could pass child model*@
    @await Html.PartialAsync("_Partial1", Model.Children)
    
    @await Html.PartialAsync("_Partial2", Model)

    3._Partial1.cshtml:

    @model ChildViewModel
    <div>
        @Model.Child1
    </div>
    <div>
        @Model.Child2
    </div>

    4._Partial2.cshtml:

    @model ParentViewModel
    <div>
        @Model.Fullname
    </div>

    5.Controller:

    public IActionResult Index()
    {
        var data = new ParentViewModel()
        {
            Id = 1,
            Firstname = "aaa",
            Fullname = "aaaBC",
            Children = new ChildViewModel()
            {
                Child1 = "aa1",
                Child2 = "aa2"
            }
        };
        return View(data);
    }

    More details about partial view,you could refer to:

    https://docs.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-3.1

    Best Regards,

    Rena

    Wednesday, April 8, 2020 2:17 AM
  • User-217098811 posted

    <trans oldtip="Hi shabbir," newtip="嗨,Shabbir,">Hi Shabbir,</trans>

    There is no essential difference between the definition of view and partial view. Both of them are used to create. Cshtml file as view, only to render / load as partial view when rendering.

    The common razor view file name is_ Start and place in the /views/shared folder, and partial views are no exception.

    For example, / views / shared/_ PartialViewTest.cshtml

    If a partial view is only referenced in the view returned by a controller, you can also create a view directory corresponding to that controller.

    For example, / views / home/_ PartialViewTest.cshtml

    Synchronous reference

    @ Html.Partial ( PartialViewTest")

    Asynchronous reference

    @await Html.PartialAsync ( PartialViewTest")

    For example:

    1:Model:

    using System;
    namespace Ken.Tutorial.Web .Models
    {
        public class NoteViewModel
        {
            public string Title { get; set; }
            public DateTime PublishTime { get; set; }
            public string Body { get; set; }
        }
    }



    2:Partial views:
    Create views in / views / shared directory '_ NoteInfo.cshtml '

    @model Ken.Tutorial.Web . Models.NoteViewModel ;
    <h3>@ Model.Title </h3>
    <span>@ Model.PublishTime.ToString ("yyyy-MM-dd")</span>
    <p>@ Model.Body </p>
    
    

    3:Reference in index view:

    @await Html.PartialAsync ( Noteinfo ", new noteviewmodel() {title =" this is a partial view test note ", publishtime= DateTime.Now , body = "this is the content of the note"})

    4:Write the corresponding action in the controller

    In the controller PartialController.cs Add the following actions in:

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

    Best Regards,

    Yinqiu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, May 28, 2020 5:15 AM