通过javascript在Model中设置一个值

Question

我有这个代码：

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; }
....
}

而且。。。

$('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;
...
}

我只想在我的模型上设置一个值->将"选定"的值放在模型中。HostedName我该怎么做？

问候

使用我的视图更新

我的视图

@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>

我不会把javascript放在这里。

情况是：我有一个由JS填充的组合框，我需要将所选的值放在我的模型上。

所有帮助都已确认为

Answer 1

我注意到的第一件事是将submit字段放入a标记中。你不应该这样做。我只是将button标签与type="submit"一起使用。

input或select元素的名称必须与模型中的特性名称相匹配。在这种情况下，listahosted需要是HostedName。将HtmlHelper用于选择列表可能更容易。这样，如果更改模型中的特性名称，则视图将至少显示YSOD，而不是缺少错误。

因此，如果您希望这一切都是ajax，请执行以下操作：

// 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
        }
    });
});​