基于MVC Web应用程序中的下拉选择项更改更新视图模型的一部分

本文关键字：更新 新视图 一部分 模型 Web MVC 应用程序 基于 选择 | 更新日期: 2023-09-27 18:00:14

难以找到此问题的解决方案。

表单的一部分包含一个多行表，用于显示在活动中已分配角色的用户。它与许多其他部分是复杂形式的一部分。

我想根据可用用户的下拉列表更改用户，并将其反映在ViewModel中，这样当在表单上单击后续的"保存"按钮时，更改后的用户将被保存回数据库。我一直在想如何实现这一点。

我有下面的javascript来响应dropdwonlist更改事件，它在更改事件上按预期工作，但不知道如何更新ViewModel。

    $("#RecipientsName").change(function () {
        var url = '@Url.Action("GetUser","Controller")';
        var data = { id: $(this).val() };
        $.ajax({
            type: 'Get',
            url: url,
            contentType: 'application/json; charset=utf-8',
            data: data,
            dataType: 'json',
            success: function (userInfo) {
                $('#UpdatedRecipientName').text('Hey');  // This does update the view
                alert(userInfo.Result);
            },
            error: function (userInfo) {
                alert('Failed');
            }
        });
    });

这是控制器中的方法，它只是返回当前传入的字符串。

    public ActionResult GetUser(string id)
    {
        return Json(new {Result = id},JsonRequestBehavior.AllowGet);
    }

这似乎应该是一件很难完成的事情，但到目前为止还没有找到解决方案。也许我完全错了，希望有人能给我指明正确的方向。

感谢

基于MVC Web应用程序中的下拉选择项更改更新视图模型的一部分

MVC根据控件的名称解释视图模型。

所以，如果说你的视图模型看起来像这样：

public class MyViewModel
{
    public string SomeProperty1 {get;set;}
    public string SomeProperty2 {get;set;}
}

在你的表格上，你应该有这样的东西：

<input type="text" name="SomeProperty1"/>
<input type="text" name="SomeProperty1"/>

全视图示例：

@model TestMVC.Models.MyViewModel

<h2>TestAction</h2>
<script>
    function ChangeValue() {
        var textbox = document.getElementById('MyElementToChange1');
        textbox.value = 'Property 5';
    }
</script>
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>MyViewModel</legend>
    Some Property 1
            <input name="SomeProperty1" type="text" value="@Model.SomeProperty1" id="MyElementToChange1"/>
            Some Property 2
            <input name="SomeProperty2" type="text" value="@Model.SomeProperty2" id="MyElementToChange2"/>
        <p>
            <input type="submit" value="Save" />
        </p>
    </fieldset>
}
<input type="button" value="Change Value" onclick="ChangeValue()"/>
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

你提交给的控制器可以有这样的东西：

    public ActionResult TestAction()
    {
        MyViewModel viewModel = new MyViewModel();
        viewModel.SomeProperty1 = "Property 1";
        viewModel.SomeProperty2 = "Property 2";
        return View(viewModel);
    }
    [HttpPost]
    public ActionResult TestAction(MyViewModel viewModel)
    {
        return View(viewModel);
    }

在本例中，如果单击视图中的按钮，它会将SomeProperty1的值更改为5，如果检查ActionResult-TestAction（MyViewModel-viewModel）方法，您将看到SomeProperty2的值为5。

使用javascript所要做的就是更新与要更新的属性同名的输入控件，它将用作提交给Action的视图模型的一部分。请注意，您不能为此使用标签-如果您有一个不希望用户修改的属性，则应该使用隐藏输入来存储值。

编辑：在视图中添加更多内容以显示javascript

相关文章：