Как открыть мод загрузки с другой страницы просмотра - PullRequest
Новая
       40

Как открыть мод загрузки с другой страницы просмотра

0 голосов
/ 14 мая 2019

У меня есть кнопка на одной странице просмотра.модал на другой странице.Я должен открыть эту модель при нажатии кнопки.Как этого добиться?Есть в основном два вида.

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>

Ответы [ 3 ]

0 голосов
/ 14 мая 2019

Поскольку вы не показываете свой основной вид и 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");
}

Индекс 

<!-- 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>

Сценарий: 

 <script>

    $(document).ready(function () {

        $('#btnGetData').click(function () {


            var requestUrl = '@Url.Action("GetSomeData", "Home")';

            $.get(requestUrl)

            .done(function (responsedata) {

                console.log("success");

                $("#partialViewContent").html(responsedata);

                $('#myModal').modal('show')

            })
            .fail(function () {
                alert("error");
            })
            .always(function () {
                console.log("finished");
            });

        })

        });


    </script>

Надежда помогает.

0 голосов
/ 17 мая 2019

в вашем movies.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, можно передать модель, например, @ Html.RenderPartial ("Addactor", Model.PartialViewModel), где ваш PartialViewModel содержит имя свойства bio и т. Д.

0 голосов
/ 14 мая 2019

Попробуйте код ниже, чтобы вызвать ваш модал. 

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

Надеюсь, этот код будет полезен для вашей проблемы:)

...