CODEWITHSUNDEEP
c#javascriptasp.net-mvcrazorcheckbox
Luke Villanueva
Luke Villanueva

Reputation: 2070

Get all values of checked checkboxes and use it on a url string

I have series of checkboxes that have values. Now what I want to do is when I click a button, I want to get all the values of the checked checkboxes and put it on the url string that I will be using. Here's some of my code.

<span><b>Status: </b></span>
        No arrangement yet <input type="checkbox" name="scheduleType" value="@AppointmentStatus.NoSchedule"/> &nbsp;&nbsp;&nbsp;
        Proposed <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Proposed"/>&nbsp;&nbsp;&nbsp;
        Scheduled <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Scheduled"/>&nbsp;&nbsp;&nbsp;
        Pend re-scheduling <input type="checkbox" name="scheduleType" value="@AppointmentStatus.RescheduledPending"/>&nbsp;&nbsp;&nbsp;
        Completed <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Complete"/>&nbsp;&nbsp;&nbsp;
        Cancelled <input type="checkbox" name="scheduleType" value="@AppointmentStatus.Cancelled"/>
        <span style="margin-left:50px;"><button id="btnSearch" class="btn btn-success">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></span>

Now onClick.

$('#btnSearch').click(function () {
     var dateFrom = $(".dateFrom").val();
     var dateTo = $(".dateTo").val();

     window.location.href = "home/masterschedule?scheduleType=" + /*here goes the checkboxes*/ + "&dateFrom=" + dateFrom + "&dateTo=" + dateTo;
 });

Here's my receiving action.

[InPrivate]
    public ActionResult MasterSchedule(List<string> scheduleType ,string dateFrom = "", string dateTo = "")
    {
        var appointments = _appointmentRepository.All().ToList();
        var viewModel = new MasterScheduleIndexViewModel();

        if (dateFrom == "" || dateTo == "")
        {
            viewModel.Appointment = appointments;
            viewModel.DocumentPackage = _documentPackageRepository.All().Where(a => a.AMGStatus == DocumentPackageStatus.Approved || a.DocumentPackageStatus == DocumentPackageStatus.Approved).ToList();
            viewModel.AppointmentNotes = _appointmentNoteRepository.All().ToList();
            viewModel.Users = _userRepository.All().ToList();
        }
        else
        {
            var startDate = DateTime.ParseExact(dateFrom, "d/M/yyyy", null);
            var endDate = DateTime.ParseExact(dateTo, "d/M/yyyy", null);

            viewModel.Appointment = appointments.Where(a => DateTime.ParseExact(a.AppointmentDate, "d/M/yyyy", null) >= startDate && DateTime.ParseExact(a.AppointmentDate, "d/M/yyyy", null) <= endDate).ToList();
        }

        return View(viewModel);
    }

I'm expecting a List of strings from the url, but would it be better if it's an array? Any ideas? Thanks!

Upvotes: 0

Views: 1010

Answers (2)

PSL
PSL

Reputation: 123739

You can use serialize i.e $(':checkbox[name="scheduleType"]').serialize()

This will take care of sending the scheduleType in the querystring
Example(...?scheduleType=Proposed&scheduleType=RescheduledPending&scheduleType=Cancelled&dateFrom=...)

And you can leave the List<string> scheduleType as it is in your action parameter.

Try

window.location.href = "home/masterschedule?" +
        $(':checkbox[name="scheduleType"]').serialize() + 
        "&dateFrom=" + dateFrom + "&dateTo=" + dateTo;

Update

Based on the comment you want to deserialize it to Enum List, you can just do:

In your check box cast them to (int) as follows.

<input type="checkbox" name="scheduleType" value="@((int)AppointmentStatus.NoSchedule)"/>

and in your action change the type of your action argument to List<AppointmentStatus> scheduleType or as List<int> scheduleType (based on how you need it) instead of List<string> scheduleType and you should be good to go.

Upvotes: 1

Ringo
Ringo

Reputation: 3965

Give your checkboxes a class and you can do that:

html: 

<span><b>Status: </b></span>
        No arrangement yet <input type="checkbox" name="scheduleType" value="@AppointmentStatus.NoSchedule" class="chk"/> &nbsp;&nbsp;&nbsp;
        Proposed <input type="checkbox" class="chk" name="scheduleType" value="@AppointmentStatus.Proposed"/>&nbsp;&nbsp;&nbsp;
        Scheduled <input type="checkbox" class="chk" name="scheduleType" value="@AppointmentStatus.Scheduled"/>&nbsp;&nbsp;&nbsp;
        Pend re-scheduling <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.RescheduledPending"/>&nbsp;&nbsp;&nbsp;
        Completed <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.Complete"/>&nbsp;&nbsp;&nbsp;
        Cancelled <input class="chk" type="checkbox" name="scheduleType" value="@AppointmentStatus.Cancelled"/>
        <span style="margin-left:50px;"><button id="btnSearch" class="btn btn-success">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Search&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button></span>

jquery: 

$('#btnSearch').click(function () {
     var chkValues  = '';
    $('.chk').each(function(){
        if($(this).prop('checked') == true){
            chkValues += $(this).val();
        }
    });
 });

Upvotes: 0

Related Questions