Question

我在一个视图页面上有一个按钮。情态在另一页中。单击按钮时，我应该打开该模型。如何实现呢？主要有两种观点。

1：addactor（局部视图） 2：movies.cshtml（主视图）

This is movies.cshtml


<button class="btn btn-warning" id="btnactor">Add Actor</button>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
@section scripts{
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script>
    debugger 
    $(document).delegate`("#btnactor", "click", function () {
        $("#exampleModalactor").modal("show");
    });
</script>

Addactor.cshtml这是部分视图。

<div class="modal fade" id="exampleModalactor" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" id="stylemodel">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="myModalBodyDiv1">


                <form id="actorform">
                    <div class="row">
                        <div class="col-6">
                            <b>@Html.DisplayName("Name")</b>
                            @Html.TextBoxFor(x=>x.name,new {@class="form-control"})
                            <input type="text" name="name" class="form-control" />
                            <b>@Html.DisplayName("Sex")</b>
                            @Html.TextBoxFor(x => x.sex, new { @class = "form-control", @placeholder = "" })
                        </div>
                        <div class="col-6">
                            <b> DOB </b>
                            @Html.TextBoxFor(x => x.dob, new { @class = "form-control", @placeholder = "plot" })
                            <b> C </b>
                            @Html.TextBoxFor(x => x.bio, new { @class = "form-control", @placeholder = "cast" })
                        </div>

                    </div>
                    <input type="submit" name="submit" value="Add actor" />
                    <a href="#" id="btnsave" class="btn btn-success">Update Changes</a>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" id="saveactor" >Add Actor</button>
            </div>
        </div>
    </div>
</div>

Answer 1

尝试下面的代码来调用您的模态。

$(document).delegate("#btnactor", "click", function () { 
     $("#exampleModalactor").modal("show");        
});

希望此代码对您的问题有用：）

Answer 2

由于您没有显示主视图和//Share bar let shareBar: UIBarButtonItem = UIBarButtonItem.init(barButtonSystemItem:.action, target: self, action: #selector(userDidTapShare)) self.navigationItem.rightBarButtonItem = shareBar if UIDevice.current.orientation.isLandscape { let width = max(self.view.frame.size.width, self.view.frame.size.height) let height = min(self.view.frame.size.width, self.view.frame.size.height) self.newImageView?.frame.size.height = height self.newImageView?.frame.size.width = width navBar = UINavigationBar(frame: CGRect(x: 0, y: UIApplication.shared.statusBarFrame.height, width: width, height: 100)) } else { let width = min(self.view.frame.size.width, self.view.frame.size.height) let height = max(self.view.frame.size.width, self.view.frame.size.height) self.newImageView?.frame.size.height = height self.newImageView?.frame.size.width = width navBar = UINavigationBar(frame: CGRect(x: 0, y: UIApplication.shared.statusBarFrame.height, width: width, height: 100)) } view.addSubview(navBar!)视图，因此我在下面以答案为例。

下面的安装程序应该可以在主视图中显示部分视图模态。

操作方法

Partial

索引视图

public ActionResult Index()
{

 return View();
}


public PartialViewResult GetSomeData()
{
   System.Threading.Thread.Sleep(2000); // Just to show delay to Get data

   ViewBag.Message = "Example Data from Server"; //Using ViewBag Just for example, use ViewModel Instead

   return PartialView("~/Views/Shared/_ExamplePartial.cshtml");
}

_ExamplePartial View

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" id="btnGetData">
    Get Modal With Partial
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="partialViewContent">

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

脚本：

<h2>Partial View Contents</h2>


 <h3>@ViewBag.Message</h3>


<p>Some More Static Content</p>

希望有帮助。

Answer 3

在movie.cshtml中，您可以使用局部视图，例如，也无需添加额外的脚本来显示模式，您只需在按钮中设置data-target和data-toggle属性即可。

@section Styles{
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
}
This is movies.cshtml
<button class="btn btn-warning" id="btnactor" data-toggle="modal" data 
target="#exampleModalactor">Add Actor</button>
<!-- your modal from partial view will be rendered here.-->
@Html.RenderPartial("Addactor")
@section scripts{
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
 }

由于要添加具有某些模型属性（如name，dob）的局部视图，因此可以传递@ Html.RenderPartial（“ Addactor”，Model.PartialViewModel）之类的模型，其中PartialViewModel包含属性名称bio等。

Answer 4

在movies.cshtml中添加以下行：

 @Html.Partial("~/Views/Shared/Addactor.cshtml")

我不知道Addactor.cshtml的路径是什么，所以只需将“〜/ Views / Shared / Addactor.cshtml”替换为正确的路径。

如何从另一个视图页面打开引导模式

4 个答案: