覆盖模式窗体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 
}