Set a value in Model via javascript

I have this code:

public class AccountModel
{
    [Required]
    [Display(Name = "Subscription ID")]
    public string SubscriptionId { get; set; }

    [Required]
    [Display(Name = "Storage Name")]
    public string StorageName { get; set; }

    [Required]
    [Display(Name = "Storage Key")]
    public string StorageKey { get; set; }

    [Required]
    [Display(Name = "Hosted Name")]
    public string HostedName { get; set; }
....
}

and...

$('a.sign-in').live('click', function () {
            alert("BINGO!");

            var id = document.getElementById('id').value;
            var name = document.getElementById('name').value;
            var key = document.getElementById('key').value;
            var select = document.getElementById("listahosted");
            var selected = select.options[select.selectedIndex].text;
...
}

I just want to set a value on my model -> put the "selected" value in the model m.HostedName How can I do this?

Regards

UPDATE WITH MY VIEW

My view

@model WebManager.Models.AccountModel
@{
    ViewBag.Title = "Account";
}

<h2>Account</h2>
<p>
Please enter your Azure account details.
</p>

@Html.ValidationSummary(true, "Invalid account. Please correct the errors and try again.")

@using (Html.BeginForm())
{
<div>
    <fieldset>
        <legend>Account Information</legend>

        <div class="editor-label">
            @Html.LabelFor(m => m.SubscriptionId)
        </div>
       <div class="editor-field">
            @Html.TextBoxFor(m => m.SubscriptionId, new { id = "id"})
            @Html.ValidationMessageFor(m => m.SubscriptionId)
        </div>
        <div class="editor-label">
            @Html.LabelFor(m => m.StorageName)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.StorageName, new { id = "name" })
            @Html.ValidationMessageFor(m => m.StorageName)
        </div>
        <div class="editor-label">
            @Html.LabelFor(m => m.StorageKey)
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(m => m.StorageKey, new { id = "key" })
            @Html.ValidationMessageFor(m => m.StorageKey)
        </div>

        <p>
            <a href="#login-box" class="login-window">
                <input type="submit" value="Apply" /></a>
        </p>
    </fieldset>
</div>

<div id="login-box" class="login-popup">
    <!--a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a-->
    <form method="post" class="signin" action="#">
    <fieldset class="textbox">
        <label class="hostedservice">
            <span>Hosted Service</span>
            <br />
            <select id='listahosted' name='listahosted'>
            <option>Choose your hosted</option>
            </select>
        </label>
        <br />
        <label class="deployments">
            <span>Role</span>
            <br />
            <select id='listadeployments' name='listadeployments'>
            <option>Choose your role</option>
            </select>
        </label>
        <br />
        <a class="sign-in">
        <input type="submit" value="Sign In" /></a>
    </fieldset>
    </form>
</div>

I am not putting here the javascript.

The situation is: I have a combobox filled by JS and I need to put the selected value on my model.

All help is apreciated

Answers


The first thing I noticed was that you are putting submit fields inside your a tags. You should not do this. I would just use a button tag with type="submit".

The names of your input or select elements must match the property name in your model. In this case listahosted needs to be HostedName. It might be easier to use the HtmlHelper for select lists. This way if you change the property name in the model, your view will at least YSOD instead of missing the error.

So if you want this all to be ajax, do something like this:

// You should use a button element instead of anchor but anchor will work...
$('a.sign-in').live('click', function (e) {
    e.preventDefault();
    var form = $("form");            
    $.ajax({
        url : form.attr('action'),
        data : form.serialize(),
        success : function(data) {
            // do whatever you need to here
        }
    });
});‚Äč

Need Your Help

Check if int is in list of ints in Java (with some constraints)

java

I'm looking for a simple and elegant one line way to check if the int result of an expression is contained in a list of integers.