Question

所以我有一个模型，它是一个显示在表格中的自定义对象的集合。当单击其中一个对象时，我想用一些文本框和复选框填充模型中与所选对象相关的数据。

通过单选按钮选择对象的表：

<tr>
            <td style="align-content:center">
                <div class="radio">
                    @Html.RadioButtonFor(x => Model.CustomObject[i].WhichSelected, Model.CustomObject[i].ID, new { Id = "CustomObjectRadio", Name = "group1", onClick = "populateData()" })
                </div>
            </td>
            <td style="align-content:center">
                @Html.TextBoxFor(x => Model.CustomObject[i].Title)
                @Html.HiddenFor(x => Model.CustomObject[i].Title)
            </td>

            <td style="align-content:center">
                @Html.TextBoxFor(x => Model.CustomObject[i].BitType.Name)
                @Html.HiddenFor(x => Model.CustomObject[i].BitType.Name)
            </td>
        </tr>

目前的JavaScript功能

function populateData() {  
        $('#title').val(@Model.CustomObject["The object selected"].Title);
        $('#message').val(@Model.CustomObject["The object selected"].Message);
        $('#priority').prop("checked", @Model.CustomObject["The object selected"].IsPriority);
        $('#active').prop("checked", @Model.CustomObject["The object selected"].IsActive);
    };

我要填充的元素

<ul id="Create/Edit" style="list-style:none;">
        <li>
            Title : <br />
            <input type="text" id="title">
        </li>
        <li>
            Message : <br />
            <textarea id="message" style="width:500px; height:75px;" ></textarea>
        </li>
        <li>
            Is it a Priority? :
            <input type="checkbox" id="priority">
        </li>
        <li>
            Is it Active? :
            <input type="checkbox" id="active">
        </li>                        
    </ul>

如果有任何其他需要，请告诉我，提前谢谢

Answer 1

因此，我没有尝试做什么，而是找到了一个使用ajax方法的工作，允许我传递所选单选按钮所关联的CustomObject的ID。之后我只使用控制器将所选的CustomObject返回到viewModel中的视图。然后我使用if语句允许文本框和复选框开始为空。

Ajax方法

 function populateData() {
        $.ajax({
            url: "@Url.Action("PopulateData", "Configuration")",
            type: 'Post',
            datatype: "html",
            cache: false,
            data: {
                'group1': escape(@i)
            }
        });
    };

控制器方法

[HttpPost]
    public ActionResult PopulateData(string group1)
    {            
        int i = int.Parse(group1);
        viewModel = dataFactory.GetCustomObjects();
        viewModel.ChosenCustomObject = viewModel.CustomObjectList[i];
        return View("~/Views/Configuration/AdminVitalBits.cshtml", viewModel);
    }

查看HTML

 @if (Model.VitalBitToPopulate != new Project._0.Models.CustomObject())
    {
        <ul id="Create/Edit" style="list-style:none;">
            <li>
                Title : <br />
                <input type="text" id="title" value="@Model.CustomObjectToPopulate.Title">
            </li>
            <li>
                Message : <br />
                <textarea id="message" style="width:500px; height:75px;">@Model.CustomObjectToPopulate.Message</textarea>
            </li>
            <li>
                Is it a Priority? :
                <input type="checkbox" id="priority" checked="@Model.CustomObjectToPopulate.IsPriority">
            </li>
            <li>
                Is it Active? :
                <input type="checkbox" id="active" checked="@Model.CustomObjectToPopulate.IsActive">
            </li>                
        </ul>
    }
    else
    {
        <ul id="Create/Edit" style="list-style:none;">
            <li>
                Title : <br />
                <input type="text" id="title">
            </li>
            <li>
                Message : <br />
                <textarea id="message" style="width:500px; height:75px;"></textarea>
            </li>
            <li>
                Is it a Priority? :
                <input type="checkbox" id="priority">
            </li>
            <li>
                Is it Active? :
                <input type="checkbox" id="active">
            </li>
        </ul>
    }

如何使用javascript使用模型中的值填充Html元素

1 个答案: