locked
Partial View with Different Data Set RRS feed

  • Question

  • User739135361 posted

    Hi,

    I have a requirement, where in I am using a partial view, in a boostrap tab control. UI remains same hence using the Partial view, but data (or items) populated are different. How do I bind four differnt data set to the UI (partial view) under different tabs? Below is a mark up... is this the right approach or how?

    <nav>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
      </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
    @{
    Html.RenderPartial("~/Views/Shared/_Profiles.cshtml");
    }
    </div> <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
    @{
    Html.RenderPartial("~/Views/Shared/_Profiles.cshtml");
    }
    </div> <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
    @{
    Html.RenderPartial("~/Views/Shared/_Profiles.cshtml");
    }
    </div> </div>

    Regards

    Monday, June 8, 2020 5:08 AM

All replies

  • User1686398519 posted

    Hi,  N1ZAM

    • The code you gave is able to run, but I suggest that you modify it as follows, the layout will be better.
    • If you want to use the model on the partial view page, you can refer to the example I gave.
    • For more information about the usage of "tab" in bootstrap, you can refer to this link.

    Controller

            public ActionResult boostraptabtest()
            {
                return View();
            }
            public ActionResult Onetest()
            {
                Test test1 = new Test{Id=1,Name="Test1"};
                return PartialView("_One",test1);
            }
            public ActionResult Twotest()
            {
                List<Test2> test2 = new List<Test2>
                {
                    new Test2{Id = 1,Name = "Test21"},
                    new Test2{Id = 2,Name = "Test22"}
                };
                return PartialView("_Two",test2.ToList());
            }

    boostraptabtest

    <div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#nav-home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#nav-profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#nav-contact" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
            <li role="presentation"><a href="#nav-four" aria-controls="four" role="tab" data-toggle="tab">Four</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="nav-home">
            </div>
            <div role="tabpanel" class="tab-pane" id="nav-profile">
            </div>
            <div role="tabpanel" class="tab-pane" id="nav-contact">
                @{
                    Html.RenderPartial("~/Views/Home/_Three.cshtml");
                }
            </div>
            <div role="tabpanel" class="tab-pane" id="nav-four">
                @{
                    Html.RenderPartial("~/Views/Home/_Four.cshtml");
                }
            </div>
        </div>
    </div>
    @section scripts{
        <script>
            $(function () {
                $.ajax({
                    url: 'Onetest',
                    success: function (data) {
                        $("#nav-home").html(data);
                    }
                });
                $.ajax({
                    url: 'Twotest',
                    success: function (data) {
                        $("#nav-profile").html(data);
                    }
                });
            });
        </script>
    }

    _One

    @model WebApplication1.Models.Test
    <table class="table">
        <tr>
           <td>@Html.DisplayNameFor(m => m.Id)</td>
           <td>@Html.DisplayNameFor(m => m.Name)</td>
         </tr>
         <tr>
           <td>@Html.DisplayTextFor(m => m.Id)</td>
           <td>@Html.DisplayTextFor(m => m.Name)</td>
         </tr>
    </table>

    _Two

    @model IEnumerable<WebApplication1.Models.Test2>
    <table class="table">
       <tr>
          <td>@Html.DisplayNameFor(m => m.Id)</td>
          <td>@Html.DisplayNameFor(m => m.Name)</td>
       </tr>
       @foreach (var item in Model)
       {
        <tr>
           <td>@Html.DisplayTextFor(m => item.Id) </td>
           <td>@Html.DisplayTextFor(m => item.Name)</td>
        </tr>
        }
    </table>
    
    

    _Three

    this is three

    _Four

    this is four

    Here is the result.

    Best Regards,
    YihuiSun

    Tuesday, June 9, 2020 2:59 AM