覆蓋模態形式MVC / C＃的寬度

Question

我已經在整個應用程序之間共享了一個模式形式，現在我想對這個特定模式重復使用相同的定義，但是只是覆蓋寬度。 有什么辦法嗎？

<div id="modal-container" class="modal fade">
<div class="modal-dialog" style="width: 90%;"> -- this style attribute should change whenever gets called on a specific view
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h2 class="modal-title"></h2>
        </div>
        <div class="modal-body partialContainer" style="max-height: 600px;">
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="modal-submit">Save</button>
        </div>
    </div>
</div>

Answer 1

將模型定義放在局部視圖（ _MyModel.cshtml ）中，並從動態ViewDate替換寬度，然后通過傳遞寬度來調用局部視圖。

部分查看代碼：

<div id="modal-container" class="modal fade">
    <div class="modal-dialog" style='@ViewData["width"].ToString()'> -- this style attribute                  should change whenever gets called on a specific view
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal-title"></h2>
    </div>
    <div class="modal-body partialContainer" style="max-height: 600px;">
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" id="modal-submit">Save</button>
    </div>
</div>

通過傳遞寬度，從任何視圖或局部視圖調用以上局部視圖

  @Html.Partial("_MyModel", new ViewDataDictionary { { "width", "500px" } })

我們還可以使用Model或viewBag傳遞數據。

Answer 2

在您要更改寬度的模型中添加自己的類

<div id="modal-container" class="modal fade customClass"> // added custom class
<div class="modal-dialog" style="width: 90%;"> -- this style attribute should change whenever gets called on a specific view
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h2 class="modal-title"></h2>
        </div>
        <div class="modal-body partialContainer" style="max-height: 600px;">
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="modal-submit">Save</button>
        </div>
    </div>
</div>

然后僅為該類添加CSS

.customClass{
  width:400px; // custom width 
}