Bootsrap Modal 如何接收整個自定義Model

c# razor page modal bootstrap asp.net core

緯大啊緯大人 2021-05-28 10:57:52 ‧ 2631 瀏覽

分享至

如題，C# Razor Page

我有個Bootsrap Modal，要動態接收值
單單傳值利用data- xx 沒什麼問題，例如以下：

引發Modal的按鈕

<input type="button" value="放棄" class="btn btn-danger abort_btn" data-toggle="modal" data-target="#myModal" data-id="@item.Id" />

Modal本體

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">
                    <h1>Title</h1>
                </div>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>

</div>

<div class="modal-body">
<input type="text" id="itemid">  <!-- Modal接收到值的位置 -->

</div>
<div class="modal-footer">
</div>
            
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

JS傳值

 $(".abort_btn").on("click", function () {
            var id = $(this).attr("data-id");
            $("#itemid").val(id);
        });

目前我的需求要將某個自定義Model丟進去，而且會是一個List
過後在Modal中，利用foreach 展開顯示
想不出有什麼辦法可解~

感謝~

2021/05/28 23:10 更新

找不到傳Model的方法，放棄
改使用傳id進modal，再使用ajax抓取我要的List
呈現在modal上~

當然還是希望有人知道有沒有方法直接傳Model進modal ?!

YoChen iT邦研究生 1 級 ‧ 2021-05-28 16:50:13 檢舉

如果您是寫Razor Page，那不是直接讓Model render在modal content裡就好了嗎~XDDD

緯大啊緯大人 iT邦好手 1 級 ‧ 2021-05-28 23:09:43 檢舉

因這頁面本身已經有另一個Model了
而需要傳的是Model底下的某一個List~ QQ

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

YoChen

iT邦研究生 1 級 ‧ 2021-05-29 14:33:21

最佳解答

您可以考慮使用Partial View搭配您的list model來作呈現

<!--View.cshtml-->
@model ThisPageModel
@{
    ListModel listModel = GetMyListModel();
}

...
<div class="modal-body">
    @Html.Partial("_PartialView", listModel)
</div>
...

<!--_PartialView.cshtml-->
@model ListModel

@foreach(var info in Model)...

實際上當然你也可以直接用listModel render在頁面上，
主要看Partial內容是否會重複使用來判斷。

<!--View.cshtml-->

...
<div class="modal-body">
    @foreach(var info in listModel)...
</div>
...

回應 3
分享
檢舉

緯大啊緯大人 iT邦好手 1 級 ‧ 2021-05-29 16:03:15 檢舉

partial View我有想過因為它可以以一個Model帶入

忘了提到，我這是查詢介面，資料都是因查詢而動態出現
所以我的觸發modal的按鈕是多個，如下

@foreach (Expediting e in Model.BsunitDetail)
{
<tr>
<td>@e.Bs_name
<button class="btn btn-dark btn-sm viewreason" style="height:25px;margin-bottom:5px;"
data-toggle="modal" data-target="#myModal"
data-id="@e.Id" data-type="b" data-date="@e.CorrectionDate"
data-bsname="@e.Bs_name" >
<i class="far fa-eye"></i>  </button> 
</td>
<td>@e.OsmpName</td>
<td>@e.OsmpTel</td>
</tr>
}

簡單說是我的每一列要取得該列的Model資料進modal
也就是我會有很多個個別的ListModel @@
這樣我的partial View...應該怎麼擺懊惱

YoChen iT邦研究生 1 級 ‧ 2021-05-29 17:05:15 檢舉

如果是這樣的話，
我覺得透過ajax來call PartialView的API會彈性一點，
畢竟理想的情況是要盡量控制只有一組Modal在DOM裡面就好~XDD

建立對應API
如果有多個不同listModel Class，也可以建立多個

// controller
public ActionResult PartialView(string id)
{
    // 透過id抓取對應的listModel
    return PartialView("_PartialView", listModel);
}

View的部分就準備ajax回傳的target就好

<!--View.cshtml-->
...
<div id="model-target" class="modal-body">
    <!--ajax回傳的html位置-->
</div>
...

透過ajax呼叫API，然後將回傳的html寫進剛剛準備的target

// javascript
$("#modal-button").click(function () {
    $.ajax({
        url: "url", // PartialView API url
        data: { id: "id" }, // API的id參數
        success: function (data, textStatus, jqXHR) {
            $("#model-target").html(data);
        }
    });
});

緯大啊緯大人 iT邦好手 1 級 ‧ 2021-05-29 21:32:03 檢舉

嗯嗯這就跟我現在的方法差不多了
透過id去get我要的List回來~ 哈哈
感謝你!

$(".viewreason").on("click", function () {
var id = $(this).attr("data-id");
var type = $(this).attr("data-type");
var correctiondate = $(this).attr("data-date");
var bsname = $(this).attr("data-bsname");

$("#reason").html('');
$("#bsname").html(bsname);
            
$.get('@Url.Action("GetReason")', { id,type }, function (datas) {


datas.forEach(function (data,i) {

    if (data.reason === null) { data.reason = '無'; }
    if (data.otherReason === null) { data.otherReason = '無'; }

    $("#reason").append("<tr>" +
    "<td>" + (i+1) + "</td>" +
    "<td>" + data.reason + "</td>" +
    "<td>" + data.otherReason + "</td>" +
    "<td>" + correctiondate.substring(0,9) + "</td>" +
    "</tr>");
                });
            });           
            
        });

登入發表回應