0

I am building this page right here:enter image description here

You can see, one item is selected and the button at the bottom (submit) is now clickable. This button

 <div class="centered" style="padding-top: 50px;">
        <input asp-page-handler="Button_Submit" style="width: 30% !important; opacity: 0.2; " value="Weiter" class="baseButton" type="submit" disabled="disabled">
 </div>

fires this handler:

        public async Task<IActionResult> OnPostButton_Submit(IFormCollection data)
        {
            return Page();

        }

The items come from my model and get created like this:

<table class="table-fullWitdh" style="border-spacing: 13px">
                                    @{
                                        int counter = 0; 
                                        foreach (var elem in Model.ModelList)
                                        {
                                            if(counter % 7 == 0)
                                            {
                                                <tr >
                                                    @*every seventh item create new tr *@
                                                </tr>
                                            }
                                            <td>
                                                @*Item Template Start*@
                                                <table class="itemBackgrond centered">
                                                    <tr>
                                                        <td>
                                                            <p>
                                                                @elem.Title
                                                            </p>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>
                                                            <img class="imgSmall" src="@elem.ImageSource" />
                                                        </td>
                                                    </tr>
                                                </table>
                                                @*Item Template End*@
                                            </td>
                                            counter++;
                                        }
                                    }
                                </table>

Now, when I click on one of the items I do some jquery to change the color and enable the button:

<script>

    // click function on element. makes all other elements de
    $(".itemBackgrond").click(function () {
        $(".itemBackgrond").each(function () {
            $(this).css("background-color", "#D8F1F0");
        });

        $(this).css("background-color", "#c3e1ed");

        // also enable base button, doesnt need to be display
        $('.baseButton').prop("disabled", false);
        jQuery('.baseButton').css('opacity', '1');
    });
    
</script>

SO I basically change the backgroudn color myself. However, when I now click on submit I still have no clue over what item was clicked (highlighted).

How can I retrieve the item with the altered background color inside my c# controller?

Thank you!

EDIT:****

I did find a workaround but that is hella complicated:

<table class="itemBackgrond centered" id="@elem.CategoryId"> @*give it id as cat name*@
    <tr>
        <td>
            <p>
                @elem.Title
            </p>
            <input style="display: none;" type="text" value="" name="selectedIdentifier" class="@elem.CategoryId" /> @*find class of that elem that belongs to table*@
        </td>
    </tr>
    <tr>
        <td>
            <img class="imgSmall" src="@elem.ImageSource" />
        </td>
    </tr>
</table>

Basically, I put in there a hidden input element and add a class to it that has the same name as the ID of the model. Then in my jquery i do this:

var elem = $("." + this.id)
elem.val(this.id)

basically finding the class attached to that hidden element and add a the id to its value field.

In the controller i access all elements with that name:

var title = Request.Form["selectedIdentifier"];

which is one of my hidden inputs. But only the one with a value in it is returned and so I have my value inside my controller...

...

inno
  • 376
  • 2
  • 15
  • Instead of using js for highlighting the buttons, I would use a radio button (make the button a label that selects the radio), then when you click the submit, you can just get the value of the selected radio – Pete Apr 14 '23 at 12:20
  • would I be able to make this layout eaxtaly the way it looks right now but just with radio buttons? because then I would know exactly how to access their input – inno Apr 14 '23 at 12:38
  • You should be able to, also it would be much better than what you are doing now - you should never use tables for layout - they should only ever be used for tabular data – Pete Apr 14 '23 at 12:45
  • Ok, sounds interessting! I dont see a reason however why I cant use a table for layout, it seems very logical for me... – inno Apr 14 '23 at 12:54
  • 1
    One of the biggest reasons is your content won't be accessible and therefore your seo ranking will suffer massively, but there are a multitude of other reasons for not using tables: https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html and https://webmasters.stackexchange.com/questions/6036/why-arent-we-supposed-to-use-table-in-a-design – Pete Apr 14 '23 at 12:57
  • thanks for the input. seo wont be of issue as this is never a public page but ill read into it! – inno Apr 14 '23 at 12:59

0 Answers0