I am new to MVC. I have a Edit view which has some fields related to Page Menu like Name, Url etc. In the same view i have List of page roles(Admin, Customer etc) displayed as Checkboxes. In the Edit Get Request, some checkboxes are displayed selected based on the database values for that particular Page Menu.
Eg, if Admin and customer are authorized to view that particular page, only Admin and Customer roles checkboxes are displayed selected in the Edit Get Request.
I Have three tables Page, roles and PageRole table connecting the other two tables.
Now if the user edits the Page and Checks/Unchecks checkboxes, i need help on how to save the data back to tables based on the checkbox selection in Edit Post action.
My Edit View Model Class:
public class PageAdminEditViewModel : PageAdminViewModel
{
public virtual SelectList PageList { get; set; }
public IList<PageRoleData> PageRoleData { get; set; }
}
My Model class for Checkboxes:
public class PageRoleData
{
public string ASPNetRoleID { get; set; }
public string PageRoleID { get; set; }
public int PageID { get; set; }
public string RoleName { get; set; }
public bool Selected { get; set; }
}
MY EDIT Get Action Method:
public ActionResult Edit(int id)
{
if (ModelState.IsValid)
{
try
{
var pData = m_pas.Get<PageAdminEditViewModel>(id);
var data = m_pas.GetAll(true);
SelectList pageList
= new SelectList(data,
nameof(PageAdminEditViewModel.Pageid),
nameof(PageAdminEditViewModel.Pagename));
IList<PageRoleData> pageRoleData = m_pas.GetPageRolesByPageID(id);
pData.PageList = pageList; // For Dropdownlist values
pData.PageRoleData = pageRoleData; // For Checkboxes values
return View(pData);
}
catch (Exception ex)
{
s_log.Fatal($"An error occurred when calling the Edit Page. {ex.Message}", ex);
}
}
return View();
}
My EDIT POST Action:
[HttpPost]
public ActionResult Edit(int id, PageAdminEditViewModel editViewModel)
{
try
{
m_uow.BeginTransaction();
m_pas.CreateOrEdit(id, editViewModel);
m_uow.Commit();
return RedirectToAction("Index");
}
catch (Exception ex)
{
s_log.Fatal($"An error occurred while saving the changes on the Edit Page. {ex.Message}", ex);
}
return View();
}
My Service Layer CreateorEdit() method for Post Request
public void CreateOrEdit(int id, PageAdminEditViewModel viewModel)
{
Page pageData = null;
// Checks whether to create a new Page
if (id <= 0)
{
pageData = new Page();
}
else
{
pageData = m_uow.QueryFactory.ObjectQuery.Get<Page, int>(id);
}
// Checks if the Page has a Parent Page associated with it
if (pageData.ParentNodeID != null)
{
// Checks if the user has changed the existing Parent page and assigns the new Parent Page accordingly
if (viewModel.ParentNodeID != pageData.ParentNodeID.Pageid)
{
var newParentPage = m_uow.QueryFactory.ObjectQuery.Get<Page, int>(viewModel.ParentNodeID);
pageData.ParentNodeID = newParentPage;
}
}
// In case there is no Parent Page, Checks if the user has set any Parent Page and assigns accordingly
else if (viewModel.ParentNodeID != 0)
{
var newParentPage = m_uow.QueryFactory.ObjectQuery.Get<Page, int>(viewModel.ParentNodeID);
pageData.ParentNodeID = newParentPage;
}
pageData.Pagename = viewModel.Pagename;
if (viewModel.ParentNodeID != 0)
pageData.ParentNodeID.Pageid = viewModel.ParentNodeID;
else
pageData.ParentNodeID = null;
pageData.Url = viewModel.Url;
pageData.Iconimage = viewModel.Iconimage;
pageData.Pagevisibility = viewModel.Pagevisibility;
pageData.Displayorder = viewModel.Displayorder;
var pData = Mapper.Map<Page, PageDto>(pageData);
IList<PageRoleData> selectedRoles = viewModel.PageRoleData;
m_uow.AddOrUpdate(pageData);
}
My EDIT View:
@model ISPC.CustomerWebsite.Areas.PageAdministration.ViewModels.PageAdminEditViewModel
@{
if (Model.Pageid <= 0)
{
ViewBag.Title = "Create Page Menu";
}
else
{
ViewBag.Title = "Edit Page Menu";
}
}
@if (Model.Pageid <= 0)
{
<h2>Create Page Menu</h2>
}
else
{
<h2>Edit Page Menu</h2>
}
<br />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="container-fluid" style="float: left; width: 60%;">
<div class="editor-label">
@Html.LabelFor(model => model.Pagename)
<div class="editor-field">
@Html.TextBoxFor(model => model.Pagename, new { style = "width: 200px" })
@Html.ValidationMessageFor(model => model.Pagename)
</div>
</div><br />
<div class="editor-label">
@Html.LabelFor(model => model.ParentNodeID)
<div class="editor-field">
@Html.DropDownListFor(model => model.ParentNodeID, Model.PageList, "-Select-", new { style = "width: 200px" })
@Html.ValidationMessageFor(model => model.Pagename)
</div>
</div><br />
<div class="editor-label">
@Html.LabelFor(model => model.Url)
<div class="editor-field">
@Html.TextBoxFor(model => model.Url, new { style = "width: 200px" })
@Html.ValidationMessageFor(model => model.Url)
</div>
</div><br />
<div class="editor-label">
@Html.LabelFor(model => model.Iconimage)
<div class="editor-field">
@Html.TextBoxFor(model => model.Iconimage, new { style = "width: 200px" })
@Html.ValidationMessageFor(model => model.Iconimage)
</div>
</div><br />
<div class="editor-label">
@Html.LabelFor(model => model.Pagevisibility)
<div class="editor-field">
@Html.EditorFor(model => model.Pagevisibility)
@Html.ValidationMessageFor(model => model.Pagevisibility)
</div>
</div><br />
<div class="editor-label">
@Html.LabelFor(model => model.Displayorder)
<div class="editor-field">
@Html.TextBoxFor(model => model.Displayorder, new { style = "width: 200px" })
@Html.ValidationMessageFor(model => model.Displayorder)
</div>
</div><br />
<div>
@Html.HiddenFor(model => model.Pageid)
</div><br />
<div class="row">
<div>
<input type="submit" value="Save" class="btn btn-default" /> |
@Html.ActionLink("Back to List", "Index")
</div>
</div>
</div><br />
<div class="form-group">
<label class="col-md-pull-2 control-label">
Select User Role :
</label><br />
<div class="col-md-pull-2">
@foreach(var item in Model.PageRoleData)
{
if (item.PageRoleID != null)
{
item.Selected = true;
}
else
{
item.Selected = false;
}
@Html.HiddenFor(model => item.ASPNetRoleID)
@Html.CheckBoxFor(model => item.Selected, new { @id = "chkbox1", @class = "form-check" })
<text> </text>
@Html.LabelFor(model => item.RoleName, item.RoleName)<br />
}
</div>
</div>
}
