Develop Reference

List returning null when value are being passed to it in view with select2

Hi everyone so Im in the process of developing a checkout system. Right now it works fine checking out one item at a time but I would like to be able to checkout multiple at a time using select2 jquery. I have it setup but for some reason my List Items property is returning null instead of storing the items that Im trying to check out and I cant seem to find the fix. Hoping someone can help me out here.
Here is theModel Class and View Model that I have tried:
public class CheckOutItem
{
private string _timeAsString = "";
public int Id { get; set; }
public string Department { get; set; }
public string Role { get; set; }
public string UserId { get; set; }
[NotMapped]
public List<string> Items { get; set; }
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{MM/dd/yyyy h:mm tt}")]
[Display(Name = "Date Checked Out")]
public DateTimeOffset DateCheckedOut { get; set; }
= DateTime.Now;
}
public class CheckOutItemVM
{
public int Id { get; set; }
[ForeignKey("Item")]
public int ItemId{ get; set; }
public Item Item{ get; set; }
[ForeignKey("Employee")]
public int EmployeeId { get; set; }
public Employee Employee { get; set; }
public string Department { get; set; }
public string Role{ get; set; }
public string UserId { get; set; }
[NotMapped]
public List<string> Items{ get; set; }
[DataType(DataType.DateTime)]
[Display(Name = "Date Checked Out")]
[DisplayFormat(DataFormatString = "{MM/dd/yyyy h:mm tt}")]
public DateTimeOffset DateCheckedOut { get; set; }
= DateTime.Now;
public Item GetItemInstance()
{
return new Item
{
Id = 0,
UserId = this.UserId,
Department = this.Department,
Role = this.Role,
DateCheckedOut = this.DateCheckedOut,
RecordedTime = this.RecordedTime,
Items = this.Items
};
}
}
Controller: "ItemID" in the ViewBag in CheckOutItem() is the string id of an item from the item class in the item database table
[HttpGet]
public IActionResult CheckOutItems()
{
ViewBag.ItemId = new SelectList(_db.Items.ToList(), "ItemID", "ItemID");
return View();
}
[HttpPost, ValidateAntiForgeryToken]
public IActionResult CheckOutItems(CheckOutItemVM iVM)
{
var checkout = iVM.GetItemInstance();
_itemManage.CheckOutItems(checkout);
return View(iVM);
}
View:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".itemSelect").select2({
placeholder: "Select Items(s) to CheckOut",
tags: true,
allowClear: true
});
});
</script>
<h1>#ViewData["Title"]</h1>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="CheckOutItems">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="UserId" class="control-label">User ID</label>
<input id="UserId" asp-for="UserId" class="form-control" />
<span asp-validation-for="UserId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Department" class="control-label"></label>
<select asp-for="Department" class="form-control">
<option selected value=""></option>
#foreach (var d in departments)
{
<option>#d.ToString()</option>
}
</select>
<span asp-validation-for="Department" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Role" class="control-label">Role</label>
<select asp-for="Role" class="form-control">
<option selected value=""></option>
#foreach (var r in roles)
{
<option>#r.ToString()</option>
}
</select>
<span asp-validation-for="Role" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Items" class="control-label">Items To Checkout</label>
<select asp-for="Items" class="itemSelect form-control" name="itemss" multiple asp-items="ViewBag.ItemId">
<option value="Select Items(s) To Checkout" disabled></option>
</select>
</div>
<div class="form-group">
<label asp-for="DateCheckedOut" class="control-label" hidden></label>
<input asp-for="DateCheckedOut" class="form-control" hidden />
<span asp-validation-for="DateCheckedOut" class="text-danger" hidden></span>
</div>
<div class="form-group">
<input id="onCheckoutSubmit" type="submit" value="Check Out" class="btn btn-primary" />
</div>
</form>
</div>
</div>
Sorry for the long answer but any help or suggestions are highly appreciated :)
I have asked this questions on other websites too but haven’t received any answers.

I don't see where your Items property is being instantiated, and if it isn't, then it will definitely be null.
You can instantiate it in a constructor:
public class CheckoutItem {
public CheckoutItem(){
Items = new List<string>();
}
}
or directly where you define the property:
public List<string> Items {get; set;} = new List<string>();
On a side note, collections typically do not have setters. Sometimes you need this, but often, only a get is necessary. If you need to "reset" the list, you can use .Clear() and .AddRange().

Foreign Key not showing in dropdown box | MVC

I'm somewhat new to MVC and have been following along with a tutorial but it has no answers regarding my question. For my Create page, the Foreign keys are not showing up. Basically, on the Projects page I created a project, on the People page I created a person. So when I try to create a ProjectRole on the ProjectRoles page, the ProjectId and PersonId are not showing up in the drop-down menu. Down below all of my code, I have provided a screenshot of what I have tried to put into words.
My models:
public class Project
{
public int Id { get; set; }
[Required]
[MaxLength(30)]
public string Name { get; set; }
[Required]
public DateTime StartDate { get; set; }
[Required]
public DateTime DueDate { get; set; }
public ICollection<ProjectRole> ProjectRoles { get; set; }
}
public class Person
{
public int Id { get; set; }
[Required]
[MaxLength(30)]
public string FirstName { get; set; }
[Required]
[MaxLength(30)]
public string MiddleName { get; set; }
[Required]
[MaxLength(30)]
public string LastName { get; set; }
[Required]
public string Email { get; set; }
public ICollection<ProjectRole> ProjectRoles { get; set; }
}
public class ProjectRole
{
public int Id { get; set; }
[Required]
public double HourlyRate { get; set; }
[ForeignKey("Person")]
public int PersonId { get; set; }
[ForeignKey("Project")]
public int ProjectId { get; set; }
[ForeignKey("AppRole")]
public int RoleId { get; set; }
}
My Controller code:
public IActionResult Create()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Id,HourlyRate,PersonId,ProjectId,RoleId")] ProjectRole projectRole)
{
if (ModelState.IsValid)
{
_context.Add(projectRole);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
return View(projectRole);
}
And my view code here:
#model Project2.Models.Entities.ProjectRole
#{
ViewData["Title"] = "Create";
}
<h1>Create</h1>
<h4>ProjectRole</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="HourlyRate" class="control-label"></label>
<input asp-for="HourlyRate" class="form-control" />
<span asp-validation-for="HourlyRate" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="PersonId" class="control-label"></label>
<select asp-for="PersonId" class ="form-control" asp-items="ViewBag.PersonId"></select>
</div>
<div class="form-group">
<label asp-for="ProjectId" class="control-label"></label>
<select asp-for="ProjectId" class ="form-control" asp-items="ViewBag.ProjectId"></select>
</div>
<div class="form-group">
<label asp-for="RoleId" class="control-label"></label>
<input asp-for="RoleId" class="form-control" />
<span asp-validation-for="RoleId" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
Screenshot of example of what I mean:

I suppose more personable to display the Person Name (and the Project Name) in the select controls, but to pass the PersonId (and ProjectId) to the Create method when click on the Create button.
Therefore, prepare the Person list (and the Project list) like below:
public IActionResult Create()
{
var persons = new List<SelectListItem>();
// Iterate through `Persons`
foreach(var p in _context.Persons)
{
persons.Add(new SelectListItem() { Value= p.Id, Text = p.FirstName+", "+p.LastName});
}
ViewBag.Persons = persons;
// Prepare the projects list (like `Persons` list above)
// ... your code here
ViewBag.Projects = persons;
return View(new ProjectRole(){ /* Add your code here to create the ProjectRole .../* });
}
And in the view:
<div class="form-group">
<label asp-for="PersonId" class="control-label"></label>
<select asp-for="PersonId" class="form-control" asp-items="ViewBag.Persons"></select>
</div>
<div class="form-group">
<label asp-for="ProjectId" class="control-label"></label>
<select asp-for="ProjectId" class="form-control" asp-items="ViewBag.Projects"></select>
</div>
For additional information see The Select Tag Helper
*NOTE: And I would recommend to create compound view model to include all required information. *
ViewModels or ViewBag?
Understanding Best Way to Use Multiple Models in ASP.NET MVC

Displaying dropdownlistfor from database

What I'm trying to do--
I have two different database tables (CabinetI, AdminCabinetI). AdminCabinetI has populated data(Column name ItemID) that has to be displayed to users as a dropdownlist. Once users fill out other information, make selections from the dropdownlist and hit the submit button, that data goes to CabinetI.
When I add Dropdownlistfor, it starts throwing an error. I've tried a lot of different ways, but nothing worked. So at this point, I would like to show my code and see what I've done wrong.
This is my ViewModel --
public class MultipleViews
{
public Note note { get; set; }
public AdminCabinetI admincabinetI { get; set; }
public CabinetI cabineti { get; set; }
public IEnumerable<AdminCabinetI> SelectSerialsI { get; set; }
}
This is my Models (AdminCabinetI) and (CabinetI) --
public class AdminCabinetI
{
[Key]
public int ItemNo { get; set; }
[Required(ErrorMessage = "Please enter item title")]
public string ItemName { get; set; }
[Required(ErrorMessage = "Please enter Item Serial number/ID")]
public string ItemID { get; set; }
[Required(ErrorMessage = "Please select cabinet status")]
public string ItemStatus { get; set; }
public string BA { get; set; }
public string Printer { get; set; }
}
public class CabinetI
{
[Key]
public int CabinetNo { get; set; }
[Required]
public string CabinetName { get; set; }
[Required]
public string Department { get; set; }
[Required(ErrorMessage = "Please enter your name")]
public string UserName { get; set; }
[Required(ErrorMessage = "Please select one of cabinet serial numbers")]
public string CabinetSerial { get; set; }
[Required(ErrorMessage = "Please select cabinet status")]
public string CabinetStatus { get; set; }
[Required(ErrorMessage = "Please type specify cabinet location")]
public string CabinetLocation { get; set; }
}
And this is my View --
#model PreMode.ViewModels.MultipleViews
<div class="form-group">
<label>Category</label>
<input type="text" readonly="readonly" class="form-control" style="opacity: 0.6" value="I2" asp-for="cabineti.CabinetName">
</div>
<div class="form-group">
<label>Department</label>
<select class="form-control" asp-for="cabineti.Department">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" asp-for="cabineti.UserName" placeholder="Please enter your name" />
<span class="text-danger" asp-validation-for="cabineti.UserName"></span>
</div>
<div class="form-group">
<label>Serial Number</label>
#Html.DropDownListFor(model => model.admincabinetI, new SelectList(Model.admincabinetI.ItemID, "ItemID"), "Select Cabinet Serial #", new { #class = "form-control" })
</div>
<div class="form-group">
<label>Status</label>
<select class="form-control" asp-for="cabineti.CabinetStatus">
<option value="In Use">In Use</option>
<option value="Not In Use">Not In Use</option>
<option value="Testing">Testing</option>
</select>
<span class="text-danger" asp-validation-for="cabineti.CabinetStatus"></span>
</div>
<div class="form-group">
<label>Location</label>
<input type="text" class="form-control" asp-for="cabineti.CabinetLocation" placeholder="Please type current location of the cabinet" />
<span class="text-danger" asp-validation-for="cabineti.CabinetLocation"></span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Checkout</button>
<a class="btn btn-warning" href="/Cabinet/MainCabinetI">Cancel</a>
</div>
</form>
And this is my Controller--
public IActionResult GetDropDown()
{
if (ModelState.IsValid)
{
using (var db = new DataMigration())
{
var CabinetSerialsI = db.AdminCabinetI.ToList();
var viewModel = new MultipleViews
{
SelectSerialsI = CabinetSerialsI
};
return View(viewModel);
}
}
return View();
}

SelectList doesn't have an overload method that matches your intentions. In HTML land a select element has both values and descriptions, similar to a KeyValuePair. In your case both the key and value are the same. To account for that, try:
SelectList(Model.admincabinetI.ItemID, "ItemID", "ItemID")

Add a constructor to the MultipleViews class and set the variables such as this
public MultipleViews()
{
this.Note = new Note();
this.AdminCabinetI = new AdminCabinetI ();
this.CabinetI = new CabinetI ();
this.SelectSerialsI = new List<AdminCabinetI>();
}
You had not declared the variables before you set their value.

Add Datas to different two tables with using same view and controller

I am trying to add datas to two different tables using same view and controller. But I am stuck. I am new at MVC, please let me know what did I wrong.Dto Model, Controller, Facade, Servicei,View and Entity Model as follows.
I get this Error
The model item passed into the dictionary is of type 'LibOrganizerEntity.Entity.OrgProje', but this dictionary requires a model item of type 'LibOrganizerSvc.Dto.ProjeEkleDto'.
Entity Models
[Table("KAR_PROJE")]
public class OrgProje
{
[Key, Required]
[Column("SIRA_NO")]
public int ID { get; set; }
[Column("ACIKLAMA")]
public string Aciklama { get; set; }
[Column("PLANLANAN_BASLANGIC_TARIHI")]
public DateTime? PlanlananBaslangicTarihi { get; set; }
[Column("PLANLANAN_BITIS_TARIHI")]
public DateTime? PlanlananBitisTarihi { get; set; }
[Column("GERCEKLESEN_BASLANGIC_TARIHI")]
public DateTime? GerceklesenBaslangicTarihi { get; set; }
[Column("GERCEKLESEN_BITIS_TARIHI")]
public DateTime? GerceklesenBitisTarihi { get; set; }
[Column("SILINME_TARIHI")]
public DateTime? SilinmeTarihi { get; set; }
[Column("YONETICI_ID")]
public int? YoneticiId { get; set; }
[ForeignKey("YoneticiId")]
public virtual OrgPersonel OrgPersonel { get; set; }
public virtual OrgProjeButce OrgProjeButce { get; set; }
public virtual OrgButce Butce { get; set; }
}
[Table("KAR_PROJE_BUTCE")]
public class OrgProjeButce
{
[Key, Required]
[Column("ID")]
public int ID { get; set; }
[Column("BUTCE_ID")]
public int ButceId { get; set; }
[Column("BUTCE_TUTAR")]
public float ButceTutar { get; set; }
[Column("GERCEKLESEN")]
public float? Gerceklesen { get; set; }
[ForeignKey("ButceId")]
public virtual OrgButce OrgButce { get; set; }
}
Dto Model
public class ProjeEkleDto
{
public string Aciklama { get; set; }
public DateTime? PlanlananBaslangicTarihi { get; set; }
public DateTime? PlanlananBitisTarihi { get; set; }
public DateTime? GerceklesenBaslangicTarihi { get; set; }
public DateTime? GerceklesenBitisTarihi { get; set; }
public DateTime? SilinmeTarihi { get; set; }
public string YoneticiAdi { get; set; }
public string YoneticiSoyadi { get; set; }
public string YoneticiId { get; set; }
public int ButceId { get; set; }
public string ButceAdi { get; set; }
public float ProjeButceTutari { get; set; }
public virtual IEnumerable<OrgPersonel> Proje { get; set; }
public virtual IEnumerable<OrgProjeButce> Butce { get; set; }
}
Controller
public ActionResult ProjeEkle()
{
return View();
}
[HttpPost]
public ActionResult ProjeEkle(OrgProje model)
{
try
{
svc.ProjeEkle(model);
return RedirectToAction("Index", "Home");
}
catch(Exception ex)
{
}
return View(model);
}
Service
public void ProjeEkle(OrgProje proje)
{
var dto = new ProjeFacade(db);
dto.ProjeEkle(proje);
}
Facade
public void ProjeEkle(OrgProje proje)
{
db.OrgProjeler.Add(proje);
db.SaveChanges();
}
View
#model LibOrganizerSvc.Dto.ProjeEkleDto
#{
ViewBag.Title = "ProjeEkle";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm())
{
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Proje Ekle</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<h4 class="heading_a">Proje Detayları</h4>
<div class="form-group" style="width: 47%; float: left">
<label for="reg_input">Proje Adı</label>
<input type="text" id="#Html.IdFor(x => x.Aciklama)" class="form-control">
</div>
<div class="form-group" style="width: 47%; float: right;">
<label for="reg_input">Proje Yöneticisi</label>
<select id="#Html.IdFor(x => x.YoneticiId)" name="chn_country" class="form-control">
#Html.Action("_PersonelleriGetir", "Ortak")
</select>
</div>
<div class="form-group" style="width: 47%; float: right;">
<label for="reg_input">Proje Bütçe Türleri</label>
<select id="#Html.IdFor(x => x.ButceAdi)" name="#Html.IdFor(x => x.ButceAdi)" class="form-control">
#Html.Action("_ButceleriGetir", "Ortak")
</select>
</div>
<div class="col-sm-6" style="padding-left: 0;">
<label for="reg_input">Proje Bütçesi</label>
<input type="text" id="#Html.IdFor(x => x.ProjeButceTutari)" class="form-control" name="#Html.IdFor(x => x.ProjeButceTutari)">
<span class="help-block">2000 ₺</span>
</div>
</div>
<div class="col-sm-6">
<h4 class="heading_a">Proje Zaman Ayarları</h4>
</div>
<div class="col-sm-3">
<label for="reg_input">Planlanan Başlama Tarihi</label>
<div class="input-group date ebro_datepicker" data-date-format="dd-mm-yyyy" data-date-autoclose="true">
<input class="form-control" type="text" id="#Html.IdFor(x => x.PlanlananBaslangicTarihi)">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
</div>
<div class="col-sm-3">
<label for="reg_input">Planlanan Bitiş Tarihi</label>
<div class="input-group date ebro_datepicker" data-date-format="dd-mm-yyyy" data-date-autoclose="true">
<input class="form-control" type="text" id="#Html.IdFor(x => x.PlanlananBitisTarihi)">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
</div>
<div class="col-sm-3">
<label for="reg_input" style="margin-top: 15px;">Gerçekleşen Başlama Tarihi</label>
<div class="input-group date ebro_datepicker" data-date-format="dd-mm-yyyy" data-date-autoclose="true">
<input class="form-control" type="text" id="#Html.IdFor(x => x.GerceklesenBaslangicTarihi)">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
</div>
<div class="col-sm-3">
<label for="reg_input" style="margin-top: 15px;">Gerçekleşen Bitiş Tarihi</label>
<div class="input-group date ebro_datepicker" data-date-format="dd-mm-yyyy" data-date-autoclose="true">
<input class="form-control" type="text" id="#Html.IdFor(x => x.GerceklesenBitisTarihi)">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
</div>
</div>
<div style="float: left; margin-top: 20px; width: 90%; position: relative; left: 15px;">
<input type="submit" class="btn btn-default btn-lg" value="Kaydet" />
</div>
</div>
</div>
</div>
</div>
</div>
}

As the error message indicates, you are passing a class of type OrgProje to a view that requires a view of type ProjeEkleDto.
Your error occurs in this action method:
[HttpPost]
public ActionResult ProjeEkle(OrgProje model)
{
try
{
svc.ProjeEkle(model);
return RedirectToAction("Index", "Home");
}
catch(Exception ex)
{
}
return View(model); // Passing a view model of the wrong type to the view
}
Either pass a view model of type ProjeEkleDto back to the view instead of your model of type OrgProje, or create a different view that accepts a view model of type OrgProje.

In your view Change -
#model LibOrganizerSvc.Dto.ProjeEkleDto
to
#model NameSpace.ProjeEkleDto
I am not sure about which namespace to be used, but you replace NameSpace with appropriate one.

how to use multiple Checkbox in ASP.Net mvc3 Razor

In my ASP.Net MVC3 Razor project i have to implement a customer registration form(Screen Shot Attached).In that form , a single entity (say :purpose of doing DMIt) contains more than one answer.So i use checkbox to select the multiple or single answer.I have the view page and also a Model.How to code the View page to select multiple checkbox and also in Controller.
Controller Code
public ActionResult CustomerRegistration()
{
return View();
}
Model Code
namespace Elixir.Models
{
[Table("tbl_ElixirCustomer")]
public class Customer
{
[Key]
public int CusId { get; set; }
public string Name { get; set; }
public int age { get; set; }
public int Gender { get; set; }
public string FathName { get; set; }
public string MothName { get; set; }
public string OrgSchooName { get; set; }
public string Address { get; set; }
public string city { get; set; }
public string State { get; set; }
public string PIN { get; set; }
public string tele { get; set; }
public string Mob { get; set; }
public string Email { get; set; }
public string Web { get; set; }
public string Purpose { get; set; }
public string brief { get; set; }
}
public class CustomerViewModel
{
public string Purpose { get; set; }
public int Id { get; set; }
public bool IsChecked { get; set; }
}
}
View Code
<div class="col-lg-10">#Html.TextBoxFor(Model => Model.Mob, new { #class = "form-control" })</div>
<label class="col-lg-2 control-label">
Email</label>
<div class="col-lg-10">#Html.TextBoxFor(Model => Model.Email, new { #class = "form-control" })</div>
<label class="col-lg-2 control-label">
Web Site</label>
<div class="col-lg-10">#Html.TextBoxFor(Model => Model.Web, new { #class = "form-control" })</div>
<label class="col-lg-2 control-label">
Purpose of doing DMIT</label>
<div class="col-lg-10">
<div class="styled-chekbox">
<input type="checkbox" checked class="icheck-box-flat">
</div>
<span class="checkbox-label">Career Planning</span>
<div class="styled-chekbox">
<input type="checkbox" checked class="icheck-box-flat">
</div>
<span class="checkbox-label">Personel</span>
<div class="styled-chekbox">
<input type="checkbox" checked class="icheck-box-flat">
</div>
<span class="checkbox-label">Relationship</span>
<div class="styled-chekbox">
<input type="checkbox" checked class="icheck-box-flat">
</div>
<span class="checkbox-label">Parenting</span>
<div class="styled-chekbox">
<input type="checkbox" checked class="icheck-box-flat">
</div>
<span class="checkbox-label">Activity Plan for children</span>
<div class="styled-chekbox">
<input type="checkbox" checked class="icheck-box-flat">
</div>
<span class="checkbox-label">Stress Management</span>
</div>
<label class="col-lg-2 control-label">
Any Challenges</label>
<div class="col-lg-10">#Html.TextAreaFor(model => model.brief, new { #class = "tinymce-simple span12", #row = "170", #cols = "45", #width = "40%" })</div>
<div class="col-lg-2 control-label"></div>
<div class="col-lg-10">
#*<input type="button" class="" />*# #* <button type="submit" class = "btn btn-success">#Html.ActionLink("Save", "EmployeeRegistration", "Home")</button>*#
#* <button type="submit" >#Html.ActionLink("Save", "EmployeeRegistration", "Home", new { #class = "btn btn-success" })</button>*#
<input type="submit" class="btn btn-success" value="Save" />
<button class="btn btn-success">
Clear</button>
<button class="btn btn-success">
Cancel</button>
</div>

In CustomerViewModel you can have separate properties for every option
public bool CareerPlanning { get; set; }
public bool Personal{ get; set; }
public bool RelationShip{ get; set; }
and So on.....
Then in view you can have field for these properties
#Html.CheckBoxFor(Model => Model.CareerPlanning )<span> Career Planning </span>
#Html.CheckBoxFor(Model => Model.Personal)<span> Personal </span>
#Html.CheckBoxFor(Model => Model.RelationShip) <span> RelationShip</span>
and So on.....
Now in controller you need to modify Purpose depending on all checkbox value
StringBuilder sb=new StringBuilder();
if(model.CareerPlanning)
sb.Append("Carrer Planning");
if(model.Personal)
sb.Append("-Personal");
and so on....
and at the end
model.Purpose=sb.ToString();

Create a Boolean property in model
Model:
public String Question{ get; set; }
public Boolean Options{ get; set; }
public String OptionContent{ get; set; }
...so on
Pass this model into the view and then use EditorFor html helper.
#using (Html.BeginForm("actionname", "Home", FormMethod.Post, null)){
<div>
#Html.LabelFor(model => model.Question)
</div>
<div>
#Html.EditorFor(model => model.Option)
#Html.LabelFor(model => model.OptionContent)
</div>
}