如何在Bootstrap模式的輸入字段中顯示值？

Question

我正在嘗試創建一個模式確認對話框，顯示輸入到文本框中的文本供他們在提交之前查看。

我什麼都有了「工作」，除了顯示在模態文本。以下是我的觀點。請注意0​​字段。即使如此，如果我在該頁面上單擊「提交」，它將顯示任何內容，但只要它返回Controller，它就具有一個值。

所以，我怎麼顯示屬性或包含它的文本框的值？

@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>');  }); 
})