iT邦幫忙

0

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

如題,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邦研究生 4 級 ‧ 2021-05-28 16:50:13 檢舉
如果您是寫Razor Page,那不是直接讓Model render在modal content裡就好了嗎~XDDD
因這頁面本身已經有另一個Model了
而需要傳的是Model底下的某一個List~ QQ

1 個回答

1
YoChen
iT邦研究生 4 級 ‧ 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>
...

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邦研究生 4 級 ‧ 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);
        }
    });
});

嗯嗯 這就跟我現在的方法差不多了
透過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>");
                });
            });           
            
        });

我要發表回答

立即登入回答