0

So I wanted to see if anybody has done this...

I am trying to bind the click action, (hoping to do it without JavaScript, but not a world ender if I have to do it that way), of one of a group of buttons, to select some value, the same way you might use a Select list / Drop down list.

For instance, when I change the below MVC ViewModel bound DDL, it automatically updates the MySelectedValue when the form is submitted to the MVC Controller:

@Html.DropDownListFor(x => x.MySelectedValue, Model.MySelectList)

I want to do the same thing, only with buttons. The big thing here is, I do not want these buttons to submit the form, just change a value.

Note: The list of values that these buttons are bound will never get very long, and UI/UX direction is to have them as buttons.

<Button>ThisButton</Button>
<Button>ThatButton</Button>
<Button>ThatButton2</Button>

I've been digging, but just haven't found something that fit using the typicaly @Html.Button do something kinda thing, without submitting the form.

Any thoughts or guidance is appreciated, while I continue to dig for a solution myself. Thanks!

Jeremy
  • 285
  • 3
  • 14
  • 2
    If your [button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) does not specify `type=` then it will submit its form by default i.e. make it `type="button"`. If you will only allow the user to select one button, then you can use [radio buttons styled to look like regular buttons](https://stackoverflow.com/a/16243163/2030565). Otherwise, you will need JavaScript to update a hidden form element when the buttons are clicked. – Jasen Jul 28 '18 at 22:16
  • So I understand the approach of using Radio Buttons, as well as the type= concepts. I'm just looking to know about binding the MVC ViewModel to the clicks (more than anything else) instead of needing to do it through client side code. Right now I'm leaning towards this: `@foreach (var option in Model.MySelectList) { @Html.RadioButtonFor(x => x.MySelectedValue, option.Value) @Html.Label(option.Text) }` – Jeremy Jul 28 '18 at 23:27
  • 1
    There isn't any event binding with the ViewModel. Anything in Razor code is rendered on the server then sent to the browser. Client-side changes only happen on the browser. Clicks on the client update a form, which you can submit to the server, process the data, then populate a new ViewModel to render a new view. – Jasen Jul 28 '18 at 23:38
  • Correct - I'm not trying to bind to an event, I just want to tie together the ViewModel to the Radiobutton, so it affects change in the ViewModel when the submit fires on the action to the server. With styling buttons like regular buttons, and connecting them via the above foreach, it has solved the issue for me. – Jeremy Jul 29 '18 at 14:40

1 Answers1

0

With the conversation with Jasen (in comments) https://stackoverflow.com/users/2030565/jasen

I was able to resolve the situation via the dialogue and exploring the MVC value binding to the Radio Buttons.

Thanks Jasen for the help!

Jeremy
  • 285
  • 3
  • 14