Question

我正在尝试创建一个“模态确认”对话框，该对话框显示输入到文本框中的文本，供他们在提交之前查看。

我拥有一切＆＃39;工作＆＃39;除了在模态中显示文本。以下是我的观点。请注意@Model.UserName字段。即使如此，如果我单击该页面上的“提交”，它一旦返回到控制器，它就会显示一个值。

那么，如何显示该属性的值或包含它的文本框？

@model HelpDeskSupportRequestor.Models.SupportRequest

<h2>IT Support Request</h2>    

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

<div class="form-horizontal">
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    <div class="form-group">
        @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.EmailAddress, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.RequestDetails, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.RequestDetails, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.RequestDetails, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.RequestPriority, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.EditorFor(model => model.RequestPriority)
            @Html.ValidationMessageFor(model => model.RequestPriority, "", new { @class = "text-danger" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" data-toggle="modal" data-target="#myModal" value="Submit Request" class="btn btn-default" />
        </div>
    </div>
</div>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Confirm IT Support Request</h4>
            </div>
            <div class="modal-body">
                <p>@Model.UserName</p>
            </div>
            <div class="modal-footer">
                <input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel" />
                <input type="submit" class="btn btn-primary" value="Confirm" />
            </div>
        </div>
    </div>
</div>

}

Answer 1

听起来像我一样，期望在模型中存在输入的用户名（因此视图中的模态）。

尝试使用javascript来执行此操作：

<script type="text/javascript">
  $('#UserName').on('input', function () {
  var username = $("#UserName").val();
  $(".modal-body").html('<p>'+username+'</p>');
 });
</script>

修改

在回复您的评论时，您正在使用引导程序和编辑多个字段，也可以这样做：

 $('#myModal').on('shown.bs.modal', function (e) {
    var username = $("#UserName").val(); 
    var email = $("#EmailAddress").val(); 
    var priority = $("#RequestPriority").val(); 
    var request = $("#RequestDetails").val(); 
    $(".modal-body").html('<p>User Name: '+username+'</p>' +
        '<p>Email Address: '+email+'</p>' +
        '<p>Requested Priority: '+priority+'</p>' +
        '<p>Request Details: '+request+'</p>');     }); 
})

如何在Bootstrap模式中的输入字段中显示值？

1 个答案: