Pass value from Javascript function to MVC Model

Question

I have the following ViewModel:

namespace SimpleModel.ViewModels
{
    public class ClientSearch
    {
       public int Type { get; set; }
       public string String { get; set; }
    }
}

The following is the HTML code snippet:

<div id="clientSelect">
    <input type="radio" name="clientSelect" value="1" />Account Number<br />
    <input type="radio" name="clientSelect" value="2" />ID Number / Company Number<br />
    <input type="radio" name="clientSelect" value="3" />Surname / Company Name<br />
    @Html.EditorFor(model => model.String)
</div>

<p>
    <input type="submit" value="Search" onclick="clientSearch('clientSelect')" />
</p>

I have the following JavaScript function:

<script type="text/javascript">
    function clientSearch(strGroupName) {
        var selectedValue = 0;
        var arrInputs = document.getElementsByTagName("input");
        for (var i = 0; i < arrInputs.length; i++) {
            var oCurInput = arrInputs[i];
            if (oCurInput.type == "radio" && oCurInput.name == strGroupName && oCurInput.checked)
                selectedValue = oCurInput.value;
        }
     }
</script>

I need to update ClientSearch model Type field with selectedValue from within the Javascript function so I may pass the model back to the Controller for processing.

Any help would be appreciated.

are you ok with using jQuery in your code?

Scott Selby
– Scott Selby

2013-12-04 10:15:46 +00:00
Commented Dec 4, 2013 at 10:15 — Scott Selby
– Scott Selby, Commented Dec 4, 2013 at 10:15

Scott Selby · Accepted Answer · 2013-12-04 11:40:10Z

1

First of all this object is not ok, you can not have a property that is a c# keyword

public class ClientSearch
{
   public int Type { get; set; }
   public string String { get; set; } // This right here is a reserved c# keyword
}

So change your ClientSearch class to something like

public class ClientSearch
{
   public int Type { get; set; }
   public string SearchString { get; set; }
}

Then your View will look something like:

<div id="clientSelect">
    @Html.RadioButtonFor(x => x.Type, 1) @:AccountNumber<br/>
    @Html.RadioButtonFor(x => x.Type, 2) @:ID Number / Company Number<br/>
    @Html.RadioButtonFor(x => x.Type, 3) @:Surname / Company Name<br />
    @Html.TextBoxFor(model => model.SearchString)
</div>

<p>
    <input type="submit" value="Search" />
</p>

No javascript needed... imagine that :)

edited Dec 4, 2013 at 11:40

answered Dec 4, 2013 at 10:33

Scott Selby

9,58012 gold badges63 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sox Over a year ago

Thanks so much Scott - a great help!

Collectives™ on Stack Overflow

Pass value from Javascript function to MVC Model

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related