Loading a Partial view which has a complex model of many sub models into a jquery ui tab

Question

I get an error when loading a particular view via an Html.action call to an action and Controller, into a jquery Tab. The other View is loaded successfully via an HTML.Partial call. How do I get this other particular partial loaded please.

The tab where the error happens is tab4. The commented out HTML.Partial call works to a point but when it loads that Partial (User), which has multiple models in it's containing model,..those other models are null and it's iteration over them crashes. (That partial is beneath the first block of code.) If I try load it from an action Call, then the JQuery function ("$#tabs").tabs crashes with ".tabs" is undefined

TIA

Code:

<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Content via Ajax</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function ()
    {
        $("#tabs").tabs({
            beforeLoad: function (event, ui)
            {
                ui.jqXHR.fail(function ()
                {
                    ui.panel.html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo.");
                });
            }
        });
    });
</script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Person Detail</a></li>
        <li><a href="#tabs-2">Addresses</a></li>
        <li><a href="#tabs-3">Role Detail</a></li>
        <li><a href="#tabs-4">User Detail</a></li>
    </ul>

    <div id="tabs-1">
        @*@Html.Partial("~/Views/Person/Index.cshtml")*@
    </div>

    <div id="tabs-2">
        @*@Html.Partial("~/Views/Address/Index.cshtml")*@
    </div>

    <div id="tabs-3">
        @Html.Partial("~/Views/IdentityRole/List.cshtml", new List<Catalyst.Shared.IdentityRole>())
    </div>

    <div id="tabs-4">
        @Html.Action("List", "User");

        @*@Html.Partial("~/Views/User/List.cshtml", new Catalyst.Mvc.IdentityUserPersonViewModel())*@


    </div>
</div>

The Partial which I want to load, but needs data, which I think would work if I called the Action as opposed to calling the Partial.

@model Catalyst.Mvc.IdentityUserPersonViewModel

@{
    ViewBag.User = "List";
 }


<div class="panel panel-default" style="width:1400px !important;text-align:center ">
<div class="panel-heading">
    <h3>Users</h3>
</div>
<div class="panel-body">
    <div style="text-align:right;">@Html.ActionLink("Add", "Create", null, new { @class = "btn btn-default" })</div>

    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>
                    UserName
                </th>
                <th>
                    Password
                </th>
                <th>
                    Title
                    @*@Html.DisplayNameFor(model => model.)*@
                </th>
                <th>
                    FirstName
                    @*@Html.DisplayNameFor(model => model.)*@
                </th>
                <th>
                    LastName
                </th>

                <th>
                    PhoneNumber
                </th>
                <th>
                    Email
                </th>
                <th>
                    Company and Branch
                </th>

                <th></th>
                <th></th>
            </tr>
        </thead>

        @for (var i = 0; i < Model.identityUsers.Count(); i++)
        {
        <tr>
            <td>
                <a href="@Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
                    @Html.DisplayFor(x => Model.identityUsers[i].UserName)
                </a>
            </td>
            <td>
                <a href="@Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
                    @Html.EditorFor(x => Model.identityUsers[i].PasswordHash, new { htmlAttributes = new { @class = "form-control", placeholder = "Password", Type = "password" } })
                </a>
            </td>

            <td>
                <a href="@Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
                    @Html.DisplayFor(x => Model.UserPersons[i].Title)
                </a>
            </td>
            <td>
                <a href="@Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
                    @Html.DisplayFor(x => Model.UserPersons[i].Name)
                </a>
            </td>
            <td>
                <a href="@Url.Action("Edit", "User" , new {id=Model.UserPersons[i].UserPersonId})">
                    @Html.DisplayFor(x => Model.UserPersons[i].Surname)
                </a>
            <td>
                @*<a href="@Url.Action("Edit", "User" , new {id=Model.identityUsers[i].Id})">
                    @Html.DisplayFor(x => Model.identityUsers[i].Email)
                </a>*@
            </td>
            <td>
                @*<a href="@Url.Action("Edit", "User" , new {id=Model.identityUsers[i].Id})">
                    @Html.DisplayFor(x => Model.identityUsers[i].PhoneNumber)
                </a>*@
            </td>

            <td>
                @*<a href="@Url.Action("Edit", "User" , new {id=item.ID})">
                    @Html.DisplayFor(x => item.PhoneNumber)
                </a>*@
            </td>

            <td>
                @Html.ActionLink("Edit", "Edit", new { id = 
Model.identityUsers[i].Id })
            </td>
            <td>
                @Html.ActionLink("Delete", "Delete", new { id = 
Model.identityUsers[i].Id })
            </td>
        </tr>
        }

    </table>

</div>

The Controller of the view I can't get laoded

   public class UserController : Controller
{
    private IdentityUserBo identityUserBo;
    private PersonBo personBo;
    private IdentityUserPersonBo identityuser_personBo;

    IdentityUserPersonViewModel model = new IdentityUserPersonViewModel();

    public UserController(IdentityUserBo boIdentityUser, PersonBo boPerson, IdentityUserPersonBo boIdentityUserPerson )
    {
        this.identityUserBo = boIdentityUser ?? throw new ArgumentNullException("boIdentityUser");
        this.personBo = boPerson ?? throw new ArgumentNullException("boPerson");
        this.identityuser_personBo = boIdentityUserPerson ?? throw new ArgumentNullException("boIdentityUserPerson");
    }

    public ActionResult Index()
    {
        return RedirectToAction("List");
    }

    public ActionResult List()
    {
        ExBool result = null;
        IdentityUserPersonViewModel userPersonViewModel = new IdentityUserPersonViewModel();

        result = this.identityUserBo.List(out List<IdentityUser> identityUsers);

        if (!result.Success) throw new Exception(result.Messages);
        if (identityUsers == null) throw new Exception("Could not load IdentityUsers");

        // Ideally see detail eg  branch and tel and email from their respective tables
        userPersonViewModel.identityUsers = identityUsers;

        //Get the Persons, match these via Person.Id -> IdentityUserPerson.FKPersonId + IdentityUserPerson.FKUserId -> IdentityUser.ID
        List<Person> persons = null;
        result = this.personBo.List(out persons);

        //IdentityUserPersonViewModel viewModel = new IdentityUserPersonViewModel();
        userPersonViewModel.persons = persons;

        // Get the IdentityUserPersons 
        List<IdentityUserPerson> identityUserPersons = null;
        result = this.identityuser_personBo.List(out identityUserPersons);

        IdentityUserPerson UPRec = new IdentityUserPerson();
        Person PRec = new Person();
        userPersonViewModel.UserPersons = new List<UserPerson>();

        foreach (IdentityUser rec in userPersonViewModel.identityUsers)
        {
            UPRec = identityUserPersons.Find(x => x.FKUserID == rec.Id);
            if (UPRec != null)
            {
                //UserId, UserPersonId, + Person.Id + Person.Name + Person.Surname
                PRec = persons.Find(y => y.ID == UPRec.FKPersonID);

                UserPerson UsrPers = new UserPerson();
                UsrPers.UserId = rec.Id;
                UsrPers.UserPerson_FKPersonId = UPRec.FKPersonID;
                UsrPers.UserPerson_FKUserId = UPRec.FKUserID;
                UsrPers.Name = PRec.FirstName;
                UsrPers.Surname = PRec.LastName;
                UsrPers.Title = PRec.TitleCode;

                userPersonViewModel.UserPersons.Add(UsrPers);
            }
            else
            {
                UserPerson UsrPers = new UserPerson();
                userPersonViewModel.UserPersons.Add(UsrPers);
            }
        }

        return View(userPersonViewModel);
    }

Harshit Tailor · Accepted Answer · 2018-12-20 12:55:54Z

0

Check your console what error you got.

and also change this in tab4

@{
        @Html.Partial("List", new Catalyst.Mvc.IdentityUserPersonViewModel())
    }

answered Dec 20, 2018 at 12:55

Harshit Tailor

3,2816 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neal Rogers Over a year ago

When I specify as per above or any use of Html.Partial,..the action on that partial's controller does not execute, and it's ViewModel is null. If I specify it with Html.Action, the action does fire,..but then there is no markup generatd into the tab content area.

Collectives™ on Stack Overflow

Loading a Partial view which has a complex model of many sub models into a jquery ui tab

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related