ASP.Net MVC Create View Multiple Models

Question

Ok so I have the following scenario

I have 2 data models one is user_details which looks like this

public partial class user_details
{
    public int id { get; set; }
    public string username { get; set; }
    public string pincode { get; set; }
    public string mobilenumber { get; set; }
    public int secq1id { get; set; }
    public string secanswer1 { get; set; }
    public int secq2id { get; set; }
    public string secanswer2 { get; set; }
}

The other is security_questions model which looks like this

public partial class security_questions
{
    public int id { get; set; }
    public string security_question { get; set; }
}

I then have a controller which looks like this

public class NewUserProfileViewModel
{
    public IEnumerable<security_questions> Questions { get; set; }
    public IEnumerable<user_details> EditableDetails { get; set; }
}

public class ProfileController : Controller
{
    private readonly CCLPasswordManagementDBEntities passwordManagementConnection = new CCLPasswordManagementDBEntities();

    public ActionResult Manage()
    {
        bool userfound = false;
        var userItemsModel = passwordManagementConnection.View_registered_userdetails;

        foreach (var item in userItemsModel.Where(item => item.username == User.Identity.Name))
        {
            userfound = true;
        }
        if (userfound)
        {
            UserProfileInfoViewModel upi = new UserProfileInfoViewModel
            {
                RegisteredDetails = userItemsModel,
                Questions = passwordManagementConnection.security_questions
            };
            return View(upi);
        }
        return RedirectToAction("Register");
    }

    public ActionResult Register()
    {
        NewUserProfileViewModel upi = new NewUserProfileViewModel
        {
            Questions = passwordManagementConnection.security_questions,
            EditableDetails = passwordManagementConnection.user_details
        };
        return View(upi);
    }

    [HttpPost]
    public ActionResult Register(NewUserProfileViewModel newUserProfile)
    {
        if (ModelState.IsValid)
        {
            return RedirectToAction("Index", "Home");
        }
        else
        {
            return View(newUserProfile);
        }
    }

When it goes to the register action I have a view like below

    @model ServiceDeskMVCTool.Controllers.NewUserProfileViewModel
@{
    ViewBag.Title = "Register Account";
    Layout = "~/Views/Shared/_CCLLayoutStandard.cshtml";
}

@section title {<h1>@ViewBag.Title</h1>}
@section subtitle {<h3>Hi @User.Identity.Name You have not set up your profile yet</h3>}

<div id="page-block" class="page-block-three row">
    <div class="col-lg-offset-3 col-lg-6">

        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <fieldset>
                <div class="form-group">
                    <h5>Pincode</h5>
                    @Html.TextBoxFor()
                </div>
            </fieldset>
            <div class="form-group">
                <h5>Pincode</h5>
                <input class="form-control ccl-form input-md" id="textinput" name="textinput" placeholder="Enter a 6 digit pincode" type="text">
            </div>
            <!-- Mobile Number -->
            <div class="form-group">
                <h5>Mobile Number</h5>
                <input class="form-control ccl-form input-md" id="textinput" name="textinput" placeholder="Enter your work mobile number" type="text">
            </div>
            <!-- Security Question 1 -->
            <div class="form-group">
                <h5>Security Question 1</h5>
                <select class="form-control ccl-form" id="selectbasic" name="selectbasic">
                    @foreach (var item in Model.Questions)
                    {
                        <option value="@item.id">@item.security_question</option>
                    }
                </select>
                <input class="form-control ccl-form input-md form-padding" id="textinput" name="textinput" placeholder="Enter your security answer" type="text">
            </div>
            <!-- Security Question 2 -->
            <div class="form-group">
                <h5>Security Question 2</h5>
                <select class="form-control ccl-form" id="selectbasic" name="selectbasic">
                    @foreach (var item in Model.Questions)
                    {
                        <option value="@item.id">@item.security_question</option>
                    }
                </select>
                <input class="form-control ccl-form input-md form-padding" id="textinput" name="textinput" placeholder="Enter your security answer" type="text">
            </div>
        }

        <button style="margin-top: 10px" class="btn ccl-btn ccl-btn-md ccl-btn-red pull-right" type="button">Register</button>
    </div>
</div>

What I am trying to do is make a few Html.TextboxFor but when I pass Html.TextboxFor(model => model.editabledetails.pincode) This does not work

I am fairly new at this so please go easy!!

Thanks!

Answer 1

@model ServiceDeskMVCTool.Controllers.NewUserProfileViewModel
@{
    ViewBag.Title = "Register Account";
    Layout = "~/Views/Shared/_CCLLayoutStandard.cshtml";
}

@section title {<h1>@ViewBag.Title</h1>}
@section subtitle {<h3>Hi @User.Identity.Name You have not set up your profile yet</h3>}

<div id="page-block" class="page-block-three row">
    <div class="col-lg-offset-3 col-lg-6">

        @using (Html.BeginForm())
        {
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })

            <fieldset>
                <div class="form-group">
                    <h5>Pincode</h5>
                    @Html.TextBoxFor(x => x.UserDetail.pincode, new { @class = "form-control ccl-form input-md", placeholder = "Enter a 6 digit pincode" })
                </div>
                <div class="form-group">
                    <h5>Mobile Number</h5>
                    @Html.TextBoxFor(x => x.UserDetail.mobilenumber, new { @class = "form-control ccl-form input-md", placeholder = "Enter your work mobile number" })
                </div>
                <div class="form-group">
                    <h5>Security Question 1</h5>
                    <select class="form-control ccl-form" id="selectbasic" name="UserDetail.secq1id">
                        @foreach (var item in Model.Questions)
                        {
                            <option value="@item.id">@item.security_question</option>
                        }
                    </select>
                    @Html.TextBoxFor(x => x.UserDetail.secanswer1, new { @class = "form-control ccl-form input-md form-padding", placeholder = "Enter your security answer" })
                </div>
                <div class="form-group">
                    <h5>Security Question 2</h5>
                    <select class="form-control ccl-form" id="selectbasic" name="UserDetail.secq2id">
                        @foreach (var item in Model.Questions)
                        {
                            <option value="@item.id">@item.security_question</option>
                        }
                    </select>
                    @Html.TextBoxFor(x => x.UserDetail.secanswer2, new { @class = "form-control ccl-form input-md form-padding", placeholder = "Enter your security answer" })
                </div>
                <input type="submit" style="margin-top: 10px" class="btn ccl-btn ccl-btn-md ccl-btn-red pull-right" value="Register" />
            </fieldset>
        }
    </div>
</div>

This seems to be workin.

Thankyou so much for your help.

Answer 2

You need to have a singular object, not an IEnumerable, in your View Model to bind to... Try something like this.

View Model

public class NewUserProfileViewModel
{
    public IEnumerable<security_questions> Questions { get; set; }
    public IEnumerable<user_details> EditableDetails { get; set; }

    public user_details UserDetail { get; set; }
}

In your View

@Html.TextBoxFor(x => x.UserDetail.pincode)