Analyzing a Specific DropDown Based on Condition

Question

Analyzing a Specific DropDown Based on Condition

In my MVC project, I am working on a form that should be accessible based on certain conditions. The first view includes a dropdown list and a submit button. I want the value selected in the dropdown list to be passed and compared against a set condition. If the condition is not met, an alert should be shown instead of moving on to the form.

Below is the code snippet that I have implemented:

public ActionResult ChooseType()
{
    var x = DataAccess.GetEmployee(@User.Identity.Name);

    var lists = new SelectList(RuleAccess.GetAllRule(), "ID", "TypeDetail");
    ViewBag.CategoryId = lists;

    /*rule*/
    ViewBag.comp1 = Logic.AnnualToogle(@User.Identity.Name);

    if (x.EmpSex == "F" && x.EmpMaritalSt == "NIKAH")
    { ViewBag.comp2 = 1; }
    else ViewBag.comp2 = 0;

    return View();
}


[HttpGet]
public ActionResult Create(int lv_type)
{

    var type = RuleAccess.GetTypeByID(lv_type);
    ViewBag.type = type;
    var model = new LeaveApplicationViewModels();
    model.X = DataAccess.GetEmployee(@User.Identity.Name);
    model.C = DataAccess.GetLeaveApp(@User.Identity.Name);

    /*disable*/
    ViewBag.dis = DataAccess.GetDisabledDate(@User.Identity.Name); 

    /*max*/
    var max= RuleAccess.GetMaxByID(lv_type);
    ViewBag.c = max;
    if (lv_type == 1)
    {
        var used = RuleAccess.CountUsedAnnual(@User.Identity.Name);
        var rem = max - used;
        ViewBag.a = used;
        ViewBag.b = rem;
    }
    else 
    {
        ViewBag.b = max;
    }
    return View(model);
}

I have utilized the ViewBag.comp1 and ViewBag.comp2 in my view for validation:

<script type="text/javascript">

var x = @ViewBag.comp1;
var y = @ViewBag.comp2;

function validatecreate()
{
   var value= document.getElementById("lv_type").value;

    if (value==1)
    {
        if(x==1)
            document.getElementById('validatecreate').submit();
        else { alert('Action cant be done. You either have another annual leave application in pending status or you have reach the limit of annual leave'); }
    }
    else if(value==2)
    {
        if(y==1)
            document.getElementById('validatecreate').submit();
        else { alert('Action cant be done. You either are Male or Not Married Yet'); }
    }
    else if(value==3)
    {
        document.getElementById('validatecreate').submit();

    }

    else { 
        document.getElementById('validatecreate').submit();
        //alert('Http Not Found'); 
    }
}

@Html.DropDownList(
    "lv_type", (SelectList) ViewBag.CategoryId, 
    "--Select One--", 
    new{ //anonymous type
        @class = "form-control input-sm"
    }
)

I have concerns about the URL manipulation where users can access the form directly by manually inputting the URL with a specific parameter value. Despite this, I still need the value of lv_type for my view. Any suggestions or guidance would be greatly appreciated.

javascript c#asp.net asp.net-mvc

Answer 1

Answer №1

It is crucial to perform validation on the server side, with client side validation seen as a helpful addition that can reduce the need for server calls. Providing options in a dropdown list to users and then restricting their selection can lead to a poor user experience. Instead, only present options that are relevant to the user.

Add a new method to your RuleAccess class, such as

GetEmployeeRules(Employee employee)

, which will return only the rules applicable to that employee.

public static List<Rule> GetEmployeeRules(Employee employee)
{
    // Obtain the list of all rules
    if (employee.EmpSex == "F" && employee.EmpMaritalSt == "NIKAH")
    {
        // Exclude the appropriate Rule from the list
    }
    .....
    // Return the filtered list
}

Additionally, utilize a view model in the view

public class LeaveTypeVM
{
    [Required(ErrorMessage = "Please choose a leave type")]
    public int SelectedLeaveType { get; set; }
    public IEnumerable<SelectListItem> LeaveTypeList { get; set; }
}

Then, in the ChooseType() method

public ActionResult ChooseType()
{
    var employee = DataAccess.GetEmployee(@User.Identity.Name);
    var rules = RuleAccess.GetEmployeeRules(employee);
    var model = new LeaveTypeVM()
    {
        LeaveTypeList = new SelectList(rules, "ID", "TypeDetail")
    };
    return View(model);
}

and in the view

@model LeaveTypeVM
@using (Html.BeginForm())
{
    @Html.DropDownListFor(m => m.SelectedLeaveType, Model.LeaveTypeList, "--Choose One--", new { @class = "form-control input-sm" }
    @Html.ValidationMessageFor(m => m.SelectedLeaveType)
    <input type="submit" value="Submit" />
}

Submit to a POST method which can easily return the view if invalid, or redirect to the Create method.

[HttpPost]
public ActionResult ChooseType(LeaveTypeVM model)
{
    if (!ModelState.IsValid)
    {
        model.LeaveTypeList = .... // as in GET method
    }
    return RedirectToAction("Create", new { leaveType = model.SelectedLeaveType });

and in the Create() method

public ActionResult Create(int leaveType)
{
    var employee = DataAccess.GetEmployee(@User.Identity.Name);
    var rule = RuleAccess.GetEmployeeRules(employee).Where(x => x.ID == leaveType).FirstOrDefault();
    if (rule == null)
    {
        // Handle exception or redirect to an error page
    }
    var model = new LeaveApplicationViewModels();
    ....
    return View(model);
}

Ensure that your LeaveApplicationViewModels includes additional properties to avoid using ViewBag properties and to create a strongly typed view.

Answer 2

It is crucial to perform validation on the server side, with client side validation seen as a helpful addition that can reduce the need for server calls. Providing options in a dropdown list to users and then restricting their selection can lead to a poor user experience. Instead, only present options that are relevant to the user.

Add a new method to your RuleAccess class, such as

GetEmployeeRules(Employee employee)

, which will return only the rules applicable to that employee.

public static List<Rule> GetEmployeeRules(Employee employee)
{
    // Obtain the list of all rules
    if (employee.EmpSex == "F" && employee.EmpMaritalSt == "NIKAH")
    {
        // Exclude the appropriate Rule from the list
    }
    .....
    // Return the filtered list
}

Additionally, utilize a view model in the view

public class LeaveTypeVM
{
    [Required(ErrorMessage = "Please choose a leave type")]
    public int SelectedLeaveType { get; set; }
    public IEnumerable<SelectListItem> LeaveTypeList { get; set; }
}

Then, in the ChooseType() method

public ActionResult ChooseType()
{
    var employee = DataAccess.GetEmployee(@User.Identity.Name);
    var rules = RuleAccess.GetEmployeeRules(employee);
    var model = new LeaveTypeVM()
    {
        LeaveTypeList = new SelectList(rules, "ID", "TypeDetail")
    };
    return View(model);
}

and in the view

@model LeaveTypeVM
@using (Html.BeginForm())
{
    @Html.DropDownListFor(m => m.SelectedLeaveType, Model.LeaveTypeList, "--Choose One--", new { @class = "form-control input-sm" }
    @Html.ValidationMessageFor(m => m.SelectedLeaveType)
    <input type="submit" value="Submit" />
}

Submit to a POST method which can easily return the view if invalid, or redirect to the Create method.

[HttpPost]
public ActionResult ChooseType(LeaveTypeVM model)
{
    if (!ModelState.IsValid)
    {
        model.LeaveTypeList = .... // as in GET method
    }
    return RedirectToAction("Create", new { leaveType = model.SelectedLeaveType });

and in the Create() method

public ActionResult Create(int leaveType)
{
    var employee = DataAccess.GetEmployee(@User.Identity.Name);
    var rule = RuleAccess.GetEmployeeRules(employee).Where(x => x.ID == leaveType).FirstOrDefault();
    if (rule == null)
    {
        // Handle exception or redirect to an error page
    }
    var model = new LeaveApplicationViewModels();
    ....
    return View(model);
}

Ensure that your LeaveApplicationViewModels includes additional properties to avoid using ViewBag properties and to create a strongly typed view.

Analyzing a Specific DropDown Based on Condition

Answer №1

Similar questions

Ways to retrieve the complete user object in passport

A guide to showcasing JSON data on a webpage using JavaScript

Utilizing HighChart in ASP.NET MVC for Dynamic Data Visualization from a Database

Retrieve the value of a JSON string

Troubleshooting: Angular 2 View not reflecting changes after array push

.NET Core BackgroundService with DI Scope set to null

Implementing reCAPTCHA in Spring MVC with Ajax

Utilize a single submit button to navigate through multiple pages dynamically using JavaScript

The variable declared in the useState hook is not being properly updated within the callback function

What is the best way to highlight matching words from a list in a Django form's textarea using JavaScript?

The div has extra white space at the bottom due to the Hide/Show content feature

How to Use AJAX, jQuery, and JSON to Send an Array to PHP

Execute a function using a click event within a statement

Guide to resetting all ReactiveVars to false in Meteor JS

Handling Camera Positioning and Direction in Three.js: Utilizing Orbit Controls and camera

Guide to automatically dismiss calendar popup after selecting a date

Selenium C# is experiencing difficulties in running properly on localhost

Sending JavaScript functions to PHP files via Ajax

Adding a component to a slot in Vue.js 3

Drawing a line beneath the mouse's center using JavaScript