How to read the data in a razor variable , assigned by a checkbox from a controller

Question

My View has a list of rows for Edit , and each row has multiple checkbox . So I want to index each checkbox value with its corresponding row index. For this I have in view :

List<string> FilterIds =new List<string>();

. . .

<td width="200px">
                        <div class="form-group">
                            <div class=" text-left">Apply Filter(s)</div>
                            <div class="col-md-10">



                                    @foreach (var item in ViewBag.Filters)
                                    {

                                    <input type="checkbox" value="@item.FilterId" name="@FilterIds"/>@item.FilterId
                                    <text>&nbsp;</text>
                                       //FilterId[i] = FilterIds;

                                    }

And my controller looks like this :

public ActionResult Edit([Bind(Include = "Conf_ActionTypeCTAMeta_V1_Id,Conf_CTAId,Conf_Clicklistid,ApprovedBy,DateApproved,EditedBy,DateEdited,Conf_TrackingActionTypeUnique_Id,ConfMarketid,MarketFilterId")] Conf_ActionTypeCTAMeta_V1[] conf_ActionTypeCTAMeta_V1, List<string> FilterIds)

Any quick solutions , how I can read the checked value per row ?

Why aren't you using any mvc html helpers to correctly create your html? — Erik Philips, Nov 17 '17 at 17:30
@Erik I am using html helpers in the rest of the page, but I am not sure which helper would help me in this problem . Could You tell me that ? — Rom, Nov 22 '17 at 10:55

score 0 · Answer 1 · answered Nov 17 '17 at 18:15

0

You have to create a view method for control every value's checkbox and you have to use CheckboxFor for bind it with model i couldn't help correctly because i don't know well too but i had a problem like this i used many textbox with data

This is my question and answer worked at me it's can be helpful: How can i take many textboxes' value on Post in MVC

And if you want to examine my solution (Page2.cshtml): https://github.com/kadirkalkan/WorkCubeFormMvc

answered Nov 17 '17 at 18:15

Kadir Kalkan

248
2
10

thanks for the answer, but I think my scenario is a bit different, not exactly your post. But I will give your approach a shot and let you know. – Rom Nov 22 '17 at 10:54

Nilesh Vishwakarma · Answer 2 · 2017-12-01T07:02:23.267

In this code has little bit mistake.

when you post data view(html) page to server side that time map with action parameter and html input tag "name attribute". and the name is same then assign value into param.

replace @FilterIds to FilterIds because you define controller in "FilterIds" so.

<input type="checkbox" value="@item.FilterId" name="FilterIds"/>@item.FilterId

not need any extra variable to store selected value.

Using html input tag with razor syntax the razor syntax work for display purpose.

Update Action Method :

public ActionResult Edit([Bind(Include = "Conf_ActionTypeCTAMeta_V1_Id,Conf_CTAId,Conf_Clicklistid,ApprovedBy,DateApproved,EditedBy,DateEdited,Conf_TrackingActionTypeUnique_Id,ConfMarketid,MarketFilterId")] Conf_ActionTypeCTAMeta_V1[] conf_ActionTypeCTAMeta_V1, CheckBox checkBox)

Create DTO class like :-

public class CheckBox
{
  public List<string> FilterIds1 {get;set;}
  public List<string> FilterIds2 {get;set;}
  public List<string> FilterIds3 {get;set;}
}

update name attribute

 <input type="checkbox" value="@item.FilterId" name="checkBox.FilterIds1"/>@item.FilterId

    <input type="checkbox" value="@item.FilterId" name="checkBox.FilterIds2"/>@item.FilterId

    <input type="checkbox" value="@item.FilterId" name="checkBox.FilterIds3"/>@item.FilterId

if you row generate dynamic then you can use like this:

public ActionResult Edit([Bind(Include = "Conf_ActionTypeCTAMeta_V1_Id,Conf_CTAId,Conf_Clicklistid,ApprovedBy,DateApproved,EditedBy,DateEdited,Conf_TrackingActionTypeUnique_Id,ConfMarketid,MarketFilterId")] Conf_ActionTypeCTAMeta_V1[] conf_ActionTypeCTAMeta_V1, CheckBox[] checkBox)

DTO class is :

public class CheckBox
    {
      public int Id { set; get; }
      public string Name { set; get; }
      public int index { set; get; }
    }

i is a index value

 foreach (var item in ViewBag.Data)
{
    <input type="checkbox" value="@item.Id" name="checkbox[@item.index].Id" id="checkbox[@item.index].Id"/>@item.Name  <br />
    <input type="hidden" value="@item.index"  name="checkbox[@item.index].index"/>
}

yes you are right, i have done that, but the problem is I need to have different names for each row, or something like that so that I can distinguish my rows at the controller end. — Rom, Nov 22 '17 at 10:48
Firstly thanks for the answer, and yes my rows are dynamic. I will try your approach and update accordingly — Rom, Nov 27 '17 at 10:35
Somehow , I am not able to receive the value at controller, it says NULL ref , when I try to read the string . `for(int i=0;i< conf_ActionTypeCTAMeta_V1.Count();i++) { var test = checkBox[i].FilterIds;` — Rom, Nov 27 '17 at 13:28
public ActionResult Index_Post(CheckBox[] checkbox) { for (int i = 0; i < checkbox.Length; i++) { var test = checkbox[i].FieldId; } Here is my simple code, it's work fine. can you show me you code. — Nilesh Vishwakarma, Nov 28 '17 at 11:58
thanks again, but here what i see is that i get id for all checkbox, whereas my goal is to index them row wise. — Rom, Nov 30 '17 at 11:29
@Rom i'm not clear what you want, i think you need selected checkbox value and also index, i'm updating answer, and in this case may be you need to filter inside of controller. — Nilesh Vishwakarma, Dec 01 '17 at 07:05

score 0 · Accepted Answer · answered Nov 30 '17 at 16:58

I got this done, using 2 checkboxes and sync. them with javascript.

      <ul>
                                    @foreach (var item in ViewBag.Filters)
                                    {

                                        <li>
                                            <input type="checkbox" id="fltrids@(i+1)@(item.FilterId)" value="@item.FilterId" name="c" + @i onclick="synch(@(i+1)@(item.FilterId))" style="width:5%; height:5%; border:5px; outline:double" /><text>&nbsp;</text>@item.FilterId
                                            <input type="checkbox" id="mtch@(i+1)@(item.FilterId)" value="@i" name="s" />
                                            <text>&nbsp;</text><text>&nbsp;</text>

                                        </li>
                                    }
                                </ul>

and the javascript is a simple function ,

function synch(j) {
        var a = "fltrids" + j;
        var b = "mtch" + j;
        //console.log("a-" + a + "---- b-" + b);
            var x = document.getElementById(a).checked;
            if (x == true) {
                document.getElementById(b).checked = true;
            }
            else {
                document.getElementById(b).checked = false;
            }

        }

How to read the data in a razor variable , assigned by a checkbox from a controller

3 Answers3

Using html input tag with razor syntax the razor syntax work for display purpose.