Umesh AP Ответов: 2

Открыть вид внутри модального всплывающего диалогового окна

Всем Привет,
Я разрабатываю приложение MVC4 с возможностями поиска, подкачки и сортировки с использованием Ajax &Partial View. У меня были представления для операций CRUD, открывающиеся отдельно при щелчке ActionLink. Все работает нормально. Теперь я хочу открыть их как модальное всплывающее окно. Всякий раз, когда пользователь нажимает на ActionLink, появляется модальное всплывающее окно с соответствующим представлением. Пользователь может выполнять ту же операцию, что и обычный вид, и после завершения модальное всплывающее окно исчезнет, обновляя частичный вид с обновленными данными.

Для создания, редактирования и детализации я использовал @Html.ActionLink и для удаления я использовал @Ajax.Помощники ActionLink. Я использую строго типизированные представления.

Каков наиболее эффективный способ добиться этого, не внося так много изменений в существующее приложение?

Обновленный Вопрос :

Мой BundleConfig. cs

public static void RegisterBundles(BundleCollection bundles)
        {
            // COMMENTED FOR datepicker ISSSUE. ON Sep 14. 
            //bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            //            "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));
            
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }


Мой Файл _Layout.cshtml по:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</body>
</html>


Что я уже пробовал:

После того, как я погуглил решение, я сослался [этот] но безрезультатно.

2 Ответов

Рейтинг:
2

Member 11419276 

bundles.Add(new ScriptBundle("~/Scripts/jquery.unobtrusive-ajax.min.js"));

Добавьте этот jquery в файл BundleConfig. cs

Рейтинг:
1

David_Wimbley

Поэтому я решил сделать это через jquery, используя bootstrap. На мой взгляд, у меня будет ссылка/кнопка и событие щелчка, привязанное к ней. Кроме того, в этом событии click есть ajax-вызов для загрузки частичного и заполнения его в тело модального окна.

@*Lets call this index.cshtml and references a partial called MyModalWindow*@
<script type="text/javascript">
$(function(){ 
    //use .on instead of .click, i'm lazy
    $("#btn-show-modal").click(function(){ 
        $.ajax({
	    cache: false,
            url: '/Controller/ActionToLoadPartial',
	    contentType: 'application/html; charset=utf-8',
            type: 'GET',
            dataType: 'html',
            data: { param: yourParamToKnowWhatToLoad }
        }).success(function (data) {
	    $("#modal-window .modal-body").html(data);
            $("#modal-window").modal("show");
        }).error(function () {
	    // Do something with the error
        });
    });
});
</script>
<a href="javascript:void(0);" id="btn-show-modal">Open</a>

  @Html.Partial("MyModalWindow")


Тогда у меня будет частичное содержимое самого модального окна

@*This would be MyModalWindow.cshtml *@
    <script type="text/javascript">
    $(function () {
        $("#modal-window").on("click", "#btn-close", function () {
            $("#modal-window").modal("hide");
        });
    });
</script>

<div id="modal-window" style="display:none;" title="Your Title HEre" class="modal fade">
    <div class="modal-dialog" style="width: 50%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Title</h4>
            </div>            
			<div class="modal-body">

			</div>
			<div class="modal-footer">
				<button type="button" id="btn-close" class="btn btn-default">Close</button>
			</div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


Затем в вашем контроллере у вас будет действие для загрузки частичного (см. Первый блок кода с использованием. ajax. В этом примере у меня есть частичное представление под названием _ModalWindowEditTemplate

public ActionResult ActionToLoadPartial(string id, string mode)
{
	try
	{
			// Do something to load any model data
	}
	catch (Exception ex)
	{
		
	}

	return PartialView("_ModalWindowEditTemplate");
}


Именно так я решил поступить, поскольку сохраняю большой контроль над тем, что происходит/как все происходит. Есть много способов достичь того, что вы пытаетесь сделать, поэтому, если это не сработает, продолжайте искать в google, потому что это чрезвычайно распространенная функциональность, которая не очень уникальна.

Umesh AP

Спасибо David_Wimbley за ваш ответ.
Но какие файлы jQuery мне нужно упомянуть в моем представлении и в каком порядке, не могли бы вы упомянуть.
Я получаю различные ошибки из-за неправильных ссылок на файлы jQuery.

David_Wimbley

Можете ли вы использовать ссылку улучшить вопрос в своем исходном вопросе и обновить его с помощью bundle.config и layout.cshtml