A Practice for LINQ and ASP.NET – IV

Task 3:

  • Add CRUD (Create, Read, Update, Delete) and details for each page.
  • Create a subpage inside student page for adding and removing enrolments.
  • Add any necessary validations.

Note: Be careful when you delete items.

I use the scaffolding feature of VS to create the Add/Edit page. In the Add/Edit class page, I need two drop down lists for adding/editing of Teacher and Subject field.

It’s always tricky when using drop down list. Firstly in the back-end code, I build SelectListItem object:

ViewBag.SubjectList = db.Subjects.Select(x => new SelectListItem { Value = x.SubjectID.ToString(), Text = x.Name }).ToList();

Then in the front-end code, we consume the related ViewBag object:

@Html.DropDownListFor(model => model.SubjectID, (IEnumerable<SelectListItem>)ViewBag.SubjectList, htmlAttributes: new { @class = "form-control" })

For cascading deleting, when the related field still exists, you will be redirected to an error page:

[HttpPost]
public ActionResult DeleteClass(int Id, string RedirectUrl)
{
    using (AucklandHighSchoolEntities db = new AucklandHighSchoolEntities())
    {
        var c = db.Classes.Find(Id);
        if (c.Enrollments.Any())
        {
            return RedirectToAction("DeleteClassConfirm", new { ClassId = Id, RedirectUrl = RedirectUrl });
        }
        else
        {
            db.Entry(c).State = EntityState.Deleted;
            db.SaveChanges();
            if (string.IsNullOrWhiteSpace(RedirectUrl))
            {
                return RedirectToAction("ClassList");
            }
            else
            {
                return Redirect(RedirectUrl);
            }
        }
                
    }
}

Here is the error page:

I also created an enrollment Add/Edit page:

Another problem about front-end part is the button link with Bootstrap Glyphicons. We can not use the built-in Htmlhelper to generate the following code:

<a class="btn btn-warning" href="/Teacher/EditTeacher/1?RedirectUrl=%2FTeacher%2FTeacherList">
  <span class="glyphicon glyphicon-pencil" aria-hidden="true">
  </span> 
  Edit
</a>

So we have to create our own Htmlhelper using extension methods:

public static class IconHtmlHelper
{
    public static MvcHtmlString IconLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues, String iconName, object htmlAttributes = null)
    {
        linkText = " " + linkText;
        var linkMarkup = htmlHelper.ActionLink(linkText, actionName, routeValues, htmlAttributes).ToHtmlString() + "&nbsp";
        var iconMarkup = String.Format("<span class=\"{0}\" aria-hidden=\"true\"></span>", iconName);
        return new MvcHtmlString(linkMarkup.Insert(linkMarkup.IndexOf(linkText + @"</a>"), iconMarkup));
    }

    public static MvcHtmlString EditIconLink(this HtmlHelper htmlHelper, string linkText, string actionName, object routeValues = null)
    {
        return htmlHelper.IconLink(linkText, actionName, routeValues, "glyphicon glyphicon-pencil", new { @class = "btn btn-warning" });
    }
}

Then we use the new created Htmlhelper in the front-end Razor code:

@Html.EditIconLink("Edit", "EditClass", new { Id = item.Id, RedirectUrl = Request.Url.PathAndQuery })

* You can visit the website on http://www.nickyli.net/

** You can download the source code on GitHub

Leave a Reply

Your email address will not be published. Required fields are marked *