如何在單擊按鈕時獲取對象的ID和名稱，並在ASP.NET視圖中以模態顯示它們

Question

我有一個強類型的視圖，在該視圖中，我遍歷數據庫中的某些對象，並將其分配到帶有兩個按鈕的巨型框中。 當我單擊其中一個按鈕時，會彈出一個modal對話框。 我想在此模式中的某處具有相應對象的名稱和ID，但我真的不知道該怎么做。 我有點困惑在哪里使用c＃和javascript。 顯然，我是新手。

有人可以幫忙嗎？

這是我到目前為止的代碼。 除了模態代碼外，我與我的問題沒有任何關系：

 @model IEnumerable<eksp.Models.WorkRole>
@{
    ViewBag.Title = "DisplayListOfRolesUser";
}

<div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var dataJSON;
        $(".alert").hide();
        //make the script run cuntinuosuly
        $.ajax({
            type: "POST",
            url: '@Url.Action("checkNumRoles", "WorkRoles")',
            dataType: "json",
            success: successFunc,
            error: errorFunc
        });

        function successFunc(data, status) {


            if (data == false) {
                $(".alert").show();
                $('.btn').addClass('disabled');

                //$(".btn").prop('disabled', true);
            }

        }

        function errorFunc() {
            alert('error');
        }


    });


</script>



@foreach (var item in Model)
{

    <div class="jumbotron">
        <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1>
        <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p>
        <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p>
        <p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
    </div>

}



<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">@Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
            </div>
        </div>

    </div>
</div>

Answer 1

我認為您混淆了Razor的服務器端渲染和Modal的客戶端渲染。 模態無法訪問您的Model屬性，因為這些屬性是在向用戶提供頁面之前在服務器端呈現的。 這就是為什么在您的代碼<h4 class="modal-title">@Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>無法起作用的原因。

您要做的是在瀏覽器中捕獲事件客戶端。 Bootstrap通過允許您掛接Modal的事件來實現此目的。 您想要做的就是掛接到“ show”事件，然后在該事件中從頁面捕獲所需的數據並將其提供給Modal。 在“顯示”事件中，您可以訪問relatedTarget-這是調用模式的按鈕。

我將更進一步，將需要的數據添加為按鈕本身，作為data-xxxx屬性或可通過JQuery輕松訪問的DOM元素，從而使事情變得更容易。 我根據顯示的內容為您創建了一個樣本，以使您了解如何實現該目標。

引導樣本

如果需要的話... 如何在剃須刀中指定數據屬性

Answer 2

首先

您將需要從按鈕中刪除data-toggle =“ modal”和data-target =“＃myModal”，因為我們將通過JS手動調用它，並添加一個類以稍后引用該按鈕，因此最終的按鈕將是：

<button type="button" class="btn btn-default btn-lg modal-opener">Had role in the past</button>

然后

在您的jumbotron循環中，我們需要捕獲要稍后在模態上顯示的值，我們不想顯示它，因此我們使用隱藏的輸入：

<input type="hidden" name="ID_OF_MODEL" value="@item.WorkRoleId" />
<input type="hidden" name="NAME_OF_MODEL" value="@item.RoleName" />

對於要顯示的每個信息，您將創建一個引用當前循環值的輸入。

現在您終於展示了模態

您的document.ready函數將具有以下新功能：

$('.modal-opener').on('click', function(){
      var parent = $(this).closest('.jumbotron');
      var name = parent.find('input[name="NAME_OF_MODEL"]').val();
      var id = parent.find('input[name="ID_OF_MODEL"]').val();

      var titleLocation = $('#myModal').find('.modal-title');
      titleLocation.text(name);

      // for each information you'll have to do like above...

      $('#myModal').modal('show');
});

它只是獲取我們放置在隱藏輸入中的那些值。

您的最終代碼

@model IEnumerable<eksp.Models.WorkRole>
@{
     ViewBag.Title = "DisplayListOfRolesUser";
 }

 <div class="alert alert-warning alert-dismissable">You have exceeded the number of roles you can be focused on. You can 'de-focus' a role on this link.</div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
       var dataJSON;
       $(".alert").hide();
       //make the script run cuntinuosuly
       $.ajax({
          type: "POST",
          url: '@Url.Action("checkNumRoles", "WorkRoles")',
          dataType: "json",
          success: successFunc,
          error: errorFunc
    });

    function successFunc(data, status) {


        if (data == false) {
            $(".alert").show();
            $('.btn').addClass('disabled');

            //$(".btn").prop('disabled', true);
        }

    }

    function errorFunc() {
        alert('error');
    }

    $('.modal-opener').on('click', function(){
       var parent = $(this).closest('.jumbotron');
       var name = parent.find('input[name="NAME_OF_MODEL"]').val();
       var id = parent.find('input[name="ID_OF_MODEL"]').val();

       var titleLocation = $('#myModal').find('.modal-title');
       titleLocation.text(name);

       // for each information you'll have to do like above...

       $('#myModal').modal('show');
     });
});


</script>



@foreach (var item in Model)
{

    <div class="jumbotron">
    <input type="hidden" name="ID_OF_MODEL" value="@item.WorkRoleId" />
    <input type="hidden" name="NAME_OF_MODEL" value="@item.RoleName" />

    <h1>@Html.DisplayFor(modelItem => item.RoleName)</h1>
    <p class="lead">@Html.DisplayFor(modelItem => item.RoleDescription)</p>
    <p> @Html.ActionLink("Focus on this one!", "addWorkRoleUser", new { id = item.WorkRoleId }, new { @class = "btn btn-primary btn-lg" })</p>
    <p> <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#myModal">Had role in the past</button> </p>
</div>

}



<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">@Html.DisplayFor(modelItem => item.RoleName)//doesn't work</h4>
        </div>
        <div class="modal-body">
            <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
        </div>
    </div>
</div>