下拉列表不会更新所选值

时间:2014-04-07 08:27:32

标签: c# jquery ajax asp.net-mvc

我有dropdownlist

<div class="a">
    @Html.DropDownList("StorageId", null, new { @class = "form-control" })
    @Html.ValidationMessageFor(model => model.StorageId)
</div>

HTML:

<div class="a">
                <select class="form-control" id="StorageId" name="StorageId"><option selected="selected" value="1">Brak Brak</option>
<option value="2">First</option>
<option value="23">Second</option>
<option value="24">Third</option>
</select>
                <span class="field-validation-valid" data-valmsg-for="StorageId" data-valmsg-replace="true"></span>
            </div>

填充代码:

ViewBag.StorageId = new SelectList(unitOfWork.storageRepository.Get(), "Id", "Name", deviceusage.StorageId);

使用此Ajax请求将所有数据发送到控制器:

    $.ajax({
    url: "/DeviceUsage/Edit",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    headers: {
        'RequestVerificationToken': '@TokenHeaderValue()'
    },
    data: JSON.stringify({
        deviceusage: {
            DeviceInstanceId: $('.a').children("#DeviceInstanceId").val(),
            UserId: $('.a').children('#UserId').val(),
            StorageId: $('.a').children('#storageId').val()

        }
    }),
    error: function (data) {
        alert("wystąpił nieokreślony błąd " + data);
    },
    success: function (data) {
        if (data.ok) {
            $("#Modal").modal('hide');
            window.location = data.newurl;
        }
        else {
            $('.modal-body').html(data);
       }
    }
})

无论我在此下拉菜单中选择了什么,它都没有更新。更改第一个选择后,首先将一个发送到控制器。

@Update: 这是我用来处理&#39; Post`调用的控制器方法:

public ActionResult Edit([Bind(Include="StorageId,UserId,DeviceInstanceId")] DeviceUsage deviceusage)
    {
        ValidateRequestHeader(Request);
        if (deviceusage.UserId == 6 && deviceusage.StorageId == (int)Storage.Biurko)
        {
            ModelState.AddModelError("", "Zarezerwowane urządzenie nie moze byc przypisane do biurka");
        }
        if (deviceusage.UserId == 1 && deviceusage.StorageId == (int)Storage.Biurko)
        {
            ModelState.AddModelError("", "Wolne urządzenie nie może przebywać na jakimś biurku");
        }
        if ((deviceusage.UserId != 1 & deviceusage.UserId != 6) & deviceusage.StorageId != (int)Storage.Biurko)
        {
            ModelState.AddModelError("", "Urzązenie przypisane do kogos nie moze przebywac w magazynie");
        }
        if (ModelState.IsValid)
        {

            unitOfWork.deviceUsageRepository.Update(deviceusage);
            unitOfWork.Save();
            return Json(new { ok = true, newurl = Url.Action("Index") });
        }
        ViewBag.DeviceInstanceId = new SelectList(unitOfWork.deviceInstanceRepository.Get(), "Id", "SerialNo", deviceusage.DeviceInstanceId);
        ViewBag.StorageId = new SelectList(unitOfWork.storageRepository.Get(), "Id", "Name", deviceusage.StorageId);
        var data = unitOfWork.userRepository.Get()
        .Select(s => new
        {
            Id = s.Id,
            Credentials = s.Name + " " + s.Surname
        }
        );
        ViewBag.UserId = new SelectList(data, "Id", "Credentials", deviceusage.UserId);
        return PartialView(deviceusage);
    }

正如您所看到它返回PartialView,因为下拉菜单位于模态窗口中,并通过Ajax调用返回进行更新。

@ UPDATE2

使用浏览器控制台进行测试时使用此代码:

$('#StorageId').val()

我设法找到了:

  • 首次发送

  • 之前正确返回值
  • 如果由于数据错误而重新加载模态。使用列表更改选定值不会改变任何内容。使用此代码返回的值是带有ajax的falue发送。

2 个答案:

答案 0 :(得分:1)

始终将第一个值提交给控制器的问题背后的原因是因为此attr设置为下拉列表框中的第一个选项selected="selected"

您可以通过更改事件回调来绕过此行为,如此

JQUERY CODE:

$('.a select').on('change',function() {
      $(this).find('option:selected').attr("selected","selected");
}); 

在页面正文的$(document).ready( function() { ...... })onload内添加上述事件监听器。

快乐编码:)

答案 1 :(得分:0)

尝试:

StorageId: $('.a').children('#StorageId').val()

注意#StorageId

上的大写'S'

你也可以这样做:

StorageId: $('#StorageId :selected').val();

我创建了一个jsfiddle来演示:http://jsfiddle.net/2qpBZ/